ElementUI表单校验解析

   今天在项目中遇到了一个需求，大致的内容为为表单添加信息校验。当然了，其实后端也可以实现，但出于用户体验考虑，前端也需要对其进行信息的校验并给予正确的提示。因为项目用到的UI框架为elementUi，所以首先想到的是用elementUi对表单进行校验。完成后的内容如下:

考虑到element有多种对表单的校验，由此整理了大致的三种表单校验：

在实现之前我们需要对表单进行一系列的前置操作

1. ref="editShop" 设置表单名称
2. :rules="editShopRules" 设置规则
3. :model="form" 绑定的data数据
4. prop="customShopName" 每个表单项对应的名称
5. 在data中建立相对应的rules 与之前的 :rules 名称相对应

• 原生表单校验

简述：这是最普通的表单校验

特点：简约简洁，但验证的范围比较小，只适合小范围校验（如字数必须性等）

• 正则单校验

简述：可以添加正则校验的形式校验表单

特点：需要了解正则原理，可以应付大多数校验，需要通过不停的测试和计算得到正确结果

• 自定义方法校验

简述：通过自定义方法的形式实现校验

特点：可以应对复杂的校验情况，可以自定义计算逻辑输出对应的内容。但是代码量大，建议将校验方法抽取出来

以下是完整代码：

/** 检查店铺名称 */
let checkShopName = (rule, value, callback) => {
      if (value === "默认店铺") {
        callback(new Error("不可输入'默认店铺'"));
      } else {
        callback();
      }
};

editShopRules: { // 表单规则
        // 检查店铺名称
          customShopName: [
            {required:true,message:'请输入账号',trigger:'blur'},
            {validator:checkShopName,trigger:'blur'}
          ],
          username: [
            { required: true, message: '请输入店长姓名', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          phone: [
            { required: true, message: '请输入联系方式', trigger: 'blur' },
            { pattern: /^1[34578]\d{9}$/, message: '目前只支持中国大陆的手机号码', trigger: 'blur' }
          ]
        } 

我们可以使用手动校验的形式对表单进行整体校验具体代码如下：

// 修改商店检查
    editShopCheck(){
      this.$refs['editShop'].validate((valid) => {
          if (valid) {
            // 执行表单提交
            this.editShop()
          } else {
            return false;
          }
      });
    },

其中'editShop'为ref="editShop"中设置的表单名称

同学们还有什么校验方法?留言评论吧