vue3 + naiveUI 的常用表单验证:正则验证

1,396 阅读2分钟

记录常用的表单验证,包括有:地址验证、大小写、银行卡号、邮箱验证、手机号验证、邮编、 身份证号码、车牌号、营业执照号码(8位社会信用代码)等,随时补充,以做参考。

const rules = {
    URL(url: string) {
        const regex =
            /^(https?|ftp)://([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+.)*[a-zA-Z0-9-]+.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(/($|[a-zA-Z0-9.,?"\+&%$#=~_-]+))*$/
        return valid(url, regex, 'URL格式不正确')
    },
    LowerCase(str: string) {
        const regex = /^[a-z]+$/
        return valid(str, regex, '只能输入小写字母')
    },
    UpperCase(str: string) {
        const regex = /^[A-Z]+$/
        return valid(str, regex, '只能输入大写字母')
    },
    Alphabets(str: string) {
        const regex = /^[A-Za-z]+$/
        return valid(str, regex, '只能输入字母')
    },
    bankCard(val: string) {
        const regex = /^([1-9]{1})(\d{14}|\d{30})$/
        return valid(val, regex, '银行卡号不正确')
    },
    Email(email: string) {
        const regex =
            /^(([^<>()[]\.,;:\s@"]+(.[^<>()[]\.,;:\s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/
        return valid(email, regex, '邮箱地址格式不正确')
    },
    Mobile(mobile: string) {
        const regex = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
        return valid(mobile, regex, '手机号格式不正确')
    },
    Phone(phone: string) {
        const regex = /^((\d{3,4})|\d{3,4}-|\s)?\d{7,14}$/
        return valid(phone, regex, '电话号码格式不正确')
    },
    Postcode(postcode: string) {
        const regex = /^[0-9][0-9]{5}$/
        return valid(postcode, regex, '邮编格式不正确')
    },

    Number(num: string) {
        const regex = /^(-|+?)\d+(.\d+)?$/
        return valid(num, regex, '只能输入纯数字')
    },
    Fax(fax: string) {
        const regex = /^(\d{3,4}-)?\d{7,8}$/
        return valid(fax, regex, '传真格式不正确')
    },
    Int(num: string) {
        const regex = /^((0)|([1-9]\d*))$/
        return valid(num, regex, '只能输入非负整数')
    },
    IntPlus(num: string) {
        const regex = /^[1-9]\d*$/
        return valid(num, regex, '只能输入正整数')
    },
    Float1(num: string) {
        const regex = /^-?\d+(.\d)?$/
        return valid(num, regex, '只能输入数字,最多一位小数')
    },
    Float2(num: string) {
        const regex = /^-?\d+(.\d{1,2})?$/
        return valid(num, regex, '只能输入数字,最多两位小数')
    },
    Float3(num: string) {
        const regex = /^-?\d+(.\d{1,3})?$/
        return valid(num, regex, '只能输入数字,最多三位小数')
    },

    FloatPlus2(num: string) {
        const regex = /^\d+(.\d{1,2})?$/
        return valid(num, regex, '只能输入非负数字,最多两位小数')
    },
    Encode(code: string) {
        const regex = /^(_|-|[a-zA-Z0-9])+$/
        return valid(code, regex, '编码只能使用字母、数字、下划线、中划线')
    },
    Encode2(code: string) {
        const regex = /^[a-zA-Z0-9]+$/
        return valid(code, regex, '编码只能使用字母、数字')
    },

    Encode3(code: string) {
        const regex = /^(_|[a-zA-Z0-9])+$/
        return valid(code, regex, '编码只能使用字母、数字、下划线')
    },

    IdCard(code: string) {
        const regex =
            /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
        return valid(code, regex, '请输入正确的身份证号码')
    },

    USCC(code: string) {
        const regex = /^[0-9A-Z]{18}/
        return valid(code, regex, '请输入包含数字和大写字母的18位社会信用代码')
    },

    CarNum(code: string) {
        const regex =
            /^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/i
        return valid(code, regex, '请输入正确的车牌号')
    },

    CNandEN(code: string) {
        const regex = /^[a-zA-Z\u4e00-\u9fa5]+$/
        return valid(code, regex, '只能使用中文、英文')
    },

    MobileOrPhone(val: string) {
        const result =
            /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/ ||
            /^((\d{3,4})|\d{3,4}-|\s)?\d{7,14}$/.test(val)
        return valid(result, null, '手机或电话号格式不正确')
    },
    Password1(val: string) {
        const pwdRegex = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{6,32}')
        const result = pwdRegex.test(val)
        return valid(result, null, '(密码长度6-32位数,必须包含大小写字母、数字、特殊字符)')
    },

}

function valid(val: any, regex: any, msg: any) {
    return { result: regex instanceof RegExp ? regex.test(val) : !!val, errMsg: msg }
}

export function vxRule(required = true, type: string, trigger = ['input', 'blur', 'change'], nullMsg = '该字段为必填项') {
    const rule: any = { required: !!required, trigger }

    let check: any = null
    if (typeof type === 'function') {
        check = type
    } else {
        check = type ? rules[type + ''] : null
    }
    if (check) {
        //存在规则时添加规则
        rule.validator = (r: any, v: any, c: any) => {
            const { result, errMsg } = check(v)
            if (required) {
                //必填项: null,undefined,"","  " 都算无输入内容
                return v == null || (v + '').trim() === ''
                    ? c(new Error(nullMsg))
                    : result
                        ? c()
                        : c(new Error(errMsg))
            }
            //选填项: null,undefined,"" 都算无输入内容,"  "会被校验
            return v == null || v + '' === '' || result ? c() : c(new Error(errMsg))
        }
    } else {
        rule.message = nullMsg
    }
    return [rule]
}