vue表单校验详解——适用小白/后管项目

清欢不语
579 阅读4分钟

表单校验在前端开发中即为常见，虽然难度不是很大，但是其中细节却非常多，在这里整理了一下常用的一些校验规则，还有一些不常用的规则。

一，常用的校验规则

配合element-ui，做一些简单的校验是非常容易的，不过得弄清楚里面一些属性定义：

<el-form
:model="ruleForm"
:rules="rules" 
ref="ruleForm"
label-width="100px" 
class="demo-ruleForm">

1，理解el-form表单上的属性
rules用于制作校验规则
model用于接受表单数据
ref用于制作兜底校验
另外：给表单中的元素（Form-Item ）设置 prop 属性，其值为设置为需校验的字段名

<el-form-item label="活动性质" prop="type">

以上四点缺一不可

2，这些属性在script中的定义与使用
model属性值进行定义，用于收集表单数据

data() {
    return {
      employees: [],
      ruleForm: {
        name: "", // 部门名称
        code: "", // 部门编码
        manager: "", // 部门管理者
        introduce: "", // 部门介绍
      },

rules专门用来做正则校验，对于哪个输入框做什么样的校验，有prop定义的值具体定义

data() {
    return {
     rules: {
        manager: [
          { required: true, message: "部门负责人不能为空", trigger: "blur" },
        ],
        introduce: [
          { required: true, message: "部门介绍不能为空", trigger: "blur" },
          {
            min: 1,
            max: 300,
            message: "部门介绍要求1-300个字符",
            trigger: "blur",
          },
        ],
      },

注意：以上是最简单的校验规则，如果需要手机号，邮箱等较为复杂的校验，可以在element中查找具体使用方法
3，如果校验十分复杂，可以使用自定义校验规则，用函数封装，让代码更清晰、容易维护 在data里面，return外面定义函数

  const validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };

调用

 name: [
          { required: true, message: "部门名称不能为空", trigger: "blur" },
          {
            min: 1,
            max: 50,
            message: "部门名称要求1-50个字符",
            trigger: "blur",
          },
          { validator: validName, trigger: "blur" },
        ],

4，兜底校验 给点击按钮添加兜底校验，要用到ref

 methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },

总结：上面做完，基本上可以完成大部分的表单校验

一，较为复杂的表单校验

其实表单校验复杂的不是代码，二是逻辑思维，能够理解用户需求，做出用户想要的校验规则。 以下列举一些我遇到过的比较复杂的需求，然后说一下解决过程：
需求一：唯一性
在后管项目中，有时候有些部门有固定编码，并要求这些编码是唯一的，如果编码重复，不允许添加：
思考步骤：

  • 定义一个空的数组，用来接收已经有的编码
  • 获得自定义校验的value值
  • 检查value值是否存在在接受编码的数组中
  • 如果存在，就不允许添加，弹出小字提示
  • 如果不在，通过校验

做完这一步，如果你的编辑和添加是共用一套表单验证规则，你会遇到一个bug，就是当你想要重新编辑部门时，会发现部门原编码会提示重复，进入正则校验中：
解决bug：如果是编辑时，则必须要在不能使用的部门编号中排除当前正在编辑的部门编码

  • 在上面流程中，做一个判断
  • 如果是编辑状态
  • 那么将正在编辑的数据编码从编码数组中剔除出来
  • 在进行校验 需求一：同级不重复
    在后管项目中，经常会出现父子级这种树型结构，通常情况下，同级名称不能相同，如果相同，就不能通过校验：
    思考步骤： 添加时：
  • 在所有的部门中，找pid为当前父组件中点击添加时，拿到的部门的id
  • 将这些被选中的id放入一个新的数组中
  • 通过map得到一个全新数组，里面存放着所有存在的名字
  • 检查value是否存在在这个数组中
  • 如果存在，校验不通过，给提示
  • 如果不存在，校验通过 同样，如果你的编辑和添加是共用一套表单验证规则，你会遇到一个bug，就是当你想要重新编辑部门时，会发现部门原名字会进入正则校验中：
    解决bug：被占用的名字是这个部门的子部门
  • 如果是编辑，则被占用的名字 = 兄弟-自己
  • 找到当前被编辑的元素
  • 取出pid(判断它的父级是谁)
  • 过滤： 同一个父级，代表是兄弟，排除自己；
  • 通过map获取只有名字的新数组
  • 在进行校验
avatar
文章
阅读
粉丝