正则表达式
如图所示：
一.先附上一部分代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>正则表达式验证</title>
</head>
<script src="js/verify.js"></script>
<script>
function verify() {
//用户名校验
var name1 = /^[A-Z][0-9A-Za-z_][a-zA-Z0-9_]{5,19}$/;
rag("name",name1);
//密码
var pwd1 = /^[A-Z][A-Za-z0-9]\w{7,14}.{1,20}$/;
rag("pwd",pwd1);
//确认密码
var confirmPwd1 = /^[A-Z][A-Za-z0-9]\w{7,14}.{1,20}$/;
rag("confirmPwd",confirmPwd1);
//邮箱
var email1 = /^[A-z0-9]+@[a-z0-9]+.com$/;
rag("email",email1);
//手机号
var phone1 = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/
rag("phone",phone1);
//身份证号
var eID1 = /(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
rag("eID",eID1);
//地址
var address1 = /^[\u4E00-\u9FA50-9A-Za-z\u4E00-\u9FA5]+$/;
rag("address",address1);
}
</script>
<body>
<table align="center" border="1" style="border-collapse: collapse;">
<tr>
<td>用户名:</td>
<td><input type="text" id="name" /><span id="nameResult" style="font-size: 24px"></span></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="text" id="pwd" /><span id="pwdResult" style="font-size: 24px"></span></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="text" id="confirmPwd" /><span id="confirmPwdResult" style="font-size: 24px"></span></td>
</tr>
<tr>
<td>邮箱:</td>
<td><input type="text" id="email" /><span id="emailResult" style="font-size: 24px"></span></td>
</tr>
<tr>
<td>手机号:</td>
<td><input type="text" id="phone" /><span id="phoneResult" style="font-size: 24px"></span></td>
</tr>
<tr>
<td>身份证号:</td>
<td><input type="text" id="eID" /><span id="eIDResult" style="font-size: 24px"></span></td>
</tr>
<tr>
<td>地址:</td>
<td><input type="text" id="address" /><span id="addressResult" style="font-size: 24px"></span></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button" value="登录验证" onclick="verify()" /></td>
</tr>
</table>
</body>
</html>
二.这里是封装的JS代码可以直接调用
/**
* 输入框的校验
* @param {Object} eleId
* @param {Object} rule
*/
function rag(eleId,rule){
var inputValue = document.getElementById(eleId).value;
var result = rule.test(inputValue.trim());
if (result) {
document.getElementById(eleId + "Result").innerHTML = "✔";
document.getElementById(eleId + "Result").style.color = "blue";
} else {
document.getElementById(eleId + "Result").innerHTML = "✘";
document.getElementById(eleId + "Result").style.color = "red";
}
}
当然这部分代码还可以优化，就是显示验证通过或者失败的代码
附上
var span = document.createElement("span");//创建一个dom元素
document.getElementById(eleId).parentElement.appendChild(span);
转载：https://blog.csdn.net/weixin_43330884/article/details/102520357
查看评论