element-ui自定义表单验证

有些需要自定义的校验规则可以作为变量写在data中：

data() {
    let reg = /(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*?]+)$)^[\w~!@#$%^&*?]{6,12}$/
    var validateNewPwd = (rule, value, callback) => {
        if (!reg.test(value)) {
            callback(new Error('密码应是6-12位数字、字母或字符！'))
        } else if (this.form.oldPasswd === value) {
            callback(new Error('新密码与旧密码不可一致！'))
        } else {
            callback()
        }
    }
    var validateComfirmPwd = (rule, value, callback) => {
        if (!reg.test(value)) {
            callback(new Error('密码应是6-12位数字、字母或字符！'))
        } else if (this.form.newPasswd !== value) {
            callback(new Error('确认密码与新密码不一致！'))
        } else {
            callback()
        }
    }
    return {
        form: {
            newPasswd: '',
            comfirmPwd: ''
        },
        rules: {
            newPasswd: [
                { required: true, message: '请输入新密码', trigger: 'blur' },
                { validator: validateNewPwd, trigger: 'blur' }
            ],
            comfirmPwd: [
                { required: true, message: '请输入确认密码', trigger: 'blur' },
                { validator: validateComfirmPwd, trigger: 'blur' }
            ]
        }
    }
}

该方法转载于https://segmentfault.com/a/1190000020410128?utm_source=tag-newest，更多方法详见该网址

element-ui表单加判断条件显示必填或非必填 :required

一般情况我们是把required写在rules里，来说明表单内容是否是必填项，但是有些内容，不同情况，可能是必填，可能是非必填，因此需要加判断条件，此时，required 写在 el-form-item 中，data中的rule不用写 required

<el-form-item :label="省份" prop="provinces" :required="from.country === 'CHN'? true:false>
   <el-input v-model.trim="from.provinces" size="mini" :disabled="See">
</el-form-item>

Rules: {
       provinces: [{ validator: provinces, trigger: 'blur' }]
     }