深入剖析：el-plus、uni-ui与uView-plus框架下表单验证的实战陷阱与优化策略

小鹿小陆
2,632 阅读7分钟

表单校验

image.png

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

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

image.png

el-form中的基础表单校验

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

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'] },
  ],
}

表单的二次校验

3 -original-original.gif

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

<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
    }
  })
}

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

image.png

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

image.png

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

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

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

自定义校验

4 -original-original.gif

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

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

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

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

  1. rule 参数：表示当前校验的规则对象，包含了当前字段相关的校验规则。
  2. value 参数：表示当前字段的值。它是需要校验的字段的值。
  3. callback 参数：表示校验的回调函数。在自定义校验函数中，需要调用 callback 函数来通知表单校验结果。
// 自定义校验函数(确认密码)
const validatePassword = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入密码'));
  } else if (value !== form.value.password) {
    callback(new Error('两次输入密码不一致'));
  } else {
    callback();
  }
};

移动端的表单校验

使用uni-ui

image.png 上面图片红色的*是自己打上去的

  1. uni-forms中需要绑定modelValue属性(属性值为一个对象，uni-forms-item 中使用v-model需要绑定model绑定的对象属性才能起到作用)和rules规则(可绑可不绑)
  2. uni-forms-item需要绑定name属性(值为rules规则里面的一条)
  3. uni-forms-item需要校验的位置需要将规则绑定在item上，例如：:rules="[{ required: true, errorMessage: 请输入姓名 }]"
  4. el-from-item中就可以放置一些自己使用的表单元素了，需要使用v-model绑定el-from对象中的属性。
<template>
  <view class="contentContainer" v-if="isShowBody">
    <uni-forms ref="formVal" :rules="rule" :modelValue="formData">
      <uni-forms-item required label="姓名" name="realName":rules="[{ required: true, errorMessage: `请输入姓名` }]">
        <input type="text" focus name="realName" placeholder="请输入姓名" maxlength="10" v-model="formData.realName"/>
      </uni-forms-item>
      <uni-forms-item required label="职位" name="position" :rules="[{ required: true, errorMessage: '请输入职位' }]">
        <input type="text" focus name="position" placeholder="请输该员工的职位" maxlength="10" v-model="formData.position"/>
      </uni-forms-item>
      <uni-forms-item required label="手机号" name="mobile" :rules="[ { required: true, errorMessage: '请输入手机号' }, { pattern: /^1[3-9]\d{9}$/, errorMessage: '手机号格式不正确' }]">
        <input type="text" focus name="mobile" placeholder="请输入手机号" maxlength="11" v-model="formData.mobile"/>
      </uni-forms-item>
      <uni-forms-item required label="身份证号" name="idNumber" :rules="[{ required: true, errorMessage: '请输入身份证号' },{ pattern: /^(\d{17}(\d|X))$/, errorMessage: '身份证号码格式不正确' }]">
        <input type="text" focus name="idNumber" placeholder="请输入身份证号" maxlength="18" v-model="formData.idNumber"/>
      </uni-forms-item>
      <uni-forms-item required label="是否去派出所备案" name="isFilings" :rules="[{ required: true, errorMessage: '请选择是否去派出所备案' }]">
        <up-radio-group v-model="formData.isFilings">
          <up-radio :name="1" label="是"></up-radio>
          　
          <up-radio :name="0" label="否"></up-radio>
        </up-radio-group>
      </uni-forms-item>
      <view class="uni-btn-v my-form-item">
        <button form-type="submit" type="primary" @click="handelClick()">
          注册从业人员
        </button>
      </view>
    </uni-forms>
  </view>
</template>



<script setup>
const formData = ref({
  realName: "", // 姓名
  position: "", // 职位
  mobile: "", // 手机号
  idNumber: "", // 身份证号
  isFilings: 0, // 是否去派出所备案
  idCard1: "", // 身份证正面
  idCard2: "", // 身份证反面
  facePic: "", // 人脸照片
});

// 规则
const rule = {
  realName: [{ required: true, errorMessage: "请输入姓名" }],
  position: [{ required: true, errorMessage: "请输入职位" }],
  mobile: [
    { required: true, errorMessage: "请输入手机号" },
    { pattern: /^1[3-9]\d{9}$/, errorMessage: "手机号格式不正确" },
  ],
  idNumber: [
    { required: true, errorMessage: "请输入身份证号" },
    { pattern: /^(\d{17}(\d|X))$/, errorMessage: "身份证号码格式不正确" },
  ],
  isFilings: [{ required: true, errorMessage: "请选择是否去派出所备案" }],
};

const formVal = ref(null);

// 点击注册企业员工
const handelClick = async () => {
  formVal.value.validate().then((valid, errors) => {
    if (valid) {
      console.log("表单校验成功", valid);
    } else {
      console.log("表单校验失败", errors);
    }
  });
  // formVal.value
  //     .validate()
  //     .then((res) => {
  //         console.log(res);
  //         submit();
  //     })
  //     .catch((err) => {
  //         uni.showToast({
  //             title: '校验失败',
  //         });
  //     });
};
</script>

使用uView-plus

image.png

  1. u--form中需要绑定model属性(属性值为一个对象，el-form-item 中使用v-model需要绑定model绑定的对象属性才能起到作用)和rules规则
  2. u-form-item需要绑定prop属性(值为rules规则里面的一条，这样绑定完以后就可以进行校验了)
  3. u-form-item中就可以放置一些自己使用的表单元素了，需要使用u--form绑定el-from对象中的属性。
<template>
  <view class="login-body">
    <u--form :model="form" :rules="rules" labelPosition="top" ref="formVal">
      <view v-if="loginType === 0">
        <u-form-item prop="mobile">
          <up-input border="surround" v-model="form.mobile"></up-input>
        </u-form-item>
        <u-form-item prop="password">
          <up-input border="surround" v-model="form.password" type="password"></up-input>
        </u-form-item>
        <u-form-item prop="verifyCode">
          <up-input placeholder="请输入动态验证码" v-model="form.verifyCode"></up-input>
          <text class="getCode" style="background-color: #ffc4c5">
            <img @click="GetVerifyCode" :src="verifyCodeImg" alt="点击重新获取" />
          </text>
        </u-form-item>
      </view>
      <u-form-item prop="mobileCode">
        <up-input placeholder="请输入手机验证码" v-model="form.mobileCode"></up-input>
        <up-code :seconds="seconds" ref="uCodeRef" @start="start" @change="codeChange"></up-code>
        <text class="getCode" @click="getCode">{{ CodeMsg }}</text>
      </u-form-item>
      <u-form-item prop="verifyCode1">
        <up-input placeholder="请输入动态验证码" v-model="form.verifyCode1" ></up-input>
        <text class="getCode" style="background-color: #ffc4c5">
          <img @click="GetVerifyCode" :src="verifyCodeImg" alt="点击重新获取" />
        </text>
      </u-form-item>
    </u--form>
    <button class="btn-submit" @click="submitForm">登录</button>
  </view>
</template>



<script setup>
const formVal = ref(null); // 表单实例

const form = ref({
  mobile: "",
  mobile1: "",
  password: "",
  mobileCode: "",
  verifyCode: "",
  verifyCode1: "",
});
const rules = {
  mobile: [
    { required: true, message: "请填写手机号", trigger: "blur" },
    { pattern: /^1[3-9]\d{9}$/,message: "手机号格式不正确",trigger: ["blur", "change"]},
  ],
  mobile1: [
    { required: true, message: "请填写手机号", trigger: "blur" },
    { pattern: /^1[3-9]\d{9}$/,message: "手机号格式不正确",trigger: ["blur", "change"]},
  ],
  password: [
    { required: true, message: "请填写密码", trigger: "blur" },
    { pattern: /^[^\s\u4e00-\u9fa5]{8,}$/,message: "最短8位，不允许输入空格和中文"},
  ],
  mobileCode: [
    { required: true, message: "请填写短信验证码", trigger: "blur" },
    { min: 6,max: 6,message: "请输入6位的验证码",trigger: ["blur", "change"]},
  ],
  verifyCode: [
    { required: true, message: "请填写图形验证码", trigger: "blur" },
    { max: 4, min: 4, message: "图形验证码应该是4位", trigger: ["blur"] },
  ],
  verifyCode1: [
    { required: true, message: "请填写图形验证码", trigger: "blur" },
    { max: 4, min: 4, message: "图形验证码应该是4位", trigger: ["blur"] },
  ],
};
// 点击登录按钮
const submitForm = () => {
  if (aloneChecked.value.includes("agree")) {
    formVal.value
      .validate()
      .then((res) => {
        uni.showToast({
          title: "校验通过",
        });
        getLogin();
      })
      .catch((err) => {
        uni.showToast({
          title: "校验失败",
          icon: "error",
        });
      });
  } else {
    uni.showToast({
      title: "请您阅读并同意《服务协议》和《隐私政策》",
      icon: "error",
    });
  }
};
</script>
avatar
文章
阅读
粉丝