uni-app表单验证3种方法

 本文介绍了uni-app中与vue类似的表单验证方法，重点在于将prop改为name，使用rules进行验证，并展示了自定义验证函数validateFunction的用法，如检查手机号码格式。同时提到了errorMessage的使用，确保用户输入的正确性。
摘要由优快云通过智能技术生成

uni-app和vue验证方法大同小异，

<uni-forms ref="form" :model="form" :rules="rules">;
	<uni-forms-item label="电话号码" name="Phone"> //1.将prop改为name
		<uni-easyinput v-model="form.Phone" placeholder="请输入电话号码" />
	</uni-forms-item>
data() {
	return {
		// 2.表单校验rules里套字段在进行rules验证
			rules: {
				Phone: { //3.Message改为errorMessage
					rules: [{ required: true, errorMessage: '手机号码不能为空' },{
	validateFunction: function (rule, value, data, callback) {
		let iphoneReg = /^1[0-9]{10}$/
			if (!iphoneReg.test(value)) {
				callback('手机号码格式不正确，请重新填写')
					}
				  return true
				}
			}]
		},					
	  },
	}
}

以上第一种方法已验证成功

第二种方法

 rules: {
  phonenumber: {
            rules: [{
              required: true,
              errorMessage: '手机号码不能为空'
            }, {
              pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
              errorMessage: '请输入正确的手机号码'
            }]
          },
           },

//第三种方法

 data() {	
		/* 是否手机号码*/
		const validatePhone = (rule, value, callback) => {
		  const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
		  if (value == '' || value == undefined || value == null) {
			callback();
		  } else {
			if ((!reg.test(value)) && value != '') {
			  callback(new Error('请输入正确的手机号码'));
			} else {
			  callback();
			}
		  }
		}
		 return {
		 rules: {
			telephone: [
			  { required: true, message: '请输入联系电话', trigger: 'blur' },
			  { required: true, validator: validatePhone, trigger: 'blur' }
			],
		}
      }
    }

uni-app表单验证3种方法_uniapp表单校验手机号-优快云博客