element-ui自定义规则

       我们在表单中使用表单验证时，一般在<el-form></el-form>标签中添加“ :rules="xxx" ”来绑定验证规则，

<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px">
    <el-form-item label="用户名：" prop="username">
        <el-input v-model="addForm.username" placeholder="请输入用户名称" />
    </el-form-item>、

    <el-form-item label="密码：" prop="pwd">
        <el-input v-model="addForm.pwd" placeholder="请输入密码" />
    </el-form-item>
                    
    <el-form-item label="邮箱：" prop="email">
        <el-input v-model="addForm.email" placeholder="请输入用户邮箱" />
    </el-form-item>
                    
    <el-form-item label="手机：" prop="mobile">
        <el-input v-model="addForm.mobile" placeholder="请输入用户手机号码" />
    </el-form-item>
</el-form>

在data中完成校验规则书写

addFormRules:{
    username: [
        {required:true,message:'请输入用户名', trigger:'blur'},
        {min: 3, max: 10, message: '用户名的长度在3~10个字符之间'}
    ],

    pwd: [
        {required:true,message:'请输入密码', trigger:'blur'},
        {min: 6, max: 15, message: '用户名的长度在6~15个字符之间'}
    ],

    email: [
        {required:true,message:'请输入邮箱', trigger:'blur'},
        {validator: checkEmail, trigger: 'blur'}
    ],

    mobile: [
        {required:true,message:'请输入邮箱', trigger:'blur'},
        {validator: checkMobile, trigger: 'blur'}
    ]
}

在项目开发过程中，我们对手机号码和邮箱的校验通常采用自定义规则。自定义规则需要在校验规则对象中用 validator: xxx 来配置，然后在data中实现该方法

{validator: checkMobile, trigger: 'blur'}

        //验证邮箱的规则
        var checkEmail = (rule, value, cb) => {
            const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
            if(regEmail.test(value)){
                return cb()
            }else{
                cb(new Error('请输入合法的邮箱'))
            }
        }

        //验证手机号的规则
        var checkMobile = (rule , value , cb) => {
            const regMobile = /^(0|86|17951)？(13[0-9)|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
            if(regMobile.test(value)){
                return cb()
            }else{
                cb(new Error('请输入合法的手机号码'))
            }
        }