老师帮忙检查一下代码
来源：4-8 编程练习
陈立天
2020-03-04 18:20:31
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>pratice</title> <link rel="stylesheet" type="text/css" href="./pratice.css"> </head> <body> <div class="wrap"> <div class="header__box"> <p class="header-inner">用户注册</p> </div> <table class="table"> <tr> <td class="left">用户名：</td> <td class="middle"><input type="text" name="userName" id="userName"></td> <td class="right"><div class="tips"></div></td> </tr> <td class="left">登录密码：</td> <td class="middle"><input type="password" name="pwd" id="pwd"></td> <td class="right"><div class="tips"></div></td> </tr> <td class="left">确认密码：</td> <td class="middle"><input type="password" name="cfPwd" id="cfPwd"></td> <td class="right"><div class="tips"></div></td> </tr> <tr> <td class="left">姓名：</td> <td class="middle"><input type="text" name="name" id="fullname"></td> <td class="right"><div class="tips"></div></td> </tr> <tr> <td class="left">性别：</td> <td class="middle"> <select class="option" id="sex"> <option>男</option> <option>女</option> </select> </td> </tr> <tr> <td class="left">身份证号码：</td> <td class="middle"><input type="text" name="idNumber" id="idNumber"></td> <td class="right"><div class="tips"></div></td> </tr> <tr> <td class="left">邮箱：</td> <td class="middle"><input type="email" name="email" id="email"></td> <td class="right"><div class="tips"></div></td> </tr> <tr> <td class="left">手机号码：</td> <td class="middle"><input type="text" name="phoneNumber" id="phoneNumber"></td> <td class="right"><div class="tips"></div></td> </tr> <tr> <tr> <td colspan="3"><input type="submit" class="btn" id="subbtn"></td> </tr> </table> </div> <script type="text/javascript" src="./pratice.js"></script> </body> </html>
// 封装一个获取ID元素函数
function getElmById(id){
return document.getElementById(id);
}
// 获取所有元素
var userName=getElmById('userName');
var pwd=getElmById('pwd');
var cfPwd=getElmById('cfPwd');
var fullname=getElmById('fullname');
var idNumber=getElmById('idNumber');
var sex=getElmById('sex');
var email=getElmById('email');
var phoneNumber=getElmById('phoneNumber');
var subbtn=getElmById('subbtn')
var tips=document.getElementsByClassName('tips');
// 初始化表单
isTrue0=false,
isTrue1=false,
isTrue2=false,
isTrue3=false,
isTrue4=false,
isTrue5=false,
isTrue6=false;
//用户名正则验证，6-20位字母、数字或“_”，字母开头
userName.onblur=function(){
var pattern=/^\w{6,20}$/;
if(this.value==""){
tips[0].innerHTML="6-20位字母、数字或“_”，字母开头";
isTrue0=false;
}else{
if(this.value.match(pattern)){
tips[0].innerHTML="ok";
isTrue0=true;
}else{
tips[0].innerHTML="6-20位字母、数字或“_”，字母开头";
isTrue0=false;
}
}
}
//密码正则验证，数字、字母或符号，中间不能有空格---6-18位，包含数字、字母、符号
pwd.onblur=function(){
var pattern=/^[^\s]{6,18}$/;
if(this.value==""){
tips[1].innerHTML="6-18位，数字、字母或符号，中间不能有空格";
isTrue1=false;
}else{
if(this.value.match(pattern)){
tips[1].innerHTML="ok";
isTrue1=true;
}else{
tips[1].innerHTML="6-18位，数字、字母或符号，中间不能有空格";
isTrue1=false;
}
}
}
//请设置密码---请确认密码
cfPwd.onblur=function(){
if(isTrue1){
if(this.value==pwd.value){
tips[2].innerHTML="ok";
isTrue2=true;
}else{
tips[2].innerHTML="两次输入密码不一致";
isTrue2=false;
}
}else{
tips[2].innerHTML="";
isTrue2=false;
}
}
//两位到四位的中文---真实姓名为两位到四位的中文
fullname.onblur=function(){
var pattern=/^[\u4e00-\u9fa5]{2,4}$/;
if(this.value==""){
tips[3].innerHTML="两位到四位的中文";
isTrue3=false;
}else{
if(this.value.match(pattern)){
tips[3].innerHTML="ok";
isTrue3=true;
}else{
tips[3].innerHTML="真实姓名为两位到四位的中文";
isTrue3=false;
}
}
}
//请输入18位的身份证号码
idNumber.onblur=function(){
var pattern=/^[\d]{15}$|^[\d]{17}[\dxX]$/;
if(this.value==""){
tips[4].innerHTML="请输入身份证号码";
isTrue4=false;
}else{
if(this.value.match(pattern)){
tips[4].innerHTML="ok";
isTrue4=true;
}else{
tips[4].innerHTML="请输入15位或18位的身份证号码";
isTrue4=false;
}
}
}
//邮箱格式不正确
email.onblur=function(){
var pattern=/^\w+@(?:[\w+\.]+)+(?:[a-z]{2,})$/;
if(this.value==""){
tips[5].innerHTML="请输入邮箱"
isTrue5=false;
}else{
if(this.value.match(pattern)){
tips[5].innerHTML="ok";
isTrue5=true;
}else{
tips[5].innerHTML="邮箱格式不正确"
isTrue5=false;
}
}
}
//邮箱格式不正确
phoneNumber.onblur=function(){
var pattern=/^[\d]{11}$/;
if(this.value==""){
tips[6].innerHTML="请输入电话号码"
isTrue6=false;
}else{
if(this.value.match(pattern)){
tips[6].innerHTML="ok";
isTrue6=true;
}else{
tips[6].innerHTML="电话号码不正确"
isTrue6=false;
}
}
}
// //提交按钮验证
subbtn.onclick=function(){
if(isTrue0 && isTrue1 && isTrue2 && isTrue3 && isTrue4 && isTrue5 && isTrue6){
alert('验证成功');
}
}*{
padding: 0;
margin: 0;
}
.wrap{
width: 800px;
height: 500px;
background-color: #eee;
margin: 0 auto;
}
.header__box{
width: 800px;
height: 40px;
background-color: #00bfff;
color: #fff;
text-indent: 20px;
line-height: 40px;
}
.table{
width: 100%;
text-align: center;
margin-top: 50px;
}
.left{
width: 280px;
text-align: right;
}
.middle{
width: 180px;
text-align: left;
}
.right{
width: 0px;
font-size: 12px;
/*background-color: blue;*/
text-align: left;
color: red;
}
tr{
height: 35px;
}
.option{
width: 165px;
}
.btn{
width: 80px;
height: 30px;
background-color: #2fafda;
border-radius: 7px;
}写回答
2回答
-
好帮手慕夭夭
2020-03-04
同学你好，用户名开头不是首字母也验证成功了：
开头应该是字母，规则参考如下修改：
另外，这里用循环也并不会简化代码。这里老师提供另一个一个思路：
定义一个数组arr，里面放7个元素，元素默认都是false 。当验证第一个规则时，可以通过arr[0]获取第一个元素。例如用户名验证正确，那么就设置arr[0]=true 。通过这种数组的形式，就不用定义那么多变量了。然后在添加按钮事件中，检测数组中是否含有false即可。不过同学的这种方式就可以了，本题的效果本身就是比较复杂，没有特别省事的办法。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0 -
陈立天
提问者
2020-03-04
有没有还需要优化的地方？
还有就是这里：
isTrue0=false,
isTrue1=false,
isTrue2=false,
isTrue3=false,
isTrue4=false,
isTrue5=false,
isTrue6=false;
能不能用循环来写？？ 那要怎么写？
0
相似问题