Vue based verification package regular expression

As more companies forms used in the project, consider vue + element used in the development, which fill out the registration form, and the form of CRUD use a more regular verification, element also required verification own package, and simple regular, but this does not meet our company's needs, it is hereby package their own plug-ins to call.

1. First, a package for js include regular.

formValidation.js

const formValidation = {
    mobile: (rule, value, callback) => {
        // const reg = /^0?(13[0-9]|15[012356789]|18[0236789]|14[57])[0-9]{8}$/
        const reg = /^1(3|4|5|7|8)\d{9}$/;
        if(!reg.test(value)) {
            callback('请输入正确的手机号')
        }else {
            callback()
        }
    },
    // 邮编验证
    postcode:(rule,value,callback)=>{
        const reg = /^[0-9]{6}$/;
        if(!reg.test(value)){
            callback("请输入正确的手机号")
        }else {
            callback();
        }
    },
    plateNum:(rule, value, callback) => {
        if(value==""||value==undefined){
            callback()
            return false
        }
        // const reg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/;
        // if(!reg.test(value)) {
        //     callback('请输入正确的车牌号码')
        // }else {
        //     callback()
        // }
        const xreg=/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}$/;

        const creg=
                   /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/;
                //    /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/;
        if(value.length == 7){
            if(!xreg.test(value.substr(0,2))) {
                callback('请输入正确的车牌号码')
            }else{
            	 callback()
            }
        } else if(value.length == 8){
            if(!xreg.test(value.substr(0,2))) {
                callback('请输入正确的车牌号码')
            }else{
            	 callback()
            }
        } else{
            callback('请输入正确的车牌号码')
        }
    },
    age: (rule, value, callback) => {
        const reg =/^[0-9]*[1-9][0-9]*$/
        if(!(reg.test(value) || (Number(value) === 0))) {
            callback('请输入大于等于0的整数')
        }else {
            callback()
        }
    },
    

}

export default formValidation

2. The package is now well, then mount main.js so easy to use.

main.js
import formValidation from "../src/config/formValidation"  //导入js所在文件夹
Vue.prototype.formValidation=formValidation; //挂载到原型上

3. Use the page, (as it is the element ui so only describes how to use this framework ui)

页面中绑定rules变量，通过prop建立关系
   <el-form
    :rules="rules"
      <el-form-item label="邮编" prop="yb">
        <el-input v-model="ruleForm.yb"></el-input>
      </el-form-item>
          </el-form>
  在data上通过rules变量进行校验，
  注:这里validator 是自定义校验方法，我们通过validator调用自定义的方法，
  在原型上调用自己想要的正则校验 .
       rules: {
          yb: [
            {
              required: true,
              validator: this.formValidation.postcode,
              message: "请输入正确的邮编",
              trigger: "blur"
            }
          ]
          }