uview表单校验不生效问题

最近几次使用发现有时候会不生效，具体还没排查出来什么原因，先记录一下解决使用方法

<u--form
labelPosition="top"
labelWidth="auto"
:model="form"
:rules="rules"
ref="uForm"
>
<view class="form-item">
<view class="form-remark">
<u-form-item
label="反馈与建议"
prop="contents"
:borderBottom="false"
:required="true"
ref="item1"
>
<u--textarea
v-model="form.contents" 
placeholder="您填写的信息越全，问题越可有效解决哦~" 
:count="true"
maxlength="300"
border="none"
disableDefaultPadding="true"
:placeholderStyle="{'fontSize':'28rpx;'}"
></u--textarea>
</u-form-item>
</view>
</view>
<view class="form-item">
<view class="form-remark">
<u-form-item
label="手机号"
labelPosition="left"
prop="phonenumber"
:borderBottom="false"
ref="item1"
>
<u-input
placeholder="请输入手机号"
border="none"
v-model="form.phonenumber"
:customStyle="{
'line-height':'100rpx',
'padding-bottom':'5px'
}"
color="#666"
fontSize="14"
></u-input>
</u-form-item>
</view>
</view>
</u--form>

<script>
export default {
data() {
return {
form:{
contents: null, // 备注
phonenumber: null, 
url: ''
},
rules: {
'contents': {
required: true,
message: '请填写描述信息',
trigger: ['blur', 'change']
},
'phonenumber': {
required: true, 
validator: (rule, value, callback) => {
// 上面有说，返回true表示校验通过，返回false表示不通过
return uni.$u.test.mobile(value);
},
message: '手机号码格式不正确',
// 触发器可以同时用blur和change
trigger: 'change',
},
},
}
},
onReady() {
//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
this.$refs.uForm.setRules(this.rules)
},
}
</script>

需要注意的是(有待验证)：

1. 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规 this.$refs.uForm.setRules(this.rules)，如果是页面就写在onReady 里，如果是组件需要写在mounted
2. prop 用contents可以正确校验，用form.contents好像不能正确校验

原文地址：https://blog.csdn.net/qq_44161722/article/details/142660721

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！