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

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好像不能正确校验

http://www.kler.cn/news/326575.html

相关文章:

  • MySql5.7.26安装和配置
  • C#_运算符重载详细解析
  • 随手记:ul-table表格合并方法
  • 爬虫库是什么?是ip吗
  • mysql 用户相关操作
  • 【深度学习】(8)--神经网络使用最优模型
  • js统计字符串中每个字符出现的次数
  • Python | Leetcode Python题解之第440题字典序的第K小数字
  • 【DP解密多重背包问题】:优化策略与实现
  • Iptables,ufw,firewalld的关系与区别
  • 大语言模型(LLM)的子模块拆拆分进行联邦学习;大语言模型按照多头(Multi-Head)拆分进行联邦学习
  • pdf转换成word有哪些方法?10种将PDF转成word的方法
  • 搜维尔科技:5DT数据手套超高的数据质量、较低的交叉关联、高数据频率
  • VUE 开发——AJAX学习(一)
  • 群晖安装Audiobookshelf(有声书)
  • YOLOv11改进 | Neck篇 | YOLOv11引入BiFPN双向特征金字塔网络
  • 项目管理专业资质认证ICB 3中关于项目经理素质的标准
  • FreeRTOS调度器与任务
  • HTML初认识 -- 第二课(全网最好的入门课)
  • el-cascader懒加载回显问题
  • 这 5 个自动化运维场景,可能用 Python 更香?
  • 【工程测试技术】第3章 测试装置的基本特性,静态特性和动态特性,一阶二阶系统的特性,负载效应,抗干扰性
  • Python知识点:如何使用Flink与Python进行实时数据处理
  • Docker快速搭建PostgreSQL15流复制集群
  • 端模一体,猎豹移动对大模型机器人发展路径清晰
  • 每天认识几个maven依赖(ant)
  • dea插件开发-自定义语言9-Rename Refactoring
  • 【以图搜图代码实现2】--faiss工具实现犬类以图搜图
  • mips指令系统简介
  • AI大模型面试大纲