使用uni-forms校验遇到一个问题:
<uni-forms :model-value="userInfo" :rules="rules" ref="form2">
<uni-forms-item required label="账号:" name="code">
<uni-easyinput placeholder="请输入账号" type="text" v-model="userInfo.code"/>
</uni-forms-item>
<uni-forms-item required label="新密码:" name="password">
<uni-easyinput placeholder="请输入新密码:" type="password" password-icon="false" v-model="userInfo.password"/>
</uni-forms-item>
<uni-forms-item required label="确认密码:" name="Tpassword">
<uni-easyinput placeholder="请确认密码:" type="password" password-icon="false" v-model="userInfo.Tpassword"/>
</uni-forms-item>
<uni-forms-item>
<view style="display: flex;justify-content: space-evenly;">
<button class="btn-wrap" type="primary" size="large"
@click="Submit" block>确认
</button>
<button class="btn-wrap" type="primary" size="large"
@click="cancel" block>取消
</button>
</view>
</uni-forms-item>
</uni-forms>
规则校验如下:
rules: {
code: {
rules: [
{
required: true,
errorMessage: '账号不可为空',
},
]
},
password: {
rules: [
{
required: true,
errorMessage: '密码不可为空',
}
]
},
Tpassword: {
rules: [
{
required: true,
errorMessage: '密码不可为空',
},
{
validateFunction:function(rule, value, data, callback) {
console.log(value, data, rule, callback)
if(value != data.password) {
callback('两次密码输入不一致')
}
}
}
]
}
}
onReady() {
// 如果需要兼容微信小程序,并且校验规则中含有方法等,只能通过setRules方法设置规则
this.$refs.form2.setRules(this.rules)
},
因为做的项目是uniapp转小程序,加上uni-forms我有自定义的校验规则,所以要使用setRules来设置规则。
测试的时候发现,我的表单校验规则只能生效一次,比如不能为空触发后,就不能触发同级的两次密码输入不一致;
我开始是猜测异步问题,后来用Promise试了下,没用。
最后看文档,发现是自己粗心略掉一个点:
使用了自定义校验规则就不能用rules配置校验规则,因为onReady( )里已经配置了this.$refs.form2.setRules(this.rules),解决这个问题去掉:rules="rules"就可以了。
顺便整理一下几个用到的uniapp自带的校验规则:
1.仅能输入中文
let inputName = (/^[\u4e00-\u9fa5]+$/);
2.仅能输入数字
let inputName = (/^[0-9]+$/);
3.手机号合法
let iphoneReg = /^1[3456789]\d{9}$/;