前端Vue中常用rules校验规则(轮子)如电话身份证邮箱等校验_rules 手机号验证规则

本文链接：https://blog.csdn.net/2401_84616585/article/details/138607656

最后

面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

大厂面试题

面试题目录

export function validateIDCard(val) {
if (checkCode(val)) {
var date = val.substring(6, 14)
if (checkDate(date)) {
if (checkProv(val.substring(0, 2))) {
return true
}
}
}
return false
}
/**

check Prov
/
var checkProv = function (val) {
var pattern = /¹[0-9]/
var provs = {
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: ‘澳门’,
}
if (pattern.test(val)) {
if (provs[val]) {
return true
}
}
return false
}
/*
check Date
*/
var checkDate = function (val) {
var pattern = /^(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31) $KaTeX parse error: Expected '}', got '&' at position 191: \dotste) if (date2 &̲& date2.getMont\dots$ /
var factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
var parity = [1, 0, ‘X’, 9, 8, 7, 6, 5, 4, 3, 2]
var code = val.substring(17)
if (p.test(val)) {
var sum = 0
for (var i = 0; i < 17; i++) {
sum += val[i] * factor[i]
}
if (parity[sum % 11] == code.toUpperCase()) {
return true
}
}
return false
}


2.外链 IP 传统网站 端口号判断

/**

@description 判读是否为外链
@param path
@returns {boolean}
*/
export function isExternal(path) {
return /^(https?:|mailto:|tel:)/.test(path)
}

/**

@description 判断是否为IP
@param ip
@returns {boolean}
*/
export function isIP(ip) {
const reg =
/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5]).(\d{1,2}|1\d\d|2[0-4]\d|25[0-5]).(\d{1,2}|1\d\d|2[0-4]\d|25[0-5]).(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
return reg.test(ip)
}

/**

@description 判断是否是传统网站
@param url
@returns {boolean}
*/
export function isUrl(url) {
const reg =
/^(https?|ftp)😕/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&% $KaTeX parse error: Undefined control sequence: \/ at position 230: …2}))(:[0-9]+)*(\̲/̲($ |[a-zA-Z0-9.,?'\+&% $KaTeX parse error: Expected 'EOF', got '#' at position 1: #̲=~_-]+))*$ /
return reg.test(url)
}

/**

@description 判断是否是端口号
@param value
@returns {boolean}
*/
export function isPort(value) {
const reg =
/^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/
return reg.test(value)
}


3.大写字母/小写字母/字符串/数组

/**

@description 判断是否是小写字母
@param value
@returns {boolean}
*/
export function isLowerCase(value) {
const reg = /²+$/
return reg.test(value)
}

/**

@description 判断是否是大写字母
@param value
@returns {boolean}
*/
export function isUpperCase(value) {
const reg = /³+$/
return reg.test(value)
}

/**

@description 判断是否是大写字母开头
@param value
@returns {boolean}
*/
export function isAlphabets(value) {
const reg = /⁴+$/
return reg.test(value)
}

/**

@description 判断是否是字符串
@param value
@returns {boolean}
*/
export function isString(value) {
return typeof value === ‘string’ || value instanceof String
}

/**

@description 判断是否是数组
@param arg
*/
export function isArray(arg) {
if (typeof Array.isArray === ‘undefined’) {
return Object.prototype.toString.call(arg) === ‘[object Array]’
}
return Array.isArray(arg)
}


4.经纬度判断

/**

@description 判断经度 -180.0～+180.0（整数部分为0～180，必须输入1到5位小数）
@param value
@returns {boolean}
*/
export function isLongitude(value) {
const reg = /⁵?(0?\d{1,2}.\d{1,5}|1[0-7]?\d.\d{1,5}|180.0{1,5})$/
return reg.test(value)
}

/**

@description 判断纬度 -90.0～+90.0（整数部分为0～90，必须输入1到5位小数）
@param value
@returns {boolean}
*/
export function isLatitude(value) {
const reg = /⁶?([0-8]?\d.\d{1,5}|90.0{1,5})$/
return reg.test(value)
}


5.rtsp校验

/**

@description rtsp校验，只要有rtsp://
@param value
@returns {boolean}
*/
export function isRTSP(value) {
const reg =
/^rtsp://([a-z]{0,10}:.{0,10}@)?(\d{1,2}|1\d\d|2[0-4]\d|25[0-5]).(\d{1,2}|1\d\d|2[0-4]\d|25[0-5]).(\d{1,2}|1\d\d|2[0-4]\d|25[0-5]).(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
const reg1 =
/^rtsp://([a-z]{0,10}:.{0,10}@)?(\d{1,2}|1\d\d|2[0-4]\d|25[0-5]).(\d{1,2}|1\d\d|2[0-4]\d|25[0-5]).(\d{1,2}|1\d\d|2[0-4]\d|25[0-5]).(\d{1,2}|1\d\d|2[0-4]\d|25[0-5]):[0-9]{1,5}/
const reg2 =
/^rtsp://([a-z]{0,10}:.{0,10}@)?(\d{1,2}|1\d\d|2[0-4]\d|25[0-5]).(\d{1,2}|1\d\d|2[0-4]\d|25[0-5]).(\d{1,2}|1\d\d|2[0-4]\d|25[0-5]).(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])//
return reg.test(value) || reg1.test(value) || reg2.test(value)
}


6.表单的一些校验

// 只允许输入数字或字母
export function validateIntOrLet(rule, value, callback) {
const reg = /⁷+$/
if (!reg.test(value)) {
callback(new Error(‘只允许输入数字或字母’))
} else {
callback()
}
}

// 只允许输入数字
export function validateInt(rule, value, callback) {
const reg = /⁸+$/
if (value && !reg.test(value)) {
callback(new Error(i18n.t(‘common.validateInt’)))
} else if (value && 10 < value.length) {
callback(new Error(i18n.t(‘common.dataLengthTip’, { number: 10 })))
} else {
callback()
}
}

// 只允许输入正整数
export function validateIntNumber(rule, value, callback) {
const reg = /⁹\d*$/
if (value && !reg.test(value)) {
callback(new Error(i18n.t(‘common.validatePositiveInt’)))
} else {
callback()
}
}

// 只允许输入正整数或者含有1到4位小数的数字 0/0.0001/123
export function validateFloatNumbertoFixed(rule, value, callback) {
value = ${value}.trim()
let n = Number(value)
if (isNaN(n)) {
return callback(new Error(‘请输入数字’))
}

最后

你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

我特地针对初学者整理一套前端学习资料

前端路线图