欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 房产 > 建筑 > uview表单校验不生效问题

uview表单校验不生效问题

2024/10/26 4:24:40 来源:https://blog.csdn.net/qq_44161722/article/details/142660721  浏览:    关键词:uview表单校验不生效问题

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

<u--formlabelPosition="top"labelWidth="auto":model="form":rules="rules"ref="uForm"
><view class="form-item"><view class="form-remark"><u-form-itemlabel="反馈与建议"prop="contents":borderBottom="false":required="true"ref="item1"><u--textareav-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-itemlabel="手机号"labelPosition="left"prop="phonenumber":borderBottom="false"ref="item1"><u-inputplaceholder="请输入手机号"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和changetrigger: '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好像不能正确校验

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com