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

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

使用示例（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();
           }
       }

其他的几种校验格式

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  //数字 字母+数字 特殊符号+字母 字母 特殊符号 特殊符号+数字 特殊符号+字母+数字

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