技术文档（2）常用正则&&正则模块化

常用正则

在项目开发中，某些input（输入）框需要校验，输入的内容是否合法；下面是一些经常遇到的正则校验。

// 正则校验模块化

export default {
    data() {
        return {
            rules: {
                /* 1，密码必需由10到16位数字、大小写字母和特殊符号*/
                passwordReg: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { pattern: /^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-z].*)(?=.*[!@#$%^&*_].*).{10,16}$/, message: '格式不正确' },
                ],

                /* 2，统一社会信用代码*/
                unifiedSocialCreditCodeReg: [
                    { required: true, message: '请输入统一社会信用代码', trigger: 'blur' },
                    { pattern: /^([0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]\d{14})$/, message: '格式不正确' },
                ],

                /* 3,纳税人识别号*/
                ITINReg: [
                    { required: true, message: '请输入统一社会信用代码', trigger: 'blur' },
                    { pattern: /[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}/, message: '格式不正确' },
                ],

                /* 4,手机号*/
                mobileReg: [
                    { required: true, message: '请输入手机号码', trigger: 'blur' },
                    { pattern: /^1[34578]\d{9}$/, message: '格式不正确' },
                ],

                /* 5,座机*/
                specialPlaneReg: [
                    { required: true, message: '请输入座机号码', trigger: 'blur' },
                    { pattern: /^(0[0-9]{2,3}\-)([2-9][0-9]{4,7})+(\-[0-9]{1,4})?$/, message: '格式不正确' },
                ],

                /* 6,非法数字*/
                unallowableDigitReg: [
                    { required: true, message: '请输入数字', trigger: 'blur' },
                    { pattern: /^\d+$|^\d+[.]?\d+$/, message: '非法数字' },
                ],

                /* 7,必须是数字*/
                figureReg: [
                    { required: true, message: '请输入数字', trigger: 'blur' },
                    { pattern: /^[0-9][0-9]*([.][0-9]+)?$/, message: '必须是数字' },
                ],

                /* 8,身份证*/
                identityCardReg: [
                    { required: true, message: '请输入身份证号', trigger: 'blur' },
                    { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '格式不正确' },
                ],

                /* 9,邮箱*/
                mailboxReg: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                    { pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/, message: '格式不正确' },
                ],

                /* 10,微信*/
                wxReg: [
                    { required: true, message: '请输入微信号', trigger: 'blur' },
                    { pattern: /^[a-zA-Z0-9]{1}[-_a-zA-Z0-9]{4,19}$/, message: '格式不正确' },
                ],

                /* 11,整数*/
                integerReg: [
                    { required: true, message: '请输入整数', trigger: 'blur' },
                    { pattern: /^([0]|[1-9][0-9]*)$/, message: '格式不正确' },
                ],

				/* 12,税务登记证*/
                taxRegistrationCertificateReg: [
                    { required: true, message: '请输入内容', trigger: 'blur' },
                    { pattern: /^[0-9a-zA-z_]{10,20}$/, message: '格式不正确' },
                ],

                /* 13,港澳通行证*/
                HKReg: [
                    { required: true, message: '请输入港澳通行证号码', trigger: 'blur' },
                    { pattern: /^[CW]\d{8}$/, message: '格式不正确' },
                ],

                /* 14,台湾通行证*/
                TWReg: [
                    { required: true, message: '请输入台湾通行证号码', trigger: 'blur' },
                    { pattern: /^[a-zA-Z][0-9]{9}$/, message: '格式不正确' },
                ],

                /* 15,护照*/
                passportReg: [
                    { required: true, message: '请输入护照号码', trigger: 'blur' },
                    { pattern: /^1[45][0-9]{7}$|([P|p|S|s]\d{7}$)|([S|s|G|g]\d{8}$)|([Gg|Tt|Ss|Ll|Qq|Dd|Aa|Ff]\d{8}$)|([H|h|M|m]\d{8,10})$/, message: '格式不正确' },
                ],

                /* 16,银行卡号*/
                cardNoReg: [
                    { required: true, message: '请输入银行卡号码', trigger: 'blur' },
                    { pattern: /^([0-9]{1})(\d{9,29})$/, message: '格式不正确' },
                ],

                /* 17,输入内容中包含特殊符号*/
                specialCharacterReg: [
                    { required: true, message: '请输入内容', trigger: 'blur' },
                    { pattern: /^([0-9]{1})(\d{9,29})$/, message: '输入内容中包含特殊符号' },
                ],

                /* 18,包含中文*/
                ContainsChineseReg: [
                    { required: true, message: '请输入内容', trigger: 'blur' },
                    { pattern: /[\u4E00-\u9FA5]/, message: '输入内容中包含中文' },
                ],

                /* 19,邮编*/
                postCodeReg: [
                    { required: true, message: '请输入内容', trigger: 'blur' },
                    { pattern: /^\d{6}$/, message: '格式不正确' },
                ],

                /* 20,营业执照、组织机构代码*/
                businessLicenseReg: [
                    { required: true, message: '请输入内容', trigger: 'blur' },
                    { pattern: /^[a-zA-Z0-9]{10,20}$/, message: '格式不正确' },
                ],
            },
        };
    },

};

正则模块化

1. 正则在一个js文件中定义;（上面的代码就是例子）
2. 在需要的组件中用mixins混入到组件中；

import rules from "@/mixins/regular-modularization.js";

export default {
	name: "vueRegularModularization",
  mixins: [rules],
  data() {
    return {
      ruleForm: {
        mobileReg: "",
      },
    };
  },
}

3. 组件中使用正则。

<el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >