el-form前端表单校验步骤详细

需求： 

给input框加校验，1.不能为空；2.不能输入标点符号；3.字数20以内

思路：

校验的需要做的有三个部分：1.红色小* 以及提示语，2.字数限制，3.提交的时候校验不通过的不能提交

How to achieve：

1.红色小* 以及提示语

1. 在饿了么组件里面加上一句 :rules="formRules"

<el-form ref="form" :model="form" :rules="formRules" label-width="80px">
  <el-form-item label="用户组名" prop="groupName">
    <el-input v-model="form.groupName" type="text" maxlength="20" show-word-limit></el-input>
  </el-form-item>
  <el-form-item label="备注">
    <el-input v-model="form.note"></el-input>
  </el-form-item>
</el-form>

需要注意的点：需要被校验的参数一定要在el-form-item中写上prop="groupName" 不然不生效，因为formRules是靠groupName找的 

2.data-->return里面加上formRules，在这里面写限定条件，

第一行required是不填的时候提示不能为空，

第二行validator是限定条件（比如我这里不能有标点符号之类的） ，validator里面有个validateInput写在data里面return上面，其中包含校验方法checkSpecialKey

data () {
    let validateInput = (rule, value, callback) => {
      if (!this.checkSpecialKey(value)) {
        callback(new Error("不能含有特殊字符！！"));
      } else {
        callback();
      }
    };
    return {
      visible: false,
      formRules: {
        groupName: [
          { required: true, message: '请输入合法的用户组名', trigger: 'blur' },
          { validator: validateInput, message: '请输入合法的用户组名', trigger: 'blur' }
        ]
      }
    }
 },

3.校验方法 checkSpecialKey写在methods里

checkSpecialKey(str) {
  let specialKey = "[`~!#$^&*()=|{}':;'\\[\\].<>/?~！#￥……&*（）——|{}【】‘；：”“'。，、？]‘'";
  for (let i = 0; i < str.length; i++) {
    if (specialKey.indexOf(str.substr(i, 1)) != -1) {
      return false;
    }
  }
  return true;
},

2.字数限制

在input框里面加上type="text" maxlength="20" show-word-limit

3.提交的时候校验不通过的不能提交

this.$refs['form'].validate((valid) => {
    if (valid) {
      this.addSubmit()
    } else {
      return;
    }
  })

valid打印出来是true或者false，也就是说，校验通过的时候才可以调用原本的提交函数，没通过直接return出去了。