分享一下vue3项目中表单校验时候遇到的一些坑

表单校验

本篇主要介绍el-form中的表单校验以及在校验中遇到的一些坑

表单校验是我们在项目中经常遇到的，表单校验非常重要，因为它可以在用户提交表单之前检查表单中的输入是否合法，从而避免了许多因为非法输入而造成的问题，比如数据库存储错误、应用程序异常等等。表单校验不仅可以提供更好的用户体验，还可以减轻后台程序的验证压力，提高应用程序的性能和稳定性。

el-form中的基础表单校验

el-form中需要绑定model属性(属性值为一个对象，el-form-item 中使用v-model需要绑定model绑定的对象属性才能起到作用)和rules规则
el-form-item需要绑定prop属性(值为rules规则里面的一条，这样绑定完以后就可以进行校验了)
el-from-item中就可以放置一些自己使用的表单元素了，需要使用v-model绑定el-from对象中的属性。

vue 复制代码

 <div class="input">
   <el-form :model="form" :rules="rules" ref="loginForm">
    <el-form-item prop="mobile">
      <el-input placeholder="请输入手机号码" v-model="form.mobile"></el-input>
      <div class="region"><span>+ 86</span></div>
    </el-form-item>
    <el-form-item prop="mobile">
      <el-input v-model="form.mobile" placeholder="请输入手机号码"></el-input>
    </el-form-item>
    <div class="login-method">
      <el-form-item prop="mobileCode">
        <el-input v-model="form.mobileCode" placeholder="请输入动态验证码"></el-input>
      </el-form-item>
      <el-button :disabled="issend" round text class="countdown">
        {{ code }}
      </el-button>
    </div>
    <div class="login-method">
      <el-form-item prop="password">
        <el-input v-model="form.password" type="password" placeholder="密码"></el-input>
      </el-form-item>
    </div>
    <div class="login-method">
      <el-form-item prop="verifyCode">
        <el-input v-model="form.verifyCode" placeholder="请输入动态码"></el-input>
      </el-form-item>
      <el-button round text class="countdown" :plain="true" @click="GetVerifyCode">
        <img :src="verifyCodeImg" alt="点击获取图形验证码" />
      </el-button>
    </div>
  </el-form>
  <el-button text class="login" round @click="submitForm">登录</el-button>
 </div>

css 复制代码

const loginForm = ref(null) // form表单信息

const form = ref({
  mobile: '', // 用户手机号
  password: '', // 用户密码
  mobileCode: '', // 手机验证码
  verifyCode: '', // 动态码
})

const rules = {
  mobile: [
    { required: true, message: '请输入手机号', trigger: ['blur', 'change'] },
    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: ['blur'] },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: ['blur', 'change'] },
    { pattern: /^[^\s\u4e00-\u9fa5]{8,}$/, message: '最短8位，不允许输入空格和中文', trigger: ['blur', 'change'] },
  ],
  verifyCode: [
    { required: true, message: '请输入图形验证码', trigger: ['blur'] },
    { max: 4, min: 4, message: '图形验证码应该是4位', trigger: ['blur'] },
  ],
  mobileCode: [
    { required: true, message: '请输入短信验证码', trigger: ['blur'] },
    { min: 6, max: 6, message: '请输入 5 到 10 位的密码', trigger: ['blur', 'change'] },
  ],
}

表单的二次校验

当我们在点击的时候需要进行二次校验，只有在校验通过的时候才可以提交数据,我们可以使用ref获取到要提交的表单，然后调用validate方法即可。

vue 复制代码

<el-form :model="form" :rules="rules" ref="refuseForm">
    //表单信息....
</el-form>

//获取表单
const refuseForm = ref(null) // form表单信息

// 在登录之前进行二次数据校验
const submitForm = () => {
  refuseForm.value.validate(async (valid) => {
    if (valid) {
      // 提交表单逻辑
    } else {
      ElMessage.error('数据格式错误！')
      return false
    }
  })
}

这里注意到一点，如果你是在遍历中进行的表单校验，就需要额外注意，否则就会出现这个错误:

我们把拿到的refuseForm对象打印出来，发现原来遍历后需要加上下标才能访问到validate函数：

所以在遍历中想要二次校验表单，我们就需要给函数传递一个下标这样就可以正确的找到form对象了

vue 复制代码

// 假设已经在v-for遍历的DOM中
<el-button @click="roomRefuse(index)" size="small">确定</el-button>

const roomRefuse = (item, index) => {
  refuseForm.value[index].validate((valid) => {
    if (valid) {
      // 二次校验成功执行对应逻辑代码
    }
  });
};

自定义校验

有些场景我们简单校验未必满足我们的要求，所以有时候我们需要进行自定义校验函数来辅助完成首先在rules中设置校验规则：

js 复制代码

const rules = {
    ConfirmPassword: [
    { required: true, message: '请输入密码', trigger: ['blur'] },
    { validator: validatePassword, trigger: 'blur' },
  ],
}

这个validatePassword就是我们需要进行自定义校验的函数了

其中自定义校验函数的三个参数分别是:

rule 参数：表示当前校验的规则对象，包含了当前字段相关的校验规则。
value 参数：表示当前字段的值。它是需要校验的字段的值。
callback 参数：表示校验的回调函数。在自定义校验函数中，需要调用 callback 函数来通知表单校验结果。

js 复制代码

// 自定义校验函数(确认密码)
const validatePassword = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入密码'));
  } else if (value !== form.value.password) {
    callback(new Error('两次输入密码不一致'));
  } else {
    callback();
  }
};