Vue paquete de verificación basada expresión regular

A medida que más empresas formularios utilizados en el proyecto, considere vue elemento + utilizado en el desarrollo, que llene el formulario de registro, y la forma de CRUD utilizar una verificación, el elemento más regular también requiere la verificación propio paquete, y sencillo regular, pero esto no satisface las necesidades de nuestra empresa, por la presente se empaquetar sus propios plug-ins para llamar.

1. En primer lugar, un paquete de JS incluye 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. El paquete está ahora bien, a continuación, montaje main.js tan fácil de usar.

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

3. Utilice la página, (ya que es el elemento de la interfaz de usuario de modo que sólo se describe cómo utilizar esta interfaz de usuario marco)

页面中绑定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"
            }
          ]
          }