Element-UI表单校验

Element-UI表单校验的步骤及使用

步骤一

给表单el-form添加 :rules="infoRules" 以此用于规定表单验证的规则，prop表示 :rules="infoRules" 中的校验元素。

 
    
        
    
    
        
    
    
        
    
    
        提交
    

步骤二

编写自定义验证规则（请注意该数据不是写在return里的）

data() {
        //自定义验证规则
        //验证手机号的规则
        var checkTele = (rule, value, cb) => {
            const regTele = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
            if (regTele.test(value)) {
                //合法手机号
                return cb()
            }
            cb(new Error('请输入合法的手机号'))
        }
        //验证邮箱的规则
        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()
            }
            cb(new Error('请输入合法的邮箱'))
        }
        return {
            info: {
                nickname: '',
                email: '',
                phoneNumber: ''
            },
            infoRules: {
                //required表示是否必填，message表示错误格式的提示，trigger表示触发事件的条件
                nickname: [{ required: true, message: '请输入用户名', trigger: 'blur' },
                //min表示最短字符长度，max表示最长字符的长度
                { min: 1, max: 6, message: '用户名长度在1~6之间' }],
                email: [{ required: true, message: '请输入邮箱号', trigger: 'blur' },
                //validator用于自定义规则
                { validator: checkEmail, trigger: 'blur' }],
                phoneNumber: [{ required: true, message: '请输入用户名', trigger: 'blur' },
                { validator: checkTele, trigger: 'blur' }],
            },

        }
    },