自定义表单验证

参考文章：blog.csdn.net/wwyxjjz/art…

需要注意的是： prop="phone"与v-model="logoform.phone"的phone要一样！

第一种方法：

// 不要忘记写 :rules="rules"
<el-form  label-position="left"  :model="formInfo"  label-width="140px"  :rules="rules">
    <el-form-item label="手机号：" style="width:40%" prop="phone">
        <el-input v-model="formInfo.phone"></el-input>
    </el-form-item>
</el-form>

data() {
    //这个方法要写在用到这个方法的地方的前面
    var checkPhone = (rule, value, callback) => {
        if (!value) {
                return callback(new Error("手机号不能为空"));
        } else {
            const reg = /^1[3-9][0-9]\d{8}$/;
            // 这里定义的reg变量没有加引号，所以是一种特殊的数据类型，即正则，可以直接用test()方法
            if (reg.test(value)) {
                    callback();
            } else {
                    // 具体错误信息没有提示
                    return callback(new Error("请输入正确的手机号"));
            }
        }
    };
    return {           
        formInfo: {             
            phone: "15246789516",
        },
        rules: {   
            // 从上向下进行验证，如果把min:11写在下面，就不会用到这个判断条件了，因为checkPhone包含了不满11位的验证
            phone: [
               { min: 11, message: "手机号不足11位", trigger: "blur" },
               { validator: checkPhone, trigger: "blur" }],
        },       
    };
},

第二种方法：

// 不要忘记写 :rules="rules"
<el-form ref="form" :model="loginform" label-width="20px" :rules="rules">
    <el-form-item prop="phone">
        <span slot="label">
            <img src="https://cos.luxinnet.com/image/340308bd852e5b6busername.png" alt="" />
        </span>
        <!--正则表达式：纯数字 且 数字大于11位就舍去-->
        <el-input v-model="logoform.phone" placeholder="请输入手机号" class="pass_input" oninput="value=value.replace(/[^\d]/g,'');if(value.length > 11)value = value.slice(0, 11)"></el-input>
    </el-form-item>
</el-form>

data() {
        // 我记得要把这个方法写在上面
        const validatePhone = (rule, value, callback) => {
                if (!value) {
                        callback(new Error("手机号不能为空"));
                        this.$message.error("手机号不为空");
                } else if (value.length < 11) {
                        callback(new Error("手机号格式不正确"));
                        this.$message.error("手机号格式不正确");
                } else {
                        callback();
                }
        };
        return {
                loginform: {
                        phone: "",
                },
                rules: {
                    phone: [
               		{ validator: validatePhone, trigger: "blur" },
               		{ min: 11, message: "手机号不足11位", trigger: "blur" },
                    ],
                },
        };      
},

提示信息如图所示(演示两种信息提示)：