uniapp表单自定义校验规则积累

文章描述了在Vue.js中使用$nextTick方法动态设置表单验证规则的过程,根据不同输入类型(如电话号码、身份证号等)设置不同的正则表达式校验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

this.$nextTick(() => {
				console.log(this.rules)
				console.log(this.list)
				this.list.forEach((item, index) => {
					let obj = {
						required: item.must,
						trigger: ['change', 'blur'],
						message: item.must ? '该项为必填项' : ''
					}
					if (item.type == 10) {
						if (item.format == "phone") {
							this.rules[`answerString${index+1}`] = [obj, {
								pattern: "^1[3|4|5|6|7|8|9][0-9]{9}$",
								message: "请输入正确的手机号码",
								trigger: "blur"
							}]
						} else {
							this.rules[`answerString${index+1}`] = [obj, {
								pattern: "^(0|[1-9])+(\.[0-9]{1,4}){0,1}$",
								message: "只能输入整数或小数,小数位数不超过4",
								trigger: "blur"
							}]
						}
					} else if (item.type == 9) {
						this.rules[`answerString${index+1}`] = [{
							required: false,
							trigger: ['change', 'blur'],
							message: item.must ? '该项为必填项' : ''
						}]
					} else if (item.type == 3) {
						if (item.format == "idcard") {
							this.rules[`answerString${index+1}`] = [obj, {
								pattern: '^[1-9]\\d{5}(?:18|19|20)\\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\\d|30|31)\\d{3}[\\dXx]$',
								message: "请输入正确的身份证号",
								trigger: "blur"
							}]
						} else {
							this.rules[`answerString${index+1}`] = [obj]
						}
					} else {
						this.rules[`answerString${index+1}`] = [{
							required: item.must,
							trigger: ['change', 'blur'],
							message: item.must ? '该项为必填项' : ''
						}]
					}
				
				})
				this.$refs.uFormRef.setRules(this.rules);
			});

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值