运用js的正则表达式校验用户身份信息
程序员文章站
2022-07-13 13:47:09
...
下面是代码展示，这只是初级的代码，还可以再加以简化
但是什么是正则表达式，我很懒就不想写了，以后可能会发一些相关的内容
什么是正则表达式
正则表达式时一种高级的处理字符的一种规则
正则表达式是由a-z等一些特殊的元字符组成的
正则表达式是由一个字符序列形成的搜索模式。
当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。
这就是正则表达式，不理解可以去博客园，也懒得解释
正则表达式的作用:
1，灵活性、逻辑性和功能性非常的强
2，可以迅速地用极简单的方式达到字符串的复杂控制，规定输入格式
3，对于刚接触的人来说，比较晦涩难懂，刚开始我也很懵逼
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<center>
<br/><br/>
<h2>信息校验</h2>
用户名 ： <input type="text" id="name" style="width: 300px;height: 40px"><span id="nameResult"></span><br/><br/>
密码 ： <input type="text" id="pwd" style="width: 300px;height: 40px"><span id="pwdResult"></span><br/><br/>
确认密码： <input type="text" id="sure" style="width: 300px;height: 40px"><span id="sureResult"></span><br/><br/>
邮箱 ： <input type="text" id="emli" style="width: 300px;height: 40px"><span id="emliResult"></span><br/><br/>
手机号 ： <input type="text" id="phone" style="width: 300px;height: 40px"><span id="phoneResult"></span><br/><br/>
身份证号： <input type="text" id="ID" style="width: 300px;height: 40px"><span id="IdResult"></span><br/><br/>
地址 ： <input type="text" id="pace" style="width: 300px;height: 40px"><span id="paceResult"></span><br/><br/>
<input type="button" value="点击校验" onclick="verify()" style="width: 200px;height: 50px" >
</center>
<script type="text/javascript">
function verify() {
var name = document.getElementById("name").value;
var pwd = document.getElementById("pwd").value;
var sure = document.getElementById("sure").value;
var emli = document.getElementById("emli").value;
var phone = document.getElementById("phone").value;
var ID = document.getElementById("ID").value;
var pace = document.getElementById("pace").value;
//1:用户名: 大写字母开头 6-20位字符(不允许有符号但是允许有_)
var nameL =/^[A-Z][A-Za-z][a-zA-Z0-9_]{5,19}$/;
//2:密码：大写开头 数字字母符号混合 8-15位
var pwdL = /^[A-Z][A-Za-z0-9]\w{7,14}.{1,30}$/;
//3:确认密码 大写开头 数字字母符号混合 8-15位
var sureL = /^[A-Z][A-Za-z0-9]\w{7,14}.{1,30}$/;
//4:邮箱 邮箱格式
var emliL = /^[A-Z0-9]aaa@qq.com[a-z0-9]+.com$/;
//5:手机号 手机号格式
var phoneL = /^[1][3,4,5,6,7,8][0-9]{9}$/;
//6:身份证号 身份证号格式
var IDL = /(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
//7:地址 中文开头 数字 - 字母 中文混合
var paceL = /([^\x00-\xff]|[A-Za-z0-9_])+$/;
var result = nameL.test(name.trim());
var result1 = pwdL.test(pwd.trim());
var result2 = sureL.test(sure.trim());
var result3 = emliL.test(emli.trim());
var result4 = phoneL.test(phone.trim());
var result5 = IDL.test(ID.trim());
var result6 = paceL.test(pace.trim());
if (result) {
document.getElementById("nameResult").innerText = "✔";
document.getElementById("nameResult").style.color = "green";
} else {
document.getElementById("nameResult").innerText = "✘";
document.getElementById("nameResult").style.color = "red";
}
if (result1) {
document.getElementById("pwdResult").innerHTML = "✔";
document.getElementById("pwdResult").style.color = "green";
} else {
document.getElementById("pwdResult").innerText = "✘";
document.getElementById("pwdResult").style.color = "red";
}
if (result2) {
document.getElementById("sureResult").innerText = "✔";
document.getElementById("sureResult").style.color = "green";
} else {
document.getElementById("sureResult").innerText = "✘";
document.getElementById("sureResult").style.color = "red";
}
if (result3) {
document.getElementById("emliResult").innerText = "✔";
document.getElementById("emliResult").style.color = "green";
} else {
document.getElementById("emliResult").innerText = "✘";
document.getElementById("emliResult").style.color = "red";
}
if (result4) {
document.getElementById("phoneResult").innerText = "✔";
document.getElementById("phoneResult").style.color = "green";
} else {
document.getElementById("phoneResult").innerText = "✘";
document.getElementById("phoneResult").style.color = "red";
}
if (result5) {
document.getElementById("IdResult").innerText = "✔";
document.getElementById("IdResult").style.color = "green";
} else {
document.getElementById("IdResult").innerText = "✘";
document.getElementById("IdResult").style.color = "red";
}
if (result6) {
document.getElementById("paceResult").innerText = "✔";
document.getElementById("paceResult").style.color = "green";
} else {
document.getElementById("paceResult").innerText = "✘";
document.getElementById("paceResult").style.color = "red";
}
}
</script>
</body>
</html>
这是出来的效果，可以看一下
输入一些字符，符号，数字，点击校验后，判断是否符合代码中规定好的格式
由于图片中后面几项没有输入痕迹（空），就显示为错误
上一篇： FFmpeg filter语法使用介绍
下一篇： P3382 【模板】三分法