vue 表单验证使用要点

1.准备表单

 <el-form ref="passwordForm" :model="form" :rules="loginRules" label-width="120px" label-position="left">
        <el-form-item label="新密码" prop="password">
          <el-input v-model="form.password" placeholder="请输入新密码" />
        </el-form-item>
        <el-form-item label="确认新密码" prop="password2">
          <el-input v-model="form.password2" placeholder="请再次输入新密码" />
        </el-form-item>
      </el-form>

ref:表单名称
prop:要验证的内容
rules:验证的逻辑

2.js逻辑

<script>

export default {
  data() {
    const validatePassword = (rule, value, callback) => {
      if (value.length < 5) {
        callback(new Error('密码不能小于5位'))
      } else {
        callback()
      }
    }
    const validatePassword2 = (rule, value, callback) => {
      if (value !== this.form.password) {
        callback(new Error('新密码与旧密码不相同'))
      } else {
        callback()
      }
    }
    return {
      passwordRules: {
        password: [{ required: true, trigger: 'blur', validator: validatePassword }],
        password2: [{ required: true, trigger: 'blur', validator: validatePassword2 }]
      },
      form: {
        password2: '',
        password: ''
      },
    }
  },
}
</script>

trigger: 'blur' 或者 'change'
validator:自定义验证逻辑,参考async-validator