uview插件手机号/邮箱校验

Form组件绑定model参数：

• model参数为一个对象，对象属性为需要验证的变量名。
• 通过ref，在onReady生命周期调用组件的setRules方法绑定验证规则，无法通过props传递变量，是因为微信小程序会过滤掉对象中的方法，导致自定义验证规则无效。

<u-form :model="form" ref="uForm">

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

        <u-form-item labelWidth="80px" prop="supplyer_email" required="true" label="电子邮件:">
              <u-input v-model="form.supplyer_email" />
        </u-form-item>

</u-form>

U-form-item绑定label和prop

此组件最大的作用是与u-form和u-input等组件进行交互，在表单验证时，需要绑定prop参数，此参数为u-form组件的model对象中的属性名， 目的是在验证时，通过这个prop属性名将父组件u-form的model和rules规则关联起来。

注意点：

• 通过prop绑定对应的属性名，这里是字符串，而不是一个变量。
• 通过lable参数设置左边显示的提示文字，另外通过label-position可以配置label在左边还是上方。

在onReady中绑定验证规则：

this.$refs.uForm.setRules(this.rules);

在data函数中创建校验规则：        

rules:{

                phone: [
                     { required: true, message: '请输入电话', trigger: 'blur' },
                     { validator: this.checkPhoneNum, trigger: 'blur' },
               ],

                supplyer_email: [
                     { required: true, message: '请输入电子邮件', trigger: 'blur' },
                     { validator: this.checkEmail, trigger: 'blur' },
               ],

}

创建checkPhoneNum/checkEmail校验方法：        

checkPhoneNum(rule, value, callback) {
    var reg = /^1[3456789]\d{9}$/;
    if (reg.test(value)) {
        callback();
    } else {
       callback(new Error('手机号码格式不正确'));
    }
},

checkEmail (rule, value, callback){//邮箱校验
    const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
    if (mailReg.test(value)) {
        callback();
    } else {
       callback(new Error('请输入正确的邮箱格式'));
    }
},

uview官网：Form 表单 | uView - 多平台快速开发的UI框架 - uni-app UI框架