ElementUI 表单验证

1、示例

<el-form :model="updatePasswordForm" :rules="updatePasswordRules" ref="updatePasswordForm">
    <el-form-item label="原密码" prop="old_password">
        <el-input show-password type="password" v-model="updatePasswordForm.old_password" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="新密码" prop="new_password">
        <el-input show-password type="password" v-model="updatePasswordForm.new_password" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="确认新密码" prop="new_password_re">
        <el-input show-password type="password" v-model="updatePasswordForm.new_password_re" autocomplete="off"></el-input>
    </el-form-item>
</el-form>

<script>
    export default{
        data(){
            // 校验两次密码是否一致，在rules里调用
            var validatePassword = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请确认新密码'))
                } else if (value !== this.updatePasswordForm.new_password) {
                    callback(new Error('两次输入密码不一致'))
                } else {
                    callback()
                }
            }
            return {
                updatePasswordForm: {
                    old_password: "",
                    new_password: "",
                    new_password_re: ""
                },
                updatePasswordRules: {
                    old_password: [
                        { required: true, message: '请输入原密码', trigger: 'blur' }
                    ],
                    new_password: [
                        { required: true, message: '请输入新密码', trigger: 'blur' }
                    ],
                    new_password_re: [
                         { required: true, validator: validatePassword, trigger: 'blur' }
                    ]
                }
            }
        }
    }
</script>

2、清除验证信息

this.$refs["updatePasswordForm"].clearValidate();