elementUI-表单-校验

配置校验

1、在el-form 标签上配置

<el-form ref="form" :model="form" label-width="120px" :rules="rules">
    
el-form>

其中

:model=“form” 必须配置 表单数据对象 form 指的是该表单对应的data中的表单，而 el-form-item 绑定的数据大多都在这个form中

:rules=“rules” 必须配置 表单验证规则

ref=“form” 必须配置 后面 是 选中该表单进行全表单校验 或者 是单个数据的校验 会用到

:inline=“true” 非必须 行内表单模式 值为true则表单中元素排列在一行；不配置则默认值为false

disabled 禁用表单，禁止编辑

2、在 el-form-item 标签上配置

<el-form-item label="设备名称" prop="name">
    <el-input
        v-model="form.name"
        clearable
        placeholder="请输入设备名称"
    >el-input>
el-form-item>

其中

label=“设备名称” 是该输入框的名字

prop=“name” 必须配置 指定该项字段

:rules=“xxxx” 非必须 一般都在data中统一配置校验规则

3、在 data 中配置校验规则

data() {
  return {
    rules: {xxxx}
 }

4、在提交表单时进行校验

全表单校验-validate

    submitForm() {
      this.$refs["form"].validate((valid) => {  //   选中ref名为 form  的元素进行校验 
        if (valid) {                            //   如果校验通过才会对数据进行下一步处理，
          if (this.form.id !== undefined) {
            updateEquipment(this.form).then((response) => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {                             
            equipmentAdd(this.form).then((response) => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },

对单个表单数据进行校验-validateField

this.$refs.formRef.validateField('name',err  => {  // 选中ref值为 formRef 的元素进行校验
    if(!err){                                      // 通过，则...........
        alert('姓名校验通过啦！')
    }
})

清除表单校验-clearValidate

仅清除表单校验，一般用于表单的取消编辑和关闭表单时使用，避免下次打开表单时校验规则残留在表单上

this.$nextTick(() => {                       //  最好包裹在 $nextTick 函数里清除校验，将回调延迟到下次 DOM 更新循环之后执行
     this.$refs.formRef.clearValidate();
});

重置表单值-resetFields

对整个表单进行重置，将所有字段值重置为初始值 并 移除校验结果

所以，根据开发需要自行选择

注意：这里的重置为初始值。也就是在data中书写的初始值，当表单第一次在页面中渲染时所用的数据就是初始数据，而不是把值都变为空；注意概念

this.$refs[formName].resetFields();// 选中ref值为formName 的 表单 把表单数据重置为初始值并且清除其校验规则

案例-清除表单校验

需求：让表单弹窗在点击X号以及取消按钮时都清除本次的校验记录，且把表单数据重置为初始值

解决方案：让X号的回调以及取消按钮所触发的回调都触发同一个函数，在该函数里清空校验记录即可

1、弹窗配置：@close=“cancel”

<el-dialog
      :title="title"
      :visible.sync="open"
      :width="dialogWidth"
      @close="cancel"
>
    
el-dialog>

2、表单中的取消按钮

<el-button @click="cancel">取 消el-button>

3、cancel()

通常有时候还需要在该函数里做一些其他操作，因为resetFields有时候并不能保证可以清空form表单中的数据，那么就需要额外的对form表单数据进行清空

cancel() {
   this.open = false;                //  关闭弹窗
   this.$refs["form"].resetFields(); //  清空ref名为form的表单校验规则
},

当然，会存在不生效的问题

问题一：在还没有显示对话框之前就调用this.$refs[‘form’].resetFields()，会报错。

// 解决办法
this.$nextTick(() => {
    this.$refs['form'].resetFields();
});

问题二：如果添加和修改共用一个表单时就会出现重置无效的情况。

// 解决办法
this.$nextTick(() => {
    utils.copyFormObject(data, this.form);
});

校验规则-rules

其中

required 参数的值为true时，表单校验时 框框前面 才会出现 红点

message 就是 校验失败后 报错的 提示信息

trigger 校验触发时机 blur：表单元素失去焦点时触发； change：表单元素的值发生变化时触发；

type 值的类型 string: 字符串（默认值） number: 数字 boolean: 布尔值 method: 函数 regexp: 正则表达式 integer: 整数 float: 浮点数 array: 数组 object:对象 enum: 枚举类型，可以参考 百度资料-枚举类型 date: 日期类型 url: URL类型，如 https://www.baidu.com/ hex: 文件格式类型，如 :020000040000FA email: 邮箱类型，如 [email protected] any: 任意类型

pattern 正则校验规则写在这里嗷！！！

若只有一条校验规则，使用对象写法，直接就可以写在 el-form-item 头标签中；当然也可以统一在data中配置（建议）

:rules="{ required: true, message: '不能为空'}"    //  写在  el-form-item 头标签中的写法

rules:[company_no:{ required: true, message: "公司名称不能为空", trigger: "blur" }]       //  在data中配置的写法,需要在校验规则前指明是哪个字段，前面所指的就是 company_no 字段的校验规则

若有多条校验规则，则使用对象数组；在一个数组中书写多个校验规则；下面是一个字段对应一个数组对象的校验

rules: [
        company_no: { required: true, message: "公司名称不能为空", trigger: "blur" },
        status: { required: true, message: "状态不能为空", trigger: "blur" },
        type: { required: true, message: "设备类型不能为空", trigger: "blur" },
        model : { required: true, message: "设备型号不能为空", trigger: "blur" }，
        mach_code : { required: true, message: "机器码不能为空", trigger: "blur" }
      ],

若有多条校验规则且有的字段就不止一个校验规则，则使用对象数组；在一个数组中书写多个校验规则；下面是一个字段对应多个数组对象的校验

rules: {
    username: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
    ],
    status: { required: true, message: "状态不能为空", trigger: "blur" }
},

正则校验

nickname: [
   {
      message: "昵称不能为空",
      trigger: "blur",
      required: true,
   },
   {
      pattern: /^[\u4e00-\u9fa5]{2,5}$/g,
      message: "只能输入中文不要加其他字符且长度为2到5位",
      trigger: "blur",
   },
]

自定义校验规则

往往很多时候，常规的校验规则不能满足项目要求，那么此时就需要自定义校验规则加把劲

  data() {
    const validateUsername = (rule, value, callback) => {             //  自定义校验，自定义校验的话报错的提示信息就需要看返回的是什么了
      if (!validUsername(value)) {
        callback(new Error("请输入正确用户名"));
      } else {
        callback();
      }
    };
    const validatePassword = (rule, value, callback) => {             //  自定义校验
      if (value.length < 6) {
        callback(new Error("密码不能小于6位"));
      } else {
        callback();
      }
    };
    return {      //  data的返回值；在vue项目中，data必须是一个函数，是为了当组件每被复用一次时，都会返回一个新的一组data数据，各组件实例之间不影响，形成了良好的数据隔离，让各组件实例只维护自己的数据，自己变不影响其他
      loginRules: {
        	username: [
          		{ required: true, trigger: "blur", validator: validateUsername },    //  validateUsername  为自定义校验函数名，在自定义函数中书写自定义校验规则
        	],
        	password: [
          		{ required: true, trigger: "blur", validator: validatePassword },
        	],
      },
    };
  },