【前端】正则表达式校验

---

前言

很多时候我们需要校验用户输入的值是否正确，如果格式固定的，直接把错误的值传给后端显然是不合理的，所以我们要直接在前端进行正则校验。

---

一、手机号校验

function checkPhoneNumber(phoneNumber){
	let phone=/^1[3|4|5|6|7|8|9][0-9]\d{8}$/;
	if (11 != phoneNumber.length && !phone.test(phoneNumber)){
		alert("请输入正确的11位手机号");
	}
}

二、身份证号

function checkIdNumber(idNumber){
	let id= /^(\d{15}$|^\d{18}$|^\d{17}(\d|X))$/;
	let number = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
	if (!id.test(idNumber) || !number.test(idNumber)){
		alert("请输入正确的15或18位身份证号,末尾为大写X");
	}
}

三、姓名

function checkUserName(userName){
	let name = /^[\u4e00-\u9fa5]{2,6}$/;
	if (!name.test(userName)){
		alert("姓名只能用汉字,长度2-4位");
	}
}

四、两位小数

HTML

<label>测试金额：</label>
<div>
    <input onkeyup="limitmoney(this)" placeholder="请输入测试金额(最多保留2位小数)" type="text" required>
</div>

Js

/** 限制input输入2位小数 */
window.limitmoney = function(obj) {
   obj.value = obj.value.replace(/[^\d.]/g,"");  //清除“数字”和“.”以外的字符
   obj.value = obj.value.replace(/^\./g,""); //验证第一个字符是数字
   obj.value = obj.value.replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的
   obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
   obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');//只能输入两个小数
   if(obj.value.indexOf(".")< 0 && obj.value !=""){//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
      obj.value= parseFloat(obj.value);
   }
}

五、正整数

Js

function checkQuantity(quantity){
	var intmodel = /^\+?[0-9][0-9]*$/;
	if(quantity !="" && !intmodel.test(quantity)){
		alert("请输入正整数");
	}
}

或者使用 HTML：

<label>数量：</label>
<div>
    <input type="text" placeholder="请输入正整数" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}">
</div>

六、判断是否是数值

function checkNumber(number){
	// isNaN(inputData)不能判断空串或一个空格 
	/* 如果是一个空串或是一个空格，而 isNaN 是做为数字0进行处理的，
	而 parseInt 与 parseFloat 是返回一个错误消息，这个isNaN检查不严密而导致的。 */
	if (parseFloat(number).toString() == "NaN") {
		alert("请输入数值！");
	}
}

---

总结

以上总结了一些常用的正则校验，欢迎各位补充分享。