老师请帮忙检查一下正则的问题

来源：4-8 编程练习

前端小白白白白白白

2020-05-28 09:35:19

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.container{
width: 800px;
margin: 0 auto;
}
.title{
height: 40px;
padding: 0 20px;
font-size: 20px;
color: white;
line-height: 40px;
background-color: rgb(48,146,209);
}
.main{
background-color: rgb(238,238,238);
height: 600px;
}
.content{
    width: 500px;
margin: 0 auto;
border: 1px solid black;
}
span{
color: #75b178;
}
#tips{
color: red;
display: none;
}
input,select{
width: 100px;
vertical-align: text-bottom
}
.input-group{
line-height: 60px;
}
</style>
</head>
<body>
<div class="container">
<p class="title">用户注册</p>
<div class="main">
<div class="content">
<div class="input-group">
<span>用户名:</span>
<input type="text" />
<span id="tips">OK</span>
</div>
<div class="input-group">
<span>登录密码:</span>
<input type="password" />
<span id="tips">OK</span>
</div>
<div class="input-group">
<span>确认密码:</span>
<input type="password" />
<span id="tips">OK</span>
</div>
<div class="input-group">
<span>姓名</span>
<input type="text" />
<span id="tips">OK</span>
</div>
<div class="input-group">
<span>性别:</span>
<select>
<option>男</option>
<option>女</option>
</select>
</div>
<div class="input-group">
<span>身份证号码:</span>
<input type="text" />
<span id="tips">OK</span>
</div>
<div class="input-group">
<span>邮箱:</span>
<input type="text" />
<span id="tips">OK</span>
</div>
<div class="input-group">
<span>手机号码:</span>
<input type="text" />
<span id="tips">OK</span>
</div>
<button type="button">提交</button>
</div>
</div>
</div>
<script type="text/javascript">
var tips = document.querySelectorAll("#tips")
var btn = document.querySelector("button")
var regS = {
0: /^[a-z]\w{5,19}$/, //用户名
1: /^\w{6,18}$/, //密码
2: /^\w{6,18}$/, //确认密码
3: /^[\u4e00-\u9fa5]{2,4}$/, //名字
4: /^(\d{14}|\d{17})(X|\d)$/, //身份证
5: /^\w+@([a-zA-Z]+\.)+[a-z]{2,4}$/, //邮箱
6: /^1((30)|(31)|(32)|(33)|(34)|(35)|(36)|(37)|(38)|(39)|(47)|(50)|(51)|(52)|(53)|(55)|(56)|(57)|(58)|(59)|(80)|(82)|(85)|(86)|(87)|(88)|(89))\d{8}$/
}
var tipsss = {
0: "6-20位的字母、数字或'_',字母开头",
1: "数字、字母或符号，中间不能有空格",
2: "两次输入密码不一致！",
3: "两到四位的中文",
4: "请输入18位的身份证号码",
5: "邮箱格式不正确",
6: "电话号码不正确"
}
btn.onclick = function() {
var num = 0
for (i = 0; i < tips.length; i++) {
num = num + test(i)
}
if(num==7){
alert("注册成功")
}
}
for (var i = 0; i < tips.length; i++) {
trueORfalse(tips[i], i)
}

function trueORfalse(ele, index) {
ele.previousElementSibling.onblur = function() {
test(index)
}
}

function test(index) {
if (index == 2) {
var reg = new RegExp(tips[1].previousElementSibling.value)
console.log(reg)
} else {
var reg = regS[index]
}
if (!reg.test(tips[index].previousElementSibling.value)) {
tips[index].style.display = "inline"
tips[index].innerHTML = tipsss[index]
} else {
tips[index].style.display = "inline"
tips[index].innerHTML = "正确"
return 1
}
}
</script>
</body>
</html>

写回答

1回答