老师帮忙检查一下
来源：4-8 编程练习
嫩芽o
2020-05-25 11:48:09
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
header{
height: 60px;
background-color: rgb(0,0,255);
line-height: 60px;
font-size: 30px;
padding: 5px 0 10px 20px;
color: white;
}
div.wrap{
width: 1000px;
margin: 0 auto;
height: 800px;
}
p{
margin-left: 300px;
margin-top: 20px;
}
p:last-child{
padding-left: 100px;
}
input.btn{
width: 60px;
height: 40px;
background-color: blue;
}
span{
color: red;
}
</style>
</head>
<body>
<header>用户注册</header>
<div class="wrap">
<p>用户名：<input type="text" name="username"> <span></span></p>
<p>登录密码：<input type="password" name="psw"> <span></span></p>
<p>确认密码：<input type="password" name="confirmpsw"> <span></span></p>
<p>姓名：<input type="text" name="truename"> <span></span></p>
<p>性别：<select>
<option value="male">男</option>
<option value="female">女</option>
</select></p>
<p>身份证号码：<input type="text" name="idcard"> <span></span></p>
<p>邮箱：<input type="text" name="email"> <span></span></p>
<p>手机号码：<input type="text" name="tel"> <span></span></p>
<p><input type="submit" name="sumbit" class="btn"></p>
</div>
<script type="text/javascript">
var input=document.getElementsByTagName('input'),
span=document.getElementsByTagName('span');
var username=input[0],
psw=input[1],
confirmpsw=input[2],
truename=input[3],
idcard=input[4],
email=input[5],
tel=input[6],
submit=input[7];
input[0].onblur=function(){
var pattern1=/^[a-zA-Z]?\w{5,19}$/;
if (pattern1.test(username.value)) {
span[0].innerHTML='ok';
} else{
span[0].innerHTML='6-20位字母、数字或“_”,字母开头';
}
}
input[1].onblur=function(){
var pattern2=/^\S{6,18}$/;
if (pattern2.test(psw.value)) {
span[1].innerHTML='ok';
} else{
span[1].innerHTML='6-18位，包括数字字母或符号，中间不能有空格';
}
}
input[2].onblur=function(){
if (confirmpsw.value===psw.value) {
span[2].innerHTML='ok';
} else{
span[2].innerHTML='两次输入密码不一致';
}
}
input[3].onblur=function(){
var pattern4=/^[\u4e00-\u9fa5]{2,4}$/;
if (pattern4.test(truename.value)) {
span[3].innerHTML='ok';
} else{
span[3].innerHTML='真实姓名，两位到四位的中文汉字';
}
}
input[4].onblur=function(){
var pattern6=/^(\d{15,15}|\d{17,17}(\d|x))$/i;
if (pattern6.test(idcard.value)) {
span[4].innerHTML='ok';
} else{
span[4].innerHTML='15位或者18位的数字，18位时最后一位可能是x';
}
}
input[5].onblur=function(){
var pattern7=/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
if (pattern7.test(email.value)) {
span[5].innerHTML='ok';
} else{
span[5].innerHTML='请输入正确的邮箱';
}
}
input[6].onblur=function(){
var pattern8=/^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,8}$/;
if (pattern8.test(tel.value)) {
span[6].innerHTML='ok';
} else{
span[6].innerHTML='请输入正确的手机号';
}
}
var check=0;
submit.onclick=function(){
for(var i=0;i<7;i++){
if(span[i].innerHTML=='ok'){
check++;
}
}
if (check==7) {
alert('验证成功');
}
}
</script>
</body>
</html>
这样可以吗
1回答
-
好帮手慕粉
2020-05-25
同学你好，用户名的正则实现的是不正确的：
用户名不能以数字开头，必须以字母开头。修改参考：
其余都是正确的。
如果我的回答帮助了你，欢迎采纳。祝学习愉快~
0
相似问题