解决方案: v-if 改为v-show v-if 会移除元素的,当然获取不到,v-show只是display:none
validateFunction 自定义校验规则使用说明
- uni-forms 的 rules 基础规则有时候不能满足项目的所有使用场景,这时候可以使用 validateFunction 来自定义校验规则
- validateFunction 方法返回四个参数 validateFunction:function(rule,value,data,callback){} ,当然返回参数名开发者可以自定义:
- rule : 当前校验字段在 rules 中所对应的校验规则
- value : 当前校验字段的值
- data : 所有校验字段的字段和值的对象
- callback : 校验完成时的回调,一般无需执行callback,返回true(校验通过)或者false(校验失败)即可 ,如果需要显示不同的
EerrMessage
,如果校验不通过需要执行 callback(‘提示错误信息’),如果校验通过,执行callback()即可
注意 需要注意,如果需要使用 validateFunction 自定义校验规则,则不能采用 uni-forms 的 rules 属性来配置校验规则,这时候需要通过ref,在onReady生命周期调用组件的setRules方法绑定验证规则 无法通过props传递变量,是因为微信小程序会过滤掉对象中的方法,导致自定义验证规则无效。
案例
<uni-forms ref="form" v-if="repairFormShow" v-model="form" border>
<uni-forms-item v-if="form.requirePay" label="paid" name="paid">
<view style="flex: 1;">
<myp-input v-model="form.paid" :maxlength="50" type="number" placeholder="请输入"
border="none" height="l" @input="setPaidValue('paid',form.paid)" />
</view>
</uni-forms-item>
</uni-forms>
paid: {
rules: [{
required: true,
errorMessage: '请输入值',
}, {
validateFunction: function(rule, value, data, callback) {
if (value > data.total) {
callback('请输入小于total的值');
}
return true;
}
}]
}
onReady() {
// 需要在onReady中设置规则
this.$refs.form.setRules(this.rules)
},
注意:表单验证中尽量不使用this,无法将本地的this对象传入其中,如果出现必要则直接使用 @input=“setPaidValue(‘paid’,form.paid)” @input方法
binddata(name,value){
//通过 input 事件设置表单指定 name 的值
this.$refs.form.setValue(name, value)
},