vue3+element-plus表单验证以及提交

1.定义验证规则包括用户名、密码以及确认密码

const validatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('确认密码不能为空！'));
  } else if (value !== userForm.password) {
    callback(new Error('两次密码输入不一致!'));
  } else {
    callback();
  }
};

这个验证函数接收三个参数：

• rule：当前验证规则的配置对象。
• value：输入框的值。
• callback：一个回调函数，用于通知验证结果。

验证函数的逻辑如下：

1. 如果确认密码为空，则调用 callback 并传递一个包含错误信息的 Error 对象，表示确认密码不能为空。
2. 如果确认密码不等于原始密码 (userForm.password)，则调用 callback 并传递一个包含错误信息的 Error 对象，表示两次密码输入不一致。
3. 如果确认密码与原始密码相匹配，调用 callback 表示验证通过。

这个验证函数与 Vue 3 中 Element Plus 的验证规则配合使用，通过 rules 对象的 checkPass 规则项引入，可以在确认密码输入框失去焦点时触发（trigger: 'blur'）。

const rules = reactive({
  userName: [
    {required: true, message: '用户名不能为空！', trigger: 'blur'},
    {pattern: /^\w{5,10}$/, message: '格式不正确！', trigger: 'blur'},
  ],
  password: [
    {required: true, message: '密码不能为空！', trigger: 'blur'}
  ],
  checkPass: [{ validator: validatePass, trigger: 'blur' }],
})

• userName规则数组包含两个验证规则：

• required: true：用户名是必填项。
• pattern: /^\w{5,10}$/：用户名必须包含5到10个字母、数字或下划线，并且不包含其他字符。

• password规则数组包含一个验证规则：

• required: true：密码是必填项。

• checkPass规则数组包含一个自定义验证规则：

• { validator: validatePass, trigger: 'blur' }：使用名为validatePass的自定义验证函数，触发条件是在输入框失去焦点时触发（blur）。

2.在form组件中绑定rules表单验证规则，并在el-form-item表单中的一个表单项中绑定prop：将表单项与表单数据模型中的属性关联起来进行验证

<el-form :model="userForm" :rules="rules">
      <el-form-item label="用户名: " :label-width="formLabelWidth" prop="userName">
        <el-input v-model="userForm.userName" placeholder="请输入用户名" clearable></el-input>
      </el-form-item>
      <el-form-item label="密码: " :label-width="formLabelWidth" prop="password">
        <el-input v-model="userForm.password"
                  type="password"
                  autocomplete="off"
                  placeholder="请输入密码" clearable></el-input>
      </el-form-item>
      <el-form-item label="确认密码" :label-width="formLabelWidth" prop="checkPass">
        <el-input v-model="userForm.checkPass"
                  autocomplete="off"
                  type="password"
                  placeholder="请确认密码"></el-input>
      </el-form-item>

3.最后在表单提交的时候也需要验证

首先定义const userFormBean = ref(); 也就是传入提交函数传入的参数(注意必须改名字，因为userFormBean是全局变量并且只有form组件绑定的ref有validate 方法)该方法用于触发表单验证。传入的回调函数接收两个参数：valid 表示验证是否通过，fields 表示未通过验证的字段信息。

const userFormBean = ref();
const handleSubmit = (formName) => {
  formName.validate((valid, fields) => {
    if (valid) {
      const apiUrl = title.value === "新增用户"
          ? "http://localhost:3000/sys_user"
          : `http://localhost:3000/sys_user/${userForm.id}`;
      axios({
        method: title.value === "新增用户" ? "post" : "put",
        url: apiUrl,
        data: formName    //userForm是响应式数据所以表单输入的数据和userForm数据(数据库数据)相同，
                          // 但是formName也就是 userFormBean是表单验证的数据
      })
          .then(response => {
            dialogFormVisible.value = false;
            queryUser();
            getTotal();
          })
          .catch(error => {
            ElMessage.warning(error);
          });
    }else {
      console.log('error submit!', fields)
    }
  })
};

在表单组件中绑定ref对象，并将其作为参数传入提交函数中

<!--弹框-->
  <el-dialog :title=title
             draggable=true
             v-model="dialogFormVisible">
    <el-form :model="userForm" :rules="rules" ref="userFormBean">
      <el-form-item label="用户名: " :label-width="formLabelWidth" prop="userName">
        <el-input v-model="userForm.userName" placeholder="请输入用户名" clearable></el-input>
      </el-form-item>
      <el-form-item label="密码: " :label-width="formLabelWidth" prop="password">
        <el-input v-model="userForm.password"
                  type="password"
                  autocomplete="off"
                  placeholder="请输入密码"
                  show-password></el-input>
      </el-form-item>
      <el-form-item label="确认密码" :label-width="formLabelWidth" prop="checkPass">
        <el-input v-model="userForm.checkPass"
                  autocomplete="off"
                  type="password"
                  placeholder="请确认密码"
                  show-password></el-input>
      </el-form-item>
      <el-form-item label="邮箱: " :label-width="formLabelWidth">
        <el-input v-model="userForm.email" placeholder="请输入邮箱" clearable></el-input>
      </el-form-item>
      <el-form-item label="角色: " :label-width="formLabelWidth">
        <el-select v-model="userForm.role" placeholder="请选择角色">
          <el-option label="超级管理员" value="1"></el-option>
          <el-option label="管理员" value="2"></el-option>
          <el-option label="用户" value="0"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleSubmit(userFormBean)">确 定</el-button>
    </div>
  </el-dialog>

实例