Vue实现表单效验

  <el-form :model="addFroms" label-position="right" :rules="rules" ref="ruleFormRef" label-width="100px">
  </el-form>

const ruleFormRef = ref();

    <el-form-item label="账户名称" prop="account">
        <el-input v-model="addFroms.account" autocomplete="off" placeholder="请输入名称" />
    </el-form-item>

// 添加效验
const rules = reactive({
  account:[
    { required: true, message: '请输入名称', trigger: 'change' },
    { min: 2, max: 7, message: '长度在 2 到 7 个字符' },
  ],
  type:[
    {required: true, message: '请选择角色', trigger: 'change'}
  ],
  password:[
    {required: true, message: '请输入密码', trigger: 'change'},
    { min: 6, max: 10, message: '长度在 6 到 10 个字符' },
  ],
  passwords:[
    { validator: validatePass, trigger: 'change' },
  ],
  img:[
  {required: true, message: '请上传图片', trigger: 'change'},
  ]
})

// 二次效验密码
const validatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请二次输入密码'))
  } else if (value !== addFroms.password) {
    callback(new Error("两次密码不一样"))
  } else {
    callback()
  }
}