常用正则表达式及案例

常用正则表达式及使用案例
1.创建共用方法放在一个ruleUtil.js

export default class RuleUtil {

  /**
   * 统一社会信用代码验证
   * @param {*} rule
   * @param {*} value
   * @param {*} callback
   */
  checkUnifiedSocialCreditCode(rule, value, callback) { /**统一社会信用代码 */
      const reg = /^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/;
      if (!value) {
        return callback();
      } else {
        if (!reg.test(value)) {
          return callback(new Error('请输入正确的统一社会信用代码'));
        } else {
          return callback();
        }
      }
    }

  /**
   * 手机和电话验证
   * @param {*} rule
   * @param {*} value
   * @param {*} callback
   */
  checkTel (rule, value, callback) {
    let regPone = null;
    const mobile = /^1(3|4|5|6|7|8|9)\d{9}$/; //最新11位手机正则
    const tel = /^(0[0-9]{2,3}\-)([2-9][0-9]{4,7})+(\-[0-9]{1,4})?$/; //座机

    if (!value) {
      return callback();
    } else {
      if (value.charAt(0) == 0) {
        regPone=tel;
      }else{
        regPone=mobile
      }
      if (!regPone.test(value)) {
        return callback(new Error('请输入正确格式的电话或手机号'));
      } else {
        return callback();
      }
    }

  }

  checkFax (rule, value, callback) { /**传真验证 */
      const reg = /^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/;
      if (!value) {
        return callback();
      } else {
        if (!reg.test(value)) {
          return callback(new Error('请输入正确的传真号,如:010-88888888'));
        } else {
          return callback();
        }
      }
    }


 /**
   * 电子邮箱校验
   * @param {*} rule
   * @param {*} value
   * @param {*} callback
   */
  checkEmail (rule, value, callback) {
    const reg=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
    if(!value){
      return callback()
    }else{
      if(!reg.test(value)){
        return callback(new Error("请输入正确的电子邮箱,如:test@163.com"))
      }else{
        return callback();
      }
    }
  }

  /**
    * QQ号码校验
    * @param {*} rule
    * @param {*} value
    * @param {*} callback
    */
   checkQQ (rule, value, callback) {
     const reg=/^[1-9][0-9]{4,14}$/;
     if(!value){
       return callback()
     }else{
       if(!reg.test(value)){
         return callback(new Error("请输入正确的QQ号"))
       }else{
         return callback();
       }
     }
   }

  /**
    * 固定电话号码校验
    * @param {*} rule
    * @param {*} value
    * @param {*} callback
    */
   checkHomeTelephone (rule, value, callback) {
     const reg=/^(((\d{3,4}-)?[0-9]{7,8})|(1(3|4|5|6|7|8|9)\d{9}))$/;
     if(!value){
       return callback()
     }else{
       if(!reg.test(value)){
         return callback(new Error("请输入正确的固定电话号码"))
       }else{
         return callback();
       }
     }
   }

   /**
     * 手机号码校验
     * @param {*} rule
     * @param {*} value
     * @param {*} callback
     */
    checkMobilePhone (rule, value, callback) {
      const reg=/^((1(3|4|5|6|7|8|9)\d{9}))$/;
      if(!value){
        return callback()
      }else{
        if(!reg.test(value)){
          return callback(new Error("请输入正确的手机号码"))
        }else{
          return callback();
        }
      }
    }

    /**
      * 身份证号校验
      * @param {*} rule
      * @param {*} value
      * @param {*} callback
      */
    checkIdentityCode(rule, value, callback) {
      let city = {
        11: '北京',
        12: '天津',
        13: '河北',
        14: '山西',
        15: '内蒙古',
        21: '辽宁',
        22: '吉林',
        23: '黑龙江',
        31: '上海',
        32: '江苏',
        33: '浙江',
        34: '安徽',
        35: '福建',
        36: '江西',
        37: '山东',
        41: '河南',
        42: '湖北',
        43: '湖南',
        44: '广东',
        45: '广西',
        46: '海南',
        50: '重庆',
        51: '四川',
        52: '贵州',
        53: '云南',
        54: '西藏',
        61: '陕西',
        62: '甘肃',
        63: '青海',
        64: '宁夏',
        65: '新疆',
        71: '台湾',
        81: '香港',
        82: '澳门',
        91: '国外',
      };
      if(!value){
        return true, callback();
      }
      if (!value ||!/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(value)
      ) {
        callback(new Error('请输入正确的身份证号'));
      } else if (!city[value.substr(0, 2)]) {
        callback(new Error('请输入正确的地址编码'));
      } else {
        if (value.length == 18) {
          value = value.split('');
          let factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
          let parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2];
          let sum = 0;
          let ai = 0;
          let wi = 0;
          for (let i = 0; i < 17; i++) {
            ai = value[i];
            wi = factor[i];
            sum += ai * wi;
          }
          if (parity[sum % 11] != value[17]) {
            callback(new Error('校验位错误'));
          } else {
            return true, callback();
          }
        }
      }
    }






}

2.创建rules.js,并引用ruleUtil.js

import RuleUtil from "./ruleUtil"
const ruleUtil = new RuleUtil()

export default{
  

  email:[
    {
      require:false,
      message:'请输入邮箱地址',
      trigger:'blur'
    },
    {
      validator:**ruleUtil.checkEmail,**
      message:'请输入正确的邮箱'
    }
  ],
  qq:[
    {
      require:false,
      message:'请输入QQ号',
      trigger:'blur'
    },
    {
      validator:ruleUtil.checkQQ,
      message:'请输入正确的QQ号',
      trigger:['blur', 'change']
    }
  ],
  mobilePhone:[
    {
      require:false,
      message:'请输入正确的手机号',
      trigger:'blur'
    },
    {
      validator:ruleUtil.checkMobilePhone,
      message:'请输入手机号',
      trigger:['blur','change']
    }
  ],
  idNumber:[
    {
      require:false,
      message:'请输入正确的身份证号',
      trigger:"blur"
    },
    {
      validator:ruleUtil.checkIdentityCode,
      message:'请输入正确的身份证号',
      trigger:['blur','change']
    }
  ],
  homeTelephone:[
    {
      require:false,
      message:'请输入家庭固定电话',
      trigger:'blur'
    },
    {
      validator:ruleUtil.checkHomeTelephone,
      message:'请输入正确的固定电话',
      trigger:['blur','change']
    }
  ]


}

3.模板引用

<template>
<el-dialog
      :title="dialogTitle"
      :visible.sync="dialogFormVisible"
      width="800px"
      :close-on-click-modal="false">
      <el-form :size="toolSize" :model="form" **:rules="rules"** ref="form" class="el-aligned-forms" :inline="true"
        :label-width="formLabelWidth">
        <el-form-item label="用户姓名" prop="name">
          <input type="hidden" v-model="form.id" />
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户性别">
          <el-select v-model="form.sex">
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属机构">
          <select-tree
            v-model="form.orgId"
            :options="optionData"
            :accordion="true"
            :lazy="true"
            :loadNode="orgTreeLoad"
            :text="form.orgName"
            :props="{ value: 'id', label: 'abbr', children: 'children' }" />
        </el-form-item>
        <el-form-item label="所属部门">
          <select-tree
            v-model="form.deptId"
            clearable
            :text="form.deptName"
            :options="formDepartments"
            :props="{ label: 'abbr', value: 'id', children: 'children' }"
            :accordion="true" />
        </el-form-item>
        <el-form-item label="用户职务">
          <el-input v-model="form.highestDutyRank" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="登录名" prop="account.loginId">
          <el-input v-model="form.account.loginId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱" prop="email">
          <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="入职时间">
          <el-date-picker
            v-model="form.entryTime"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="身份证号码" prop="idNumber">
          <el-input v-model="form.idNumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="mobilePhone">
          <el-input v-model="form.mobilePhone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="QQ" prop="qq">
          <el-input v-model="form.qq" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户代码">
          <el-input v-model="form.code" disabled autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户别名">
          <el-input v-model="form.alias" disabled autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="住址">
          <el-input v-model="form.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="家庭电话" prop="homeTelephone">
          <el-input v-model="form.homeTelephone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.remark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveMainUser">确 定</el-button>
      </div>
    </el-dialog>
    
</template>
<script>
import rules from "@/common/rules"
export default {
  name: 'userIndex',
  props: {},
  components: {},
  data () {
    return {
      rules:rules,
      form: {
        id: "",
        name: "",
        orderNo: "0",
        account: { loginId: "" },
        sex: "",
        highestDutyRank: "",
        idNumber: "",
        entryTime: "",
        mobilePhone: "",
        homeTelephone: "",
        qq: "",
        alias: "",
        remark: "",
        code: "",
        address: "",
        email: "",
        status: "ENABLED",
        deptId: "",
        ownerid: "0",
        orgId: "",
        orgName: "",
        deptName: ""
      },
      }
  }
      
}
</script>