当前位置: 首页 > news >正文

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好像不能正确校验
http://www.lryc.cn/news/450898.html

相关文章:

  • 前端开发设计模式——单例模式
  • 行情叠加量化,占据市场先机!
  • 大厂面试真题-ConcurrentHashMap怎么保证的线程安全?
  • 【RabbitMQ】消息堆积、推拉模式
  • MySQL常用SQL语句(持续更新中)
  • 【更新】红色文化之红色博物馆数据集(经纬度+地址)
  • Python项目Flask框架整合Redis
  • 完整网络模型训练(一)
  • 高效便捷,体验不一样的韩语翻译神器
  • Markdown笔记管理工具Haptic
  • 网络原理-传输层UDP
  • C++中,如何使你设计的迭代器被标准算法库所支持。
  • Java NIO 全面详解:掌握 `Path` 和 `Files` 的一切
  • bluez免提协议hands-free介绍,全到无法想象,bluez hfp ag介绍
  • 关于区块链的安全和隐私
  • 特征工程——一门提高机器学习性能的艺术
  • Paper解读:工作场所人机协作的团队形成:促进组织变革的目标编程模型
  • 图文深入理解Oracle Network配置管理(一)
  • leetcode-链表篇3
  • RAG(Retrieval Augmented Generation)及衍生框架:CRAG、Self-RAG与HyDe的深入探讨
  • C语言介绍
  • 损失函数篇 | YOLOv10 更换损失函数之 MPDIoU | 《2023 一种用于高效准确的边界框回归的损失函数》
  • WMware安装WMware Tools(Linux~Ubuntu)
  • SLAM ORB-SLAM2(30)关键帧跟踪
  • k8s 部署 prometheus
  • 使用VBA快速生成Excel工作表非连续列图片快照
  • 解决GitHub下载速度慢
  • 【机器学习(五)】分类和回归任务-AdaBoost算法
  • 【设计模式-模板】
  • 小程序原生-列表渲染