uniapp表单uni-forms校验自定义校验规则，手机校验、身份证校验-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp表单uni-forms校验自定义校验规则，手机校验、身份证校验。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

validateFunction 自定义校验规则
如果需要使用 validateFunction 自定义校验规则,则不能采用 uni-forms 的 rules 属性来配置校验规则，这时候需要通过ref，在onReady生命周期调用组件的setRules方法绑定验证规则无法通过props传递变量，是因为微信小程序会过滤掉对象中的方法，导致自定义验证规则无效。

<uni-forms ref="form">
					<uni-forms-item required label="手机号" name="mob">
						<uni-easyinput v-model="mob"  placeholder="手机号" />
					</uni-forms-item>
					<uni-forms-item required label="身份证" name="id_num">
						<uni-easyinput v-model="DataAll.id_num"  placeholder="身份证" />
					</uni-forms-item>
</uni-forms>

				//表单校验规则
				dynamicRules: {
					mob: {
						rules: [{
							required: true,
							errorMessage: '请填写手机号码',
						}, {
							validateFunction: function(rule, value, data, callback) {
								let iphoneReg = (
									/^(13[0-9]|14[1579]|15[0-3,5-9]|16[6]|17[0123456789]|18[0-9]|19[89])\d{8}$/
								); //手机号码
								if (!iphoneReg.test(value)) {
									callback('手机号码格式不正确，请重新填写')
								}
							}
						}]
					},
					id_num: {
						rules: [{
							required: true,
							errorMessage: '请填写身份证',
						}, {
							validateFunction: function(rule, value, data, callback) {
								let iphoneReg = (
									/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
								); //
								if (!iphoneReg.test(value)) {
									callback('身份证格式不正确，请重新填写')
								}
							}
						}, ]
					},
				},

	onReady() {
		// 需要在onReady中设置规则
		this.$refs.form.setRules(this.dynamicRules)
	},

			submit() {
				let _this = this
				this.$refs.form.validate().then(res => {
					console.log('表单数据信息：', res);
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},