前端js正则校验大全 + vue 表单如何引入外包校验js + 封装前端正则校验

该篇包含部分正则校验js + 使用方法

1. 新建validate.js文件，复制如下代码：

tips: i18n.t('validate.validate_number')为本项目做的国际化，实际项目中如果未做该功能，则替换未中文描述即可，如：return callback(new Error('请输入正确的手机号！'))

// 是否数字
export function isNumber(rule, value, callback) {
    if (!value) {
        return callback()
    }
    var pattern = /^\d+$/
    if (pattern.test(value)) {
        return callback()
    }
    return callback(new Error(i18n.t('validate.validate_number')))
}

// 是否小写字母
export function isLowerLetter(rule, value, callback) {
    if (!value) {
        return callback()
    }
    var pattern = /^[a-z]+$/
    if (pattern.test(value)) {
        return callback()
    }
    return callback(new Error(i18n.t('validate.validate_letter1')))
}

// 是否大写字母
export function isUpperLetter(rule, value, callback) {
    if (!value) {
        return callback()
    }
    var pattern = /^[A-Z]+$/
    if (pattern.test(value)) {
        return callback()
    }
    return callback(new Error(i18n.t('validate.validate_letter2')))
}

// 是否特殊字符
export function isSpecialChars(rule, value, callback) {
    if (!value) {
        return callback()
    }
    // eslint-disable-next-line no-useless-escape
    var pattern = /^[+\-=_@#$%^&;:,.<>/~\\\[\](){}?!|]+$/
    if (pattern.test(value)) {
        return callback()
    }
    return callback(new Error(i18n.t('validate.validate_chars')))
}

// url地址校验
export function urlVerification(rule, value, callback) {
    if (!value) {
        return callback()
    }
    var pattern = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?$/g
    if (pattern.test(value)) {
        return callback()
    }
    return callback(new Error(i18n.t('validate.validate_ad_url')))
}

// url含这种html标签 xss攻击校验
export function validateXssUrl(rule, value, callback) {
    let errStrReg = [
        '(<input(.*?)></input>|<input(.*)/>)', '<span(.*?)</span>', '<div(.*)</div>', '<style>(.*?)</style>', '(onload|onclick|onfocus|onblur)(.*?)=',
        '<script>(.*?)</script>', 'javascript:', '</script>', '<script(.*?)>', "src[\r\n]*=[\r\n]*\\\'(.*?)\\\'", 'src[\r\n]*=[\r\n]*\\"(.*?)\\"',
        'eval\\((.*?)\\)', 'expression\\((.*?)\\)', '<iframe>(.*?)</iframe>', 'vbscript:'
    ]
    errStrReg.forEach(item => {
        const regExp = new RegExp(item)
        if (regExp.test(value)) {
            return callback(new Error(i18n.t('validate.validate_domain')))
        }
    })
    return callback()
}

// 非必填url校验
export function validateUnRequiredTrustDomain(rule, value, callback) {
    if (!value) {
        return callback()
    }

    return validateTrustDomain(rule, value, callback)
}

// 是否为标准URL
export function validateUrl(url) {
    // var res = url.match(/^((ht)tps?):\/\/[\w\-]+(\.[\w\-]+)+([\w\-.,@?^=%&:\/~+#]*[\w\-@?^=%&\/~+#])?$/)
    var res = url.match(/^((ht)tps?:\/\/)([0-9a-z.]+)(:[0-9]+)?([/0-9a-z.]+)?(\?[0-9a-z&=]+)?(#[0-9-a-z]+)?/i)

    // 当时输入的值与正则能够匹配时，该方法返回true
    return (res !== null)
}

// 校验用户名和账号名可以输入点号
export function validateUserName(rule, value, callback) {
    if (!value) {
        return callback()
    }
    let min = rule.min ? rule.min : 1
    let max = rule.max ? rule.max : 60
    let tip, reg
    reg = '^[a-zA-Z0-9-_\.\u4e00-\u9fa5]{' + min + ',' + max + '}$'
    tip = i18n.t('validate.validate_username', { max: max })
    const regExp = new RegExp(reg)
    if (regExp.test(value)) {
        return callback()
    }
    return callback(new Error(tip))
}

// 校验name
export function validateName(rule, value, callback) {
    if (!value) {
        return callback()
    }
    let min = rule.min ? rule.min : 1
    let max = rule.max ? rule.max : 60
    let isChina = rule.china === false ? rule.china : true
    let tip, reg
    if (isChina) {
        reg = '^[a-zA-Z0-9-_\u4e00-\u9fa5]{' + min + ',' + max + '}$'
        tip = i18n.t('validate.validate_accname1', { max: max })
    } else {
        reg = '^[a-zA-Z0-9-_]{' + min + ',' + max + '}$'
        tip = i18n.t('validate.validate_name2', { max: max })
    }
    // 判断是否前后有空格
    if (/^\s+|\s+$/.test(value)) {
        return callback(new Error(i18n.t('validate.validate_space')))
    }
    const regExp = new RegExp(reg)
    if (regExp.test(value)) {
        return callback()
    }
    return callback(new Error(tip))
}

// 校验特殊字符
export function validateTextarea(rule, value, callback) {
    if (!value) {
        return callback()
    }
    const reg = /[`!@#$%^&*()_<>?:"{}.\/'[\]]/im
    if (!reg.test(value)) {
        return callback()
    }
    return callback(new Error(i18n.t('validate.validate_textarea')))
}
// 校验域名
export function validateDomain(rule, value, callback) {
    if (!value) {
        return callback()
    }
    const reg = /^[a-zA-Z0-9][a-zA-Z0-9-]{1,61}[a-zA-Z0-9](?:\.[a-zA-Z]{2,})+$/
    if (reg.test(value)) {
        return callback()
    }
    return callback(new Error(i18n.t('validate.validate_domain_url')))
}
// 校验手机号
export function validateTel(rule, value, callback) {
    if (!value) {
        return callback()
    }
    const reg = /^1[3456789]\d{9}$/
    if (reg.test(value)) {
        return callback()
    }
    return callback(new Error(i18n.t('validate.validate_tel')))
}

// 校验css选择器
export function validateCssSelector(rule, value, callback) {
    if (!value) {
        return callback()
    }
    const reg = /^[^\u4e00-\u9fa5&<"'/]*$/
    if (reg.test(value)) {
        return callback()
    }
    return callback(new Error(i18n.t('validate.validate_css_selector')))
}
复制代码

2. 使用方法

• 引入

import { validateCode } from '@/api/validate.js'

• data声明

    rules: {
        name: [
            { required: true, message: '必填', trigger: 'blur' },
            { validator: validateCode, trigger: 'blur' },
            { validator: checkName, trigger: 'change' }
         ]
    }
复制代码

• DOM使用

    <el-form :model="attrForm" ref="attrForm" :rules="rules">
        <el-form-item label="姓名" prop="name">
            <el-input v-model.trim="attrForm.name"></el-input>
        </el-form-item>
    </el-form>
复制代码

end...