一、正则基础语法
二、使用场景
2.1、校验中国大陆手机号的正则表达式
正则
/^1[3456789]\d{9}$/
解释
| 序号 | 正则 | 解释 |
| 1 | ^1 | 以数字 1 开头 |
| 2 | [3456789] | 第二位可以是 3、4、5、6、7、8、9 中的任意一个 |
| 3 | \d{9} | 后面是 9 个数字 |
示例代码
<template> <div class="regexp"> <el-input v-model="phoneNumber"></el-input> <el-button @click="isPhoneNumber">正则校验手机号码</el-button> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; let phoneNumber = ref('') const isPhoneNumber = () =>{ const reg = /^1[3456789]\d{9}$/; console.log(reg.test(phoneNumber.value)) } </script> <style scoped lang="less"> .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 = "example@mail.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、只能输入正整数
1. function isNumber(str) { 2. return /^\d+$/.test(str); 3. }
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
解释
| 序号 | 解释 |
| 1 | URL是否以http://或https://开头（可选） |
| 2 | 域名是否由字母、数字、下划线或短划线组成 |
| 3 | 域名后缀是否为2到3个字母或数字 |
| 4 | 端口号是否在1到5位数之间（可选） |
| 5 | URL路径是否以斜杠开头，后面跟着任意非空白字符（可选） |
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'); // false
2.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。
