el-form表单添加自定义校验(非必选情况)

1. 最近遇到一些校验，显然el-form官方的rules校验满足不了我的需求，仅以此篇来帮助和我一样遇到这样需求的同学。
2. 话不多说直接看代码
3. 

   validate是对整个表单进行校验的方法

   validateField第一个参数是数组或字符串，第二个参数是回调函数，回调函数有值则表示错误

4. 使用示例（Example）

   1. 在template中使用  

      <el-form
                  :model="numberValidateForm"
                  ref="numberValidateForm"
                  label-width="100px"
                  class="demo-ruleForm"
                  :rules="rules"
              >
                  <el-form-item label="年龄(自定义)" prop="age">
                      <el-input type="age" v-model="numberValidateForm.age" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="文件(自定义)" prop="path">
                      <el-input v-model="numberValidateForm.path" maxlength="10" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item>
                      <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
                      <el-button @click="resetForm('numberValidateForm')">重置</el-button>
                  </el-form-item>
              </el-form>

   2.  validator必须定义在data和return之间

      data() {
              var customize = (rule, value, callback) => {
                  var result = /^[a-zA-Z0-9\u4e00-\u9fa5\,，。@#&*]+$/;//字母数字和汉字和特殊符号
                  if (!value) {
                      // return callback(new Error('值不能为空')) // 可以判断为空提示
                      callback()    // 如果为空直接跳过
                  } else {
                      if (value.length >= 6 && value.length <= 10) {
                          setTimeout(() => {
                              if (result.test(value)) {
                                  callback()
                              } else {
                                  return callback(new Error('输入正确的值'))
                              }
                          }, 100);
                      } else {
                          return callback(new Error('输入的值必须在6~10位'))
                      }
      
                  }
      
              };
              var customizeFile = (rule, value, callback) => {
                  const result = /^[A-Za-z0-9\.,。@#~%&*"":;]/ // 字母、数字、特殊符号  
                  if (!value) {
                      // return callback(new Error('值不能为空')) // 可以判断为空提示
                      callback()  // 如果为空直接跳过
                  }
                  setTimeout(() => {
                      if (result.test(value)) {
                          callback()
                      } else {
                          return callback(new Error('输入正确的值'))
                      }
                  }, 100);
              };
              return {
                  numberValidateForm: {
                      age: '',
                      path: ''
                  },
                  rules: {
                      age: [{ validator: customize, trigger: 'blur' }],
                      path: [{ validator: customizeFile, trigger: 'blur' }]
                  },
                  value: []
              }
          },

   3.  methods中定义提交和重置方法

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

5. 其他的几种校验格式

   const result = /^1(3|4|5|6|7|8|9)\d{9}$/;    // 手机号
   const result = /^[A-Za-z0-9\u4e00-\u9fa5]+$/ // 字母数字和汉字 
   const result =/^[a-zA-Z0-9\u4e00-\u9fa5\,，。@#&*]+$/;//字母数字和汉字和特殊符号
   const result = /^[A-Za-z0-9\.,。@#~%&*"":;]/ // 字母、数字、特殊符号 
   const result = /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[@#~%&*"":;])[\da-zA-Z@#~%&*"":;]{0,5}$/ //输入数字字母特殊符号 {0,5}是最小限制和最大限制 
   const result = /^(?=.*[0-9])+|((?=.*[a-z])[0-9a-z]+|(?=.*[!@#$%^&*])(?=.*[a-z])+|(?=.*[a-z])+|(?=.*[!@#$%^&*])+|(?=.*[!@#$%^&*])(?=.*[a-z])(?=.*[0-9])+|(?=.*[!@#$%^&*])[0-9!@#$%^&*]+)$/ig;  //数字 字母+数字 特殊符号+字母 字母 特殊符号 特殊符号+数字 特殊符号+字母+数字
   
   //ipv4和ipv6的正则校验
   
   
   //ipv4校验
   function isIPV4ValidIP(ip) {
       var v4reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
       return v4reg.test(ip);
   } 
   
   //ipv6校验
   function isIPV6ValidIP(ip) {
       var v6reg = /^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$/gm;       
       return v6reg.test(ip);
   } 
   
   //ip校验
   function isIPValid(ip) {
      return isIPV6ValidIP(ip)&&isIPV4ValidIP(ip)
   }
   
   const result = /^(?=.*[0-9])+|((?=.*[a-z])[0-9a-z]+|(?=.*[!@#$%^&*])(?=.*[a-z])+|(?=.*[a-z])+|(?=.*[!@#$%^&*])+|(?=.*[!@#$%^&*])(?=.*[a-z])(?=.*[0-9])+|(?=.*[!@#$%^&*])[0-9!@#$%^&*]+)$/ig  //数字 字母+数字 特殊符号+字母 字母 特殊符号 特殊符号+数字 特殊符号+字母+数字
   

6. 今天的自定义校验就到这里，欢迎评论加留言