前言
很多时候我们需要校验用户输入的值是否正确,如果格式固定的,直接把错误的值传给后端显然是不合理的,所以我们要直接在前端进行正则校验。
一、手机号校验
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("请输入数值!");
}
}
总结
以上总结了一些常用的正则校验,欢迎各位补充分享。