老师帮我看一下，应该怎么改进？
来源：4-8 编程练习
都知欢聚最难得
2019-10-24 17:12:14
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册表</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
font-family: "微软雅黑";
}
.box{
width: 800px;
margin: 0 auto;
}
.title{
width: 780px;
height: 40px;
padding-left: 20px;
background-color:#6bbefd;
line-height: 40px;
font-size: 16px;
color: white;
text-align: left;
}
.content{
background-color: #f4f4f4;
width: 800px;
padding-top: 30px;
padding-bottom: 15px;
}
.form{
margin-left: 260px;
}
.tip{
font-size: 10px;
color: red;
text-align: left;
padding-left: 10px;
line-height: 30px;
display: none;
}
.trname{
font-size: 14px;
line-height: 30px;
}
tr{
height: 30px;
}
input{
height: 20px;
width: 160px;
}
select{
height: 24px;
width: 164px;
}
.subbtn{
display: block;
margin: 40px auto;
height: 30px;
width: 65px;
}
</style>
</head>
<body>
<div class="box">
<p class="title">用户注册</p>
<div class="content">
<table class="form">
<tr>
<td class="trname">用户名：</td>
<td><input class="username" type="text" name=""></td>
<td class="tip">6-20位字母、数字或“_”，字母开头</td>
</tr>
<tr>
<td class="trname">登录密码：</td>
<td><input class="userpsd" type="text" name=""></td>
<td class="tip">数字、字母或符号，中间不能有空格</td>
</tr>
<tr>
<td class="trname">确认密码：</td>
<td><input class="confirmpsd" type="text" name=""></td>
</tr>
<tr>
<td class="trname">姓名：</td>
<td><input class="realname" type="text" name=""></td>
<td class="tip">两位到四位的中文</td>
</tr>
<tr>
<td class="trname">性别：</td>
<td>
<select class="gender">
<option value="boy">男</option>
<option value="girl" selected>女</option>
</select>
</td>
</tr>
<tr>
<td class="trname">身份证号：</td>
<td><input class="idcardnum" type="text" name=""></td>
<td class="tip">请输入身份证号码</td>
</tr>
<tr>
<td class="trname">邮箱：</td>
<td><input class="emailid" type="text" name=""></td>
<td class="tip">请输入邮箱</td>
</tr>
<tr>
<td class="trname">手机号码：</td>
<td><input class="phonenum" type="text" name=""></td>
<td class="tip">请输入电话号码</td>
</tr>
</table>
<button class="subbtn">提交</button>
</div>
</div>
<script type="text/javascript">
var userName=document.getElementsByClassName('username'),
userPsd=document.getElementsByClassName('userpsd'),
realName=document.getElementsByClassName('realname'),
idCardNum=document.getElementsByClassName('idcardnum'),
emailId=document.getElementsByClassName('emailid'),
phoneNum=document.getElementsByClassName('phonenum'),
tip=document.getElementsByClassName('tip');
userName[0].onblur=function(){
var pattern=/^[a-zA-Z]\w{5,19}$/;
if(this.value==''){
tip[0].style.display='block';
}else if(this.value.match(pattern)){
tip[0].style.display='block';
tip[0].innerHTML="OK";
}else{
tip[0].style.display='block';
tip[0].innerHTML="6-20位字母、数字或“_”，字母开头";
}
}
userPsd[0].onblur=function(){
var pattern=/^[a-zA-Z]\w{5,17}$/;
if(this.value==''){
tip[1].style.display='block';
}else if(this.value.match(pattern)){
tip[1].style.display='block';
tip[1].innerHTML="OK";
}else{
tip[1].style.display='block';
tip[1].innerHTML="数字、字母或符号，中间不能有空格";
}
}
realName[0].onblur=function(){
var pattern=/^[\u4e00-\u9fa5]{2,4}$/;
if(this.value==''){
tip[2].style.display='block';
}else if(this.value.match(pattern)){
tip[2].style.display='block';
tip[2].innerHTML="OK";
}else{
tip[2].style.display='block';
tip[2].innerHTML="两位到四位的中文";
}
}
idCardNum[0].onblur=function(){
var pattern=/^\d{15}|\d{18}$/;
if(this.value==''){
tip[3].style.display='block';
}else if(this.value.match(pattern)){
tip[3].style.display='block';
tip[3].innerHTML="OK";
}else{
tip[3].style.display='block';
tip[3].innerHTML="请输入身份证号码";
}
}
emailId[0].onblur=function(){
var pattern=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
if(this.value==''){
tip[4].style.display='block';
}else if(this.value.match(pattern)){
tip[4].style.display='block';
tip[4].innerHTML="OK";
}else{
tip[4].style.display='block';
tip[4].innerHTML="请输入正确邮箱地址";
}
}
phoneNum[0].onblur=function(){
var pattern=/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
if(this.value==''){
tip[5].style.display='block';
}else if(this.value.match(pattern)){
tip[5].style.display='block';
tip[5].innerHTML="OK";
}else{
tip[5].style.display='block';
tip[5].innerHTML="请输入11位手机号码";
}
}
</script>
</body>
</html>写回答
1回答
-
同学你好，1、密码要实现的是如下：
但是当前的正则实现的效果是与用户名一致的（个数不一致）。且使用其他字符会报错，建议：可以修改为：
2、密码输入应该是隐藏的，建议：类型可以设置为password，例：
3、身份证这里，输入16，17位的时候，也是提示正确，如下：
且18位的时候，最后一位可能是x，建议，可以修改为：
4、点击“提交”按钮的时候，验证通过则弹出验证通过。建议：可以给每个加一个标志，点击提交的时候，判断上面的几个的标志，若全是正确的，则都通过了，则提示验证通过。
希望能帮助到你，欢迎采纳。
祝学习愉快！
0
相似问题