uview form表单手机号验证

 

在做小程序表单部分的时候，添加表单有输入手机号的时候，对输入的手机号做一个校验可以提升用户体验

html部分： 

必填项：

model="form" 表单数据对象

ref="form" 通过ref设置表单验证规则

prop 表单域model对象的属性名，在使用 validate、resetFields 方法的情况下，该属性是必填的，并且属性名要和data里form里的属性名一样

<u-form :model="form" ref="form">
  <u-form-item label="电话" prop="phone">
    <u-input v-model="form.phone"/>
  </u-form-item>
</u-form>

js部分：

export default{
  data(){
   return{
      form:{
        phone:''
        },
      rules:{
         phonne: [{
							required: false,
							message: '请输入手机号',
							trigger: ['blur'],
						},
						{
							validator:this.validateMobile,
							message: '手机号码不正确',
							trigger: ['blur'],
						}
					],
        }
      }
   }

   onReady() {
// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
			this.$refs.form.setRules(this.rules)
		},
   methods:{

      validateMobile(rule, value, callback) {
		  // 检查value是否为空
		  if (!value) {
		    // 如果value为空，校验通过
		    callback();
		  } else if (!this.$u.test.mobile(value)) {
		    // 如果value不为空但手机号码不正确，返回错误
		    callback(new Error('手机号码不正确'));
		  } else {
		    // 如果value不为空且手机号码正确，校验通过
		    callback();
		  }
		},
    }
  }

在提交添加和编辑表单前对表单进行验证，但是手机号的rules里的required属性为false还是会验证失败，原因是this.validateMobile里的value为空时，也返回手机号码不正确，所以给出判断如果为空一样通过校验。

this.$refs.form.validate(valid => {
    if(valid){
    //添加/编辑操作
}

})