uview插件手机号/邮箱校验

家电修理师

已于 2024-03-25 16:55:21 修改

阅读量1.4k

点赞数 34

分类专栏： uniapp 文章标签：前端 uniapp javascript

于 2024-03-10 15:55:54 首次发布

本文链接：https://blog.csdn.net/zcc88999/article/details/136603154

版权

uniapp 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了如何在微信小程序中使用U-form组件进行表单绑定，包括model参数的处理、prop与rules的关联以及自定义校验方法的创建，重点强调了prop作为字符串的重要性。

摘要由CSDN通过智能技术生成

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框架