<template>
<view class="container">
<view class="title">用户注册</view>
<uni-forms ref="formData" :value="form" :rules="rules">
<uni-forms-item name="regCode" label="注册码" :required="true">
<uni-easyinput type="text" v-model="form.regCode" placeholder="请输入注册码" />
</uni-forms-item>
<uni-forms-item name="name" label="用户名" :required="true">
<uni-easyinput type="text" v-model="form.name" placeholder="请输入姓名" />
</uni-forms-item>
<uni-forms-item name="mobile" label="手机号" :required="true">
<uni-easyinput type="text" v-model="form.mobile" placeholder="请输入手机号码" />
</uni-forms-item>
<uni-forms-item name="password" label="密码" :required="true">
<uni-easyinput type="password" v-model="form.password" placeholder="请输入密码" />
</uni-forms-item>
<uni-forms-item name="checkCode" label="确认密码" :required="true">
<uni-easyinput type="password" v-model="form.checkCode" placeholder="请确认密码" />
</uni-forms-item>
<button @click="regist">注册</button>
</uni-forms>
</view>
</template>
<script>
export default {
data() {
return {
form:{
regCode:'',
name:'',
mobile:'',
password:'',
checkCode:''
},// 表单信息
rules: {
regCode: {
rules:[
{
required:true,
errorMessage: '注册码不能为空!',
}
]
},
name:{
rules:[
{
required:true,
errorMessage: '姓名不能为空!',
}
],
},
mobile:{
rules:[
{
required:true,
errorMessage: '手机号不能为空!',
}
],
},
password:{
rules:[
{
required:true,
errorMessage: '密码不能为空!',
}
],
},
checkCode:{
rules:[
{
required:true,
errorMessage: '请确认密码!',
}
],
}
},// 正则验证
};
},
methods:{
// 提交
regist(){
this.$refs.formData.submit().then(res=>{
console.log('表单数据信息:', res);
}).catch(err =>{
console.log('表单错误信息:', err);
})
}
},
onReady() {
this.$refs.formData.setRules(this.rules)
}
}
</script>
- 发布:2020-12-22 18:05
- 更新:2023-04-26 15:20
- 阅读:1807
产品分类: uniapp/小程序/微信
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: 18363.1198
HBuilderX类型: 正式
HBuilderX版本号: 2.9.8
第三方开发者工具版本号: 1.03.2011120
基础库版本号: 2.8.3
项目创建方式: HBuilderX
示例代码:
操作步骤:
无
无
预期结果:
正常的表单输入
正常的表单输入
实际结果:
焦点的失去与获取,导致软键盘隐藏与弹出
焦点的失去与获取,导致软键盘隐藏与弹出
bug描述:
真机测试以及线上微信小程序中,使用 uni-forms 组件,点击输入框自动失去焦点,有时失去焦点后又自动获取,如此反复
并且报错: _vm.onInput is not a function
唬唬唬 (作者)
官方示例真机测试不了呀 uni-forms组件在 微信开发者工具 上运行也没问题,但是真机测试的时候(包括线上的小程序)就出现上面的问题
2020-12-24 09:24
DCloud_UNI_Anne
回复 唬唬唬: 打开微信,搜索“小程序示例”,看下input示例
2020-12-24 11:51
唬唬唬 (作者)
回复 DCloud_UNI_Anne: 刚刚看了 一样的情况
2020-12-24 14:06
唬唬唬 (作者)
回复 DCloud_UNI_Anne: 不是很懂,我在手机上看他们微信的“小程序示例”也是出现一样的问题 这和我HBuilderX 、基础库的版本有什么关系?
2020-12-24 14:52
DCloud_UNI_Anne
回复 唬唬唬:微信的“小程序示例”是这样的那就没有问题
2020-12-24 14:58
唬唬唬 (作者)
回复 DCloud_UNI_Anne: 你可以看看楼下我发的动图 你的意思是这是微信小程序官方的bug?
2020-12-24 15:11