uni-app使用uni-forms验证遇到的问题
按照uni-app官网设置验证,但遇到一个问题就是一进入页面,输入框没有获取焦点,直接提交表单,会验证通过了,官方验证:https://uniapp.dcloud.io/component/uniui/uni-forms解决方法闹了半天发现是绑定数据的问题直接把:modelValue="formData"改为 v-model="formData"即可验证完整代码如下:<uni-forms r
·
按照uni-app官网设置验证,但遇到一个问题就是一进入页面,输入框没有获取焦点,直接提交表单,会验证通过了,
官方验证:https://uniapp.dcloud.io/component/uniui/uni-forms
解决方法
闹了半天发现是绑定数据的问题
直接把:modelValue="formData"改为 v-model="formData"即可
验证完整代码如下:
<uni-forms ref="form" v-model="regForm" :rules="rules" labelWidth="40" validateTrigger="bind">
<view class="cu-form-group margin-top shadow-warp" :class="[shape == 'round' ? 'round' : '']">
<uni-forms-item required label="姓名:" name="userName">
<uni-easyinput type="text" v-model="regForm.userName" placeholder="请输入姓名" :trim="true" />
</uni-forms-item>
</view>
<view class="cu-form-group margin-top shadow-warp" :class="[shape == 'round' ? 'round' : '']">
<uni-forms-item required label="手机号:" labelWidth="60" name="telephone">
<uni-easyinput type="text" v-model="regForm.telephone" placeholder="请输入手机号" :trim="true" />
</uni-forms-item>
</view>
<view class="cu-form-group margin-top shadow-warp" :class="[shape == 'round' ? 'round' : '']" style="text-justify: flex-start;">
<uni-forms-item required label="密码:" name="password">
<uni-easyinput placeholder="请输入密码" :type="!showRegPassword ? 'password' : 'text'" v-model="regForm.password" :trim="true" />
</uni-forms-item>
<view class="action text-lg"><text :class="[showRegPassword ? 'cuIcon-attention' : 'cuIcon-attentionforbid']" @click="changeRegPassword"></text></view>
</view>
<view class="padding text-center margin-top">
<button class="cu-btn bg-green lg margin-right shadow" :loading="loading" :class="[shape == 'round' ? 'round' : '']" @click="onReg">
<text space="emsp">{{ loading ? '注册中...' : ' 注册 ' }}</text>
</button>
<button class="cu-btn line-green lg margin-left shadow" :loading="loading" :class="[shape == 'round' ? 'round' : '']" @tap="loginWay = 1">
去登录
</button>
</view>
</uni-forms>
rules: {
// 对userName字段进行必填验证
userName: {
rules: [
{
required: true,
errorMessage: '请输入姓名!'
},
{
minLength: 2,
maxLength: 20,
errorMessage: '姓名不合法!'
}
]
},
telephone: {
rules: [
{
required: true,
errorMessage: '请输入手机号!'
},
{
pattern: /^[1]([3-9])[0-9]{9}$/,
errorMessage: '手机号不合法!'
}
]
},
password: {
rules: [
{
required: true,
errorMessage: '请输入密码!'
},
{
minLength: 8,
pattern: /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/,
errorMessage: '长度至少为8,至少含有一个字母和一个数字和一个特殊字符'
}
]
}
}
onReg() {
this.$refs.form
.validate()
.then(res => {
this.regForm.password = Base64.encode(this.regForm.password);
this.register({ item: this.regForm })
.then(res => {
if (res.statusCode) {
this.$tip.success('注册成功!');
this.$Router.replaceAll({
name: 'index'
});
} else {
this.$tip.error(res.data.message);
}
})
.catch(err => {
let msg = err.data.responseHeader.errorMessage || '请求出现错误,请稍后再试';
this.$tip.error(msg);
});
})
.catch(err => {
this.$tip.error('请按要求填写表单!');
console.log('表单错误信息:', err);
});
},
更多推荐
已为社区贡献1条内容
所有评论(0)