vue表单校验之常用的正则表达校验

今天在使用vue时，需要对身份证号，手机号做正则校验，所以，汇总了一下。

来，上干货。。

  rules: {
        name: [
          { required: true, message: "名称不能为空", trigger: "blur" }
        ],
        phone: [
          { required: true, message: "手机号码不能为空", trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        cardnumber: [
          {required: true, trigger: "blur", validator:validId}
        ],
      }

var validId=(rule, value,callback)=>{
  if (!value){
    callback(new Error('请输入身份证号'))
  }else  if (!isvalidId(value)){
    callback(new Error('请输入正确的身份证号'))
  }else {
    callback()
  }
};

var validId=(rule, value,callback)=>{
  if (!value){
    callback(new Error('请输入身份证号'))
  }else  if (!isvalidId(value)){
    callback(new Error('请输入正确的身份证号'))
  }else {
    callback()
  }
};

下边是身份证号的校验

//身份证号验证
export function isvalidId(str) {    
    const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; 
    return reg.test(str)
};

所以，总结一下，相关的校验，分享给大家

import Vue from 'vue';
import VeeValidate,{ Validator } from 'vee-validate';
import message from './message';

Vue.use(VeeValidate)
Validator.localize('ch', message);

//验证规则
Validator.extend('mobile',{ //手机号码验证
    getMessage: '请输入正确的手机号码！',
    validate: value => {
        return  /^(\+86)?1[3456789]\d{9}$/.test(value);
    }
})

Validator.extend('custName',{ // 客户名称
    getMessage: '请输入正确的客户名称！',
    validate: value => {
        return /^[\u4E00-\u9FA5A-Za-z()（）]+$/.test(value);
    }
})



Validator.extend('cardId',{ //身份证号码验证
    getMessage: '请输入正确的身份证号码！',
    validate: value => {
        return /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(value);
    }
})

Validator.extend('isQQ',{ //QQ号码验证
    getMessage: '请输入正确的QQ号码！',
    validate: value => {
        return /^[1-9][0-9]{4,}$/.test(value);
    }
})


Validator.extend('isPhone',{ //电话号码验证
    getMessage: '请输入正确的电话号码！',
    validate: value => {
        return /^(\+86)?1[3456789]\d{9}$/.test(value);
    }
})

Validator.extend('isfax',{ //传真号码验证
    getMessage: '请输入正确的传真号码！',
    validate: value => {
        return /^(\d{3,4}-)?\d{7,8}$/.test(value);
    }
})


Validator.extend('isTax',{ //传真号码验证
    getMessage: '请输入正确的税务号！',
    validate: value => {
        let reg = /^[A-Z0-9]{15}$/;
        let reg1 = /^[A-Z0-9]{18}$/;
        return reg.test(value) || reg1.test(value)
    }
})

Validator.extend('isCard',{ //通用证件号码验证
    getMessage: '请输入正确的号码！',
    validate: value => {
        let reg = /^[\u4e00-\u9fa5]+$/;
        return !reg.test(value);
    }
})

邮箱的

Validator.extend('email',{ //邮箱地址验证
    getMessage: '请输入正确的邮箱地址！',
    validate: value => {
        return /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/.test(value);
    }
})

微信号码的

Validator.extend('isWX',{ //微信号码验证
    getMessage: '请输入正确的微信号码！',
    validate: value => {
        return /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/.test(value);
    }
})

家庭号码的

Validator.extend('isHomeNum',{ //家庭电话号码
    getMessage: '请输入正确的家庭电话号码！',
    validate: value => {
        let reg = /^(\d{3,4}-)\d{7,8}$/;
        let reg1 = /^(1[3456789]\d{9})$/;
        let reg2 = /^(\+86)?[0-9]{1,11}$/;
        return reg.test(value) || reg1.test(value) || reg2.test(value);
    }
})

有需要的，尽管来拿了。。