正则表达式验证合集以及js常用方法

正则表达式验证合集以及js常用方法

1.定义封装的公共js

在src下定义一个util文件夹，并且定义个validate.js(当然你想取什么名字就什么名字哈哈哈哈)

2.上代码

//邮箱

/*** 邮箱* @param {*} s*/
export function isEmail(s) {return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)
}

//手机号码

/*** 手机号码* @param {*} s*/
export function isMobile(s) {return /^1[0-9]{10}$/.test(s)
}

//电话号码

/*** 电话号码* @param {*} s*/
export function isPhone(s) {return /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(s)
}

//URL地址

/*** URL地址* @param {*} s*/
export function isURL(s) {return /^http[s]?://.*/.test(s)
}

///* 合法uri */

/* 合法uri */
export function validateURL(textval) {const urlregex = /^(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.,?'\+&%$#=~_-]+))*$/st(textval)
}

/* 小写字母 */

export function validateLowerCase(str) {const reg = /^[a-z]+$/st(str)
}

/* 大写字母 */

export function validateUpperCase(str) {const reg = /^[A-Z]+$/st(str)
}

/* 大小写字母 */

export function validatAlphabets(str) {const reg = /^[A-Za-z]+$/st(str)
}

/* 验证pad还是pc */

export const vaildatePc = function () {const userAgentInfo = navigator.userAgentconst Agents = ['Android', 'iPhone','SymbianOS', 'Windows Phone','iPad', 'iPod']let flag = truefor (var v = 0; v < Agents.length; v++) {if (userAgentInfo.indexOf(Agents[v]) > 0) {flag = falsebreak}}return flag
}

/*** 判断身份证号码 */

export function cardid(code) {const list = []let result = truelet msg = ''var 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 (!validatenull(code)) {if (code.length === 18) {if (!code || !/(^d{18}$)|(^d{17}(d|X|x)$)/.test(code)) {msg = '证件号码格式错误'} else if (!city[code.substr(0, 2)]) {msg = '地址编码错误'} else {// 18位身份证需要验证最后一位校验位code = code.split('')// ∑(ai×Wi)(mod 11)// 加权因子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, 'x']var sum = 0var ai = 0var wi = 0for (var i = 0; i < 17; i++) {ai = code[i]wi = factor[i]sum += ai * wi}if (parity[sum % 11] !== code[17]) {msg = '证件号码校验位错误'} else {result = false}}} else {msg = '证件号码长度不为18位'}} else {msg = '证件号码不能为空'}list.push(result)list.push(msg)return list
}

/** * 判断手机号码是否正确 */

export function isvalidatemobile(phone) {const list = []let result = truelet msg = ''var isPhone = /^0d{2,3}-?d{7,8}$/// 增加134 减少|1349[0-9]{7}，增加181,增加145，增加17[678]if (!validatenull(phone)) {if (phone.length === 11) {if (st(phone)) {msg = '手机号码格式不正确'} else {result = false}} else {msg = '手机号码长度不为11位'}} else {msg = '手机号码不能为空'}list.push(result)list.push(msg)return list
}

/**

• 判断手机号码是否正确（可以为空）
  */

export function isValidateNoneMobile(phone) {const list = []let result = truelet msg = ''var isPhone = /^0d{2,3}-?d{7,8}$/// 增加134 减少|1349[0-9]{7}，增加181,增加145，增加17[678]if (!validatenull(phone)) {if (phone.length === 11) {if (st(phone)) {msg = '手机号码格式不正确'} else {result = false}} else {msg = '手机号码长度不为11位'}} else {result = false}list.push(result)list.push(msg)return list
}

/**

• 判断姓名是否正确
  */

export function validatename(name) {var regName = /^[u4e00-u9fa5]{2,4}$/if (!st(name)) return falsereturn true
}

/**

• 判断是否为整数
  */

export function validatenum(num, type) {let regName = /[^d.]/gif (type === 1) {if (!st(num)) return false} else if (type === 2) {regName = /[^d]/gif (!st(num)) return false}return true
}

/**

• 判断是否为小数
  */

export function validatenumord(num, type) {let regName = /[^d.]/gif (type === 1) {if (!st(num)) return false} else if (type === 2) {regName = /[^d.]/gif (!st(num)) return false}return true
}

// 只能输入数字

export function validateNumber(name) {var regName = /^[0-9]*$/if (!st(name)) return falsereturn true
}

//只能输入汉字

// 只能输入汉字
export function validateChine(name) {var regName = /^[u4e00-u9fa5]{0,}$/if (!st(name)) return falsereturn true
}

// 只能输入长度为3至20位的字符 （3,20）是可以根据自己的需要更改的

export function validateLeng(name) {var regName = /^w{3,20}$/  if (!st(name)) return falsereturn true
}

/**

• 判断是否为空
  */

export function validatenull(val) {if (typeof val === 'boolean') {return false}if (typeof val === 'number') {return false}if (val instanceof Array) {if (val.length === 0) return true} else if (val instanceof Object) {if (JSON.stringify(val) === '{}') return true} else {if (val === 'null' || val == null || val === 'undefined' || val === undefined || val === '') return truereturn false}return false
}

// 判断年龄
//validatenull是判断是否为空，方法在上一个正则中

// 判断年龄
//validatenull是判断是否为空，方法在上一个正则中
export function validateAge(age) {const list = []let result = truelet msg = ''var reg = /^(?:[1-9][0-9]?|1[01][0-9]|120)$/; //年龄是1-120之间有效if (!validatenull(age)) {if (age.length >0) {if (!st(age)) {msg = '年龄输入不合法'} else {result = false}} else if (age.length == 0) {result = false} else {msg = '年龄输入不合法'}} else {result = false}list.push(result)list.push(msg)return list
}

//请输入中文、英文、数字包括下划线

  validatorNameCn(rule, value, callback) {let acount = /^[u4E00-u9FA5A-Za-z0-9_]+$/if (value && (!(acount).test(value))) {callback(new Error('请输入中文、英文、数字包括下划线'))} else {callback()}},

/**

• 校验首尾空白字符的正则表达式

*/

  checkSpace(rule, value, callback) {let longrg = /[^s]+$/;if(!st(value)){callback(new Error('请输入非空格信息'));} else {callback();}},

/**

• 日期格式化
  */

export function dateFormat(date) {let format = 'yyyy-MM-dd hh:mm:ss'if (date !== 'Invalid Date') {var o = {'M+': Month() + 1, // month'd+': Date(), // day'h+': Hours(), // hour'm+': Minutes(), // minute's+': Seconds(), // second'q+': Math.floor((Month() + 3) / 3), // quarter'S': Milliseconds() // millisecond}if (/(y+)/.test(format)) {format = place(RegExp.$1,(FullYear() + '').substr(4 - RegExp.$1.length))}for (var k in o) {if (new RegExp('(' + k + ')').test(format)) {format = place(RegExp.$1,RegExp.$1.length === 1 ? o[k]: ('00' + o[k]).substr(('' + o[k]).length))}}return format}return ''
}

3.使用方法

1.需要的页面引入该验证方法

import { isValidateNoneMobile } from "@/util/validate";

2.创建验证
1.这是当封装的方法中同时返回状态跟提示信息为数组时的使用方法

 data () {const validatePhone = (rule, value, callback) => {if (isValidateNoneMobile(value)[0]) {callback(new Error(isValidateNoneMobile(value)[1]));} else {callback();}};},

 2.这是当封装方法中只返回状态时的使用方法（validateNumber方法在上面都有写，然后引入跟在表单中加验证都是一样的）

  data () {const validatePhone = (rule, value, callback) => {if (!validateNumber(value)) {callback(new Error("只能输入数字"));} else {callback();}};},

3.在表单中添加验证

  data () {return {ruleForm: {phone: "",},rules: {phone: [{ required: false, validator: validatePhone, trigger: "blur" }],},};},

4.校验数据类型

export const typeOf = function(obj) {return String.call(obj).slice(8, -1).toLowerCase()
}//在vue中使用
typeOf('树哥')  // string
typeOf([])  // array
typeOf(new Date())  // date
typeOf(null) // null
typeOf(true) // boolean
typeOf(() => { }) // function

以下为一些js常用的工具以及方法

5.防抖

防抖
export const debounce = (() => {let timer = nullreturn (callback, wait = 800) => {timer&&clearTimeout(timer)timer = setTimeout(callback, wait)}
})()//在vue中使用methods: {loadList() {debounce(() => {console.log('加载数据')}, 500)}
}

6.节流

export const throttle = (() => {let last = 0return (callback, wait = 800) => {let now = +new Date()if (now - last > wait) {callback()last = now}}
})()

8.手机号脱敏

export const hideMobile = (mobile) => {place(/^(d{3})d{4}(d{4})$/, "$1****$2")
}

9.开启全屏

export const launchFullscreen = (element) => {if (questFullscreen) {questFullscreen()} else if (RequestFullScreen) {RequestFullScreen()} else if (element.msRequestFullscreen) {element.msRequestFullscreen()} else if (element.webkitRequestFullscreen) {element.webkitRequestFullScreen()}
}

10.、关闭全屏

export const exitFullscreen = () => {if (itFullscreen) {itFullscreen()} else if (document.msExitFullscreen) {document.msExitFullscreen()} else if (CancelFullScreen) {CancelFullScreen()} else if (document.webkitExitFullscreen) {document.webkitExitFullscreen()}
}

11.大小写转换

参数：str 待转换的字符串
type 1-全大写 2-全小写 3-首字母大写
export const turnCase = (str, type) => {switch (type) {case 1:UpperCase()case 2:LowerCase()case 3://return str[0].toUpperCase() + str.substr(1).toLowerCase() // substr 已不推荐使用return str[0].toUpperCase() + str.substring(1).toLowerCase()default:return str}
}
在vue中使用：turnCase('vue', 1) // VUE
turnCase('REACT', 2) // react
turnCase('vue', 3) // Vue

12、解析URL参数

解析URL参数
export const getSearchParams = () => {const searchPar = new URLSearchParams(window.location.search)const paramsObj = {}for (const [key, value] ies()) {paramsObj[key] = value}return paramsObj
}
示例：// 假设目前位于 ****com/index?id=154513&age=18;
getSearchParams(); // {id: "154513", age: "18"}

13、判断手机是Andoird还是IOS

/** * 1: ios* 2: android* 3: 其它*/
export const getOSType=() => {let u = navigator.userAgent, app = navigator.appVersion;let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;let isIOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/);if (isIOS) {return 1;}if (isAndroid) {return 2;}return 3;
}

14、数组对象根据字段去重

参数：arr 要去重的数组
key 根据去重的字段名
export const uniqueArrayObject = (arr = [], key = 'id') => {if (arr.length === 0) returnlet list = []const map = {}arr.forEach((item) => {if (!map[item[key]]) {map[item[key]] = item}})list = Object.values(map)return list
}
示例：const responseList = [{ id: 1, name: '树哥' },{ id: 2, name: '黄老爷' },{ id: 3, name: '张麻子' },{ id: 1, name: '黄老爷' },{ id: 2, name: '张麻子' },{ id: 3, name: '树哥' },{ id: 1, name: '树哥' },{ id: 2, name: '黄老爷' },{ id: 3, name: '张麻子' },
]uniqueArrayObject(responseList, 'id')
// [{ id: 1, name: '树哥' },{ id: 2, name: '黄老爷' },{ id: 3, name: '张麻子' }]

15、滚动到页面顶部

export const scrollToTop = () => {const height = document.documentElement.scrollTop || document.body.scrollTop;if (height > 0) {questAnimationFrame(scrollToTop);window.scrollTo(0, height - height / 8);}
}

16、滚动到元素位置

export const smoothScroll = element =>{document.querySelector(element).scrollIntoView({behavior: 'smooth'});
};
示例：smoothScroll('#target'); // 平滑滚动到 ID 为 target 的元素

17、uuid

export const uuid = () => {const temp_url = ateObjectURL(new Blob())const uuid = String()vokeObjectURL(temp_url) //释放这个urlreturn uuid.substring(uuid.lastIndexOf('/') + 1)
}
示例：uuid() // a640be34-689f-4b98-be77-e3972f9bffdd

18、金额格式化

参数：{number} number：要格式化的数字
{number} decimals：保留几位小数
{string} dec_point：小数点符号
{string} thousands_sep：千分位符号
export const moneyFormat = (number, decimals, dec_point, thousands_sep) => {number = (number + '').replace(/[^0-9+-Ee.]/g, '')const n = !isFinite(+number) ? 0 : +numberconst prec = !isFinite(+decimals) ? 2 : Math.abs(decimals)const sep = typeof thousands_sep === 'undefined' ? ',' : thousands_sepconst dec = typeof dec_point === 'undefined' ? '.' : dec_pointlet s = ''const toFixedFix = function(n, prec) {const k = Math.pow(10, prec)return '' + il(n * k) / k}s = (prec ? toFixedFix(n, prec) : '' + und(n)).split('.')const re = /(-?d+)(d{3})/while (re.test(s[0])) {s[0] = s[0].replace(re, '$1' + sep + '$2')}if ((s[1] || '').length < prec) {s[1] = s[1] || ''s[1] += new Array(prec - s[1].length + 1).join('0')}return s.join(dec)
}
示例：moneyFormat(10000000) // 10,000,000.00
moneyFormat(10000000, 3, '.', '-') // 10-000-000.000

19、下载文件

api 接口
params 请求参数
fileName 文件名
const downloadFile = (api, params, fileName, type = 'get') => {axios({method: type,url: api,responseType: 'blob', params: params}).then((res) => {let str = res.headers['content-disposition']if (!res || !str) {return}let suffix = ''// 截取文件名和文件类型if (str.lastIndexOf('.')) {fileName ? '' : fileName = decodeURI(str.substring(str.indexOf('=') + 1, str.lastIndexOf('.')))suffix = str.substring(str.lastIndexOf('.'), str.length)}//  如果支持微软的文件下载方式(ie10+浏览器)if (window.navigator.msSaveBlob) {try {const blobObject = new Blob([res.data]);window.navigator.msSaveBlob(blobObject, fileName + suffix);} catch (e) {console.log(e);}} else {//  其他浏览器let url = ateObjectURL(res.data)let link = ateElement('a')link.style.display = 'none'link.href = urllink.setAttribute('download', fileName + suffix)document.body.appendChild(link)link.click()veChild(link)vokeObjectURL(link.href);}}).catch((err) => {console.ssage);})
}`
使用：downloadFile('/api/download', {id}, '文件名')

20、深拷贝

export const clone = parent => {// 判断类型const isType = (obj, type) => {if (typeof obj !== "object") return false;const typeString = String.call(obj);let flag;switch (type) {case "Array":flag = typeString === "[object Array]";break;case "Date":flag = typeString === "[object Date]";break;case "RegExp":flag = typeString === "[object RegExp]";break;default:flag = false;}return flag;};// 处理正则const getRegExp = re => {var flags = "";if (re.global) flags += "g";if (re.ignoreCase) flags += "i";if (re.multiline) flags += "m";return flags;};// 维护两个储存循环引用的数组const parents = [];const children = [];const _clone = parent => {if (parent === null) return null;if (typeof parent !== "object") return parent;let child, proto;if (isType(parent, "Array")) {// 对数组做特殊处理child = [];} else if (isType(parent, "RegExp")) {// 对正则对象做特殊处理child = new RegExp(parent.source, getRegExp(parent));if (parent.lastIndex) child.lastIndex = parent.lastIndex;} else if (isType(parent, "Date")) {// 对Date对象做特殊处理child = new Time());} else {// 处理对象原型proto = PrototypeOf(parent);// 利用ate切断原型链child = ate(proto);}// 处理循环引用const index = parents.indexOf(parent);if (index != -1) {// 如果父数组存在本对象,说明之前已经被引用过,直接返回此对象return children[index];}parents.push(parent);children.push(child);for (let i in parent) {// 递归child[i] = _clone(parent[i]);}return child;};return _clone(parent);
};

21、模糊搜索

list 原数组
keyWord 查询的关键词
attribute 数组需要检索属性
export const fuzzyQuery = (list, keyWord, attribute = 'name') => {const reg = new RegExp(keyWord)const arr = []for (let i = 0; i < list.length; i++) {if (st(list[i][attribute])) {arr.push(list[i])}}return arr
}
复制代码
示例：const list = [{ id: 1, name: '树哥' },{ id: 2, name: '黄老爷' },{ id: 3, name: '张麻子' },{ id: 4, name: '汤师爷' },{ id: 5, name: '胡万' },{ id: 6, name: '花姐' },{ id: 7, name: '小梅' }
]
fuzzyQuery(list, '树', 'name') // [{id: 1, name: '树哥'}]

22、遍历树节点

export const foreachTree = (data, callback, childrenName = 'children') => {for (let i = 0; i < data.length; i++) {callback(data[i])if (data[i][childrenName] && data[i][childrenName].length > 0) {foreachTree(data[i][childrenName], callback, childrenName)}}
}
复制代码
示例：假设我们要从树状结构数据中查找 id 为 9 的节点const treeData = [{id: 1,label: '一级 1',children: [{id: 4,label: '二级 1-1',children: [{id: 9,label: '三级 1-1-1'}, {id: 10,label: '三级 1-1-2'}]}]}, {id: 2,label: '一级 2',children: [{id: 5,label: '二级 2-1'}, {id: 6,label: '二级 2-2'}]}, {id: 3,label: '一级 3',children: [{id: 7,label: '二级 3-1'}, {id: 8,label: '二级 3-2'}]
}],let result
foreachTree(data, (item) => {if (item.id === 9) {result = item}
})
console.log('result', result)  // {id: 9,label: "三级 1-1-1"}   

有遇到新的会持续更新…