达县网站制作,能用于制作网页的软件,排名优化专家,电商app开发涉及的技术一、正则基础语法
JavaScript 正则表达式 | 菜鸟教程
JS正则表达式语法大全#xff08;非常详细#xff09;
二、使用场景
2.1、校验中国大陆手机号的正则表达式
正则
/^1[3456789]\d{9}$/解释
序号正则解释1^1以数字 1 开头2[3456789]第二位可以是 3、4、5、6、7、8、…一、正则基础语法
JavaScript 正则表达式 | 菜鸟教程
JS正则表达式语法大全非常详细
二、使用场景
2.1、校验中国大陆手机号的正则表达式
正则
/^1[3456789]\d{9}$/解释
序号正则解释1^1以数字 1 开头2[3456789]第二位可以是 3、4、5、6、7、8、9 中的任意一个3\d{9}后面是 9 个数字
示例代码
templatediv classregexpel-input v-modelphoneNumber/el-inputel-button clickisPhoneNumber正则校验手机号码/el-button/div
/templatescript setup langts
import { ref } from vue;let phoneNumber ref()
const isPhoneNumber () {const reg /^1[3456789]\d{9}$/;console.log(reg.test(phoneNumber.value))
}/scriptstyle scoped langless
.regexp{display: flex;align-items: flex-start;
}
/style浏览器测试 2.2、JavaScript 正则表达式来验证邮箱地址
正则 /^([a-zA-Z0-9_.-])\(([a-zA-Z0-9-])\.)([a-zA-Z]{2,4})$/ 解释
序号正则解释1^匹配字符串的开始位置2([a-zA-Z0-9_.-])匹配任何字母、数字、下划线、点、加号和减号至少匹配一次3\匹配字符 4(([a-zA-Z0-9-])\.)匹配任何字母、数字和减号至少匹配一次后面跟着一个点。该模式可以重复多次5([a-zA-Z]{2,4})匹配任何字母长度在 2 到 4 之间至少匹配一次。该模式匹配邮箱地址的顶级域名例如 .com、.org 等6$匹配字符串的结束位置
示例代码
function isValidEmail(email) {const regex /^([a-zA-Z0-9_.-])\(([a-zA-Z0-9-])\.)([a-zA-Z]{2,4})$/;return regex.test(email); // 返回一个布尔值表示该 email 是否为有效的邮箱地址
}const email examplemail.com;
if (isValidEmail(email)) {console.log(Valid email); // 输出
} else {console.log(Invalid email);
}浏览器测试 https://www.cnblogs.com/chenlinlab/p/10915019.html
2.3、身份证号码
正则 /(^\d{15}$)|(^\d{17}([0-9]|X)$)/ 解释
序号正则解释1(^\d{15}$)匹配长度为 15 位的数字串2(^\d{17}([0-9]|X)$)匹配长度为 17 位的数字串或 17 位数字串加一个大写字母 X。其中\d 表示任意一个数字字符| 表示或
示例代码
function isValidIdNumber(idNumber) {const regex /(^\d{15}$)|(^\d{17}([0-9]|X)$)/;return regex.test(idNumber);
}const idNumber 51152719991212001X;
if (isValidIdNumber(idNumber)) {console.log(Valid ID number); // 输出
} else {console.log(Invalid ID number);
}2.4、去掉字符串空格
去掉左侧空格 let str str.replace(/(^\s*)/g,) 去掉右侧空格 let str str.replace(/(\s*$)/g,) 去掉左右空格 let str str.replace(/(^\s*)|(\s*$)/g,) 去掉对象中值为字符串的前后空格
let formData {a: 111,b: null,c: snow
}
Object.keys(formData).forEach((key){if(typeof formData[key] string){formData[key] formData[key].replace(/(^\s*)|(\s*$)/g,)}
})
2.5、只能输入正整数
function isNumber(str) {return /^\d$/.test(str);
}
2.6、只能输入字母
function isLetter(str) {return /^[a-zA-Z]$/.test(str);
}2.7、只能输入文字
function isChinese(str) {return /^[\u4e00-\u9fa5]$/.test(str);
}2.8、校验url地址
正则
/^(http[s]?:\/\/)?[a-zA-Z0-9\_\-]\.[a-zA-Z0-9]{2,3}(\:[0-9]{1,5})?(\/\S*)?$/i解释
序号解释1URL是否以http://或https://开头可选2域名是否由字母、数字、下划线或短划线组成3域名后缀是否为2到3个字母或数字4端口号是否在1到5位数之间可选5URL路径是否以斜杠开头后面跟着任意非空白字符可选
2.9、校验金额千分位展示保留两位小数
校验金额可以使用正则表达式千分位展示和保留两位小数则需要使用 JavaScript 的内置函数进行处理。
2.9.1、校验金额的正则表达式
function isValidAmount(amount) {var pattern /^\d(\.\d{1,2})?$/;return pattern.test(amount);
}这个正则表达式的意思是金额必须是一个数字可以包含一到两个小数位。例如1、10、100.5、999.99 等等都是合法的金额。
示例代码
isValidAmount(10); // true
isValidAmount(100.5); // true
isValidAmount(999.99); // true
isValidAmount(1000); // false
isValidAmount(999.999); // false2.9.2、将金额格式化为千分位展示和保留两位小数
function formatAmount(amount) {if (!isValidAmount(amount)) {return Invalid amount;}return Number(amount).toFixed(2).replace(/\d{1,3}(?(\d{3})(\.\d*)?$)/g, $,);
}示例代码
formatAmount(1000.5); // 1,000.50
formatAmount(999999.99); // 999,999.99
formatAmount(invalid amount); // Invalid amount值得注意的是此函数只对合法的金额进行格式化对于非法的金额将返回提示字符串Invalid amount。
2.10、日期格式化
function formatDate(date, fmt) {var regexp {M: date.getMonth() 1,d: date.getDate(),h: date.getHours(),m: date.getMinutes(),s: date.getSeconds(),q: Math.floor((date.getMonth() 3) / 3),S: date.getMilliseconds()};if (/(y)/.test(fmt)) {fmt fmt.replace(RegExp.$1, (date.getFullYear() ).substr(4 - RegExp.$1.length));}for (var k in regexp) {if (new RegExp(( k )).test(fmt)) {fmt fmt.replace(RegExp.$1, (RegExp.$1.length 1) ? (regexp[k]) : ((00 regexp[k]).substr(( regexp[k]).length)));}}return fmt;
}// 示例将日期格式化为yyyy-MM-dd hh:mm:ss格式
var date new Date();
var formattedDate formatDate(date, yyyy-MM-dd hh:mm:ss);
console.log(formattedDate); // 例如2023-07-29 18:14:07
2.11、字符串替换
可以使用字符串的 replace() 方法以及正则表达式来进行字符串替换。
代码示例
const str hello, world!;
const newStr str.replace(/hello/g, hi);
console.log(newStr); // hi, world!解释
序号正则解释1/hello/g匹配字符串中的所有 hello字符串并将其替换为 hi2/g表示全局匹配可以匹配字符串中的所有符合条件的子字符串
2.12、烤串命名风格转换为大小驼峰命名风格
示例代码
const str hello-world-this-is-a-test;
const newStr str.replace(/-([a-z])/g, function(match, p1) {return p1.toUpperCase();
});
console.log(newStr); // helloWorldThisIsATest解释
正则表达式 /-([a-z])/g 匹配符合烤串命名风格的字符串中的 - 后面的小写字母并将其替换为对应的大写字母。其中 /g 表示全局匹配可以匹配字符串中的所有符合条件的子字符串。
在 replace() 方法中第二个参数可以是一个函数可以在函数中对匹配到的字符串进行更复杂的处理。函数接收两个参数第一个参数是匹配到的字符串第二个参数是匹配到的子串中的第一个括号里的内容。
在这个例子中我们使用匿名函数来处理匹配到的字符串将匹配到的小写字母转换为对应的大写字母并返回。匹配到的字符串将被替换为返回值。
2.13、蛇形命名风格下划线分隔转换为驼峰命名风格
示例代码
const str hello_world_this_is_a_test;
const newStr str.replace(/_([a-z])/g, function(match, p1) {return p1.toUpperCase();
});
console.log(newStr.replace(/^[a-z]/, function(s) {return s.toUpperCase();
})); // HelloWorldThisIsATest解释
在首先使用正则表达式 /_([a-z])/g 匹配符合蛇形命名风格的字符串中的 _ 后面的小写字母并将其替换为对应的大写字母。其中 /g 表示全局匹配可以匹配字符串中的所有符合条件的子字符串。
在 replace() 方法中第二个参数可以是一个函数可以在函数中对匹配到的字符串进行更复杂的处理。函数接收两个参数第一个参数是匹配到的字符串第二个参数是匹配到的子串中的第一个括号里的内容。
在这个例子中我们使用匿名函数来处理匹配到的字符串将匹配到的小写字母转换为对应的大写字母并返回。匹配到的字符串将被替换为返回值。
由于在驼峰命名风格中首字母也是大写的因此我们还需要再次使用字符串的 replace() 方法将第一个字符转换为大写字母。
2.14、驼峰命名风格首字母小写转换为蛇形命名风格下划线分隔
示例代码
const str helloWorldThisIsATest;
const newStr str.replace(/[A-Z]/g, function(match) {return _ match.toLowerCase();
});
console.log(newStr.replace(/^_/, )); // hello_world_this_is_a_test解释
使用正则表达式 /[A-Z]/g 匹配符合驼峰命名风格的字符串中的大写字母并在其前面添加 _然后将其转换为小写字母。其中 /g 表示全局匹配可以匹配字符串中的所有符合条件的子字符串。
在 replace() 方法中第二个参数也是一个函数它接收一个参数就是匹配到的字符串。我们在函数中将匹配到的大写字母转换为 _ 对应的小写字母并返回处理后的字符串。
由于我们添加了一个多余的 _因此我们还需要再次使用字符串的 replace() 方法将第一个字符的 _ 去除。
2.15、url参数解析
将 URL 中的参数解析出来可以使用正则表达式和字符串的 match() 方法实现。
示例代码
const url https://www.example.com/path?foobarbazquxhelloworld;
const params url.match(/\?./)[0].slice(1).split();
const queryParams {};
for (let i 0; i params.length; i) {const param params[i].split();queryParams[param[0]] decodeURIComponent(param[1]);
}
console.log(queryParams); // {foo: bar, baz: qux, hello: world}解释
使用正则表达式 /\?./ 匹配 URL 中的参数部分。其中 \? 匹配 ? 字符. 匹配一个或多个字符。然后我们使用数组的 slice() 方法去除第一个字符 ?。再使用字符串的 split() 方法将参数字符串分割成参数名和参数值的数组。
最后我们将参数名和参数值存储在一个对象中使用 decodeURIComponent() 方法对参数进行解码以避免出现转义字符的问题。
注意在实际开发中我们需要对 URL 参数进行一些安全性处理例如对特殊字符进行转义以避免 XSS 攻击等漏洞。
2.16、检验密码强度
密码强度通常是根据密码中包含的字符种类和密码长度来判断的。我们可以使用正则表达式来检验密码是否包含了足够多的字符种类和长度。
示例代码
function testPasswordStrength(password) {const strongRegex /^(?.*[a-z])(?.*[A-Z])(?.*\d)(?.*[$!%*?])[A-Za-z\d$!%*?]{8,}$/;const mediumRegex /^(?.*[a-z])(?.*[A-Z])(?.*\d)[A-Za-z\d$!%*?]{6,}$/;if (strongRegex.test(password)) {return strong;} else if (mediumRegex.test(password)) {return medium;} else {return weak;}
}解释
序号正则解释1^(?.*[a-z])密码中必须至少包含一个小写字母2(?.*[A-Z])密码中必须至少包含一个大写字母3(?.*\d)密码中必须至少包含一个数字4(?.*[$!%*?])密码中必须至少包含一个特殊字符5[A-Za-z\d$!%*?]{8,}密码必须至少包含 8 个字符可以是大写字母、小写字母、数字和特殊字符中的任意组合如果密码强度符合要求会返回 strong、medium 或 weak 之一。可以根据需要进一步处理这些结果
三、element ui自定义校验
const validateEmailAddress (rule, value, callback) {console.log(160, value)if (value ) {callback(new Error(请输入邮箱地址));} else {const reg new RegExp(^[a-z0-9]([._\\-]*[a-z0-9])*(163.){1,63}[a-z0-9]$);if(!reg.test(value)){callback(new Error(请输入163邮箱地址));} else {callback();}}}; form action2 输入input typetext namemazey idmazey placeholder请输入邮箱3 input typebutton value验证 onclickcheck();4 /form5 6 script7 function check(){8 var reg new RegExp(^[a-z0-9]([._\\-]*[a-z0-9])*([a-z0-9][-a-z0-9]*[a-z0-9].){1,63}[a-z0-9]$); //正则表达式9 var obj document.getElementById(mazey); //要验证的对象10 if(obj.value ){ //输入不能为空11 alert(输入不能为空!);12 return false;13 }else if(!reg.test(obj.value)){ //正则验证不通过格式不对14 alert(验证不通过!);15 return false;16 }else{17 alert(通过);18 return true;19 }20 }21 /script
浏览器测试 四、欢迎交流指正关注我一起学习
参考链接
JS邮箱验证-正则验证 - 陈林实验室 - 博客园
