4-8练习相关问题
来源：4-8 编程练习
田马达加斯加
2018-11-19 20:47:21
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>4-8修改版</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
ul,li{
list-style:none;
}
#wrap{
width:1000px;
background-color:#eee;
margin:0 auto;
}
#wrap .title{
height:30px;
line-height:30px;
font-size:16px;
padding-left:20px;
background:#3092d1;
color:#fff;
}
#wrap #reginList{
width:500px;
margin:50px auto;
}
#wrap #reginList li{
line-height:50px;
}
#wrap #reginList label{
display:inline-block;
width:100px;
text-align:right;
margin-right:20px;
color:#666;
font-size:16px;
}
#wrap #reginList input,#wrap #reginList select{
border:1px solid #a9a9a9;
width:155px;
height:20px;
}
#wrap #reginList select{
width:145px;
}
#wrap #reginList label[for="sex"]{
margin-right:30px;
}
#wrap .regin-box #button{
width:70px;
height:35px;
border:1px solid #09529f;
border-radius:10px;
background:#2375ba;
margin:30px 0px 170px 400px;
}
</style>
</head>
<body>
<div id="wrap">
<div class="title">用户注册</div>
<div class="regin-box">
<ul id="reginList">
<li>
<label for="username">用户名:</label>
<input type="text" name="username" id="username"><span id="tips"></span></li>
</li>
<li>
<label for="password">登录密码:</label>
<input type="password" name="password" id="password"/><span id="tips"></span></li>
</li>
<li>
<label for="repassword">确认密码:</label>
<input type="password" name="repassword" id="repassword"/><span id="tips"></span></li>
</li>
<li>
<label for="relname">姓名:</label>
<input type="text" name="relname" id="relname"/><span id="tips"></span></li>
</li>
<li>
<label for="sex">性别:</label>
<select id="sex">
<option value="male">男</option>
<option value="female">女</option>
</select>
</li>
<li>
<label for="idNumber">身份证号码:</label>
<input type="text" name="idNumber" id="idNumber"/><span id="tips"></span></li>
</li>
<li>
<label for="email">邮箱:</label>
<input type="text" name="email" id="email"/><span id="tips"></span></li>
</li>
<li>
<label for="tel">手机号码:</label>
<input type="tel" name="tel" id="tel"/><span id="tips"></span>
</li>
</ul>
<input id="button" type="button" name="button" value="提交"/>
</div>
</div>
<script type="text/javascript">
var inputLists=document.getElementsByTagName('input');
var password=document.getElementById('password');
var repassword=document.getElementById('repassword');
var boolen=[];
// 定义一个对象来存放正则表达式
var regExp={
'username':/^[a-z]\w{5,19}$/,
'password':/^[^\s]{6,18}$/,
'repassword':function(){
return password.pat;
},
'relname' :/^[\u4e00-\u9fa5]{2,4}$/,
'idNumber':/^[\d]{17}[0-9X]$/,
'email' :/^(?:\w+\.)*\w+@(?:\w+\.)+[a-z]+$/,
'tel' :/^[1-9]\d{10}$/
};
// 定义一个对象来存放tipWords
var tipWords={
'username':"6-20位字母、数字或_，字母开头",
'password':"6-18位 数字、字母或符号，中间不能有空格",
'repassword':"请设置密码",
'relname' :"两位到四位中文",
'idNumber':"18位身份证号码",
'email' :"邮箱格式不正确",
'tel' :"电话号码不正确"
};
// 封装一个changeTips的函数
function changeTips(span,ele,index){
var checkResult=checkInput(ele,index);
if(checkResult){
span.innerHTML='ok';
}else{
span.innerHTML=tipWords[index];
}
span.style.color='red';
return checkResult;
}
function checkInput(ele,index){
if(index==='repassword'){
var result=repassword.value===password.value;
}else{
var pattern=regExp[index];
var str=ele.value;
var result=pattern.test(str);
}
return result;
}
for(var i=0,len=inputLists.length;i<len;i++){
(function(i){
inputLists[i].onblur=function(){
var span=this.nextSibling;
var tipIndex=this.id;
boolen[i]=changeTips(span,this,tipIndex);
};
})(i);
}
for(var i=0,lenght=boolen.length;i<length;i++){
if(boolean[i]){
alert('注册成功！');
}else{
alert('请将信息填写正确后进行提交！')
}
}
</script>
</body>
</html>
这个代码麻烦老师帮忙检查下
3回答
-
需要把input标签的按钮改为button标签：
因为之前按钮也是input标签，你使用js获取了全部的input标签进行了正则验证：
但是按钮是没有正则验证的，所以会报错。
自己修改测试下。
0 -
田马达加斯加
提问者
2018-11-20
<script type="text/javascript">
var inputLists=document.getElementsByTagName('input');
var password=document.getElementById('password');
var repassword=document.getElementById('repassword');
var button=document.getElementById('button');
var boolen=[];
// 定义一个对象来存放正则表达式
var regExp={
'username':/^[a-z]\w{5,19}$/,
'password':/^[^\s]{6,18}$/,
'repassword':function(){
return password.pat;
},
'relname' :/^[\u4e00-\u9fa5]{2,4}$/,
'idNumber':/^[\d]{17}[0-9X]$/,
'email' :/^(?:\w+\.)*\w+@(?:\w+\.)+[a-z]+$/,
'tel' :/^[1-9]\d{10}$/
};
// 定义一个对象来存放tipWords
var tipWords={
'username':"6-20位字母、数字或_，字母开头",
'password':"6-18位 数字、字母或符号，中间不能有空格",
'repassword':"请设置密码",
'relname' :"两位到四位中文",
'idNumber':"18位身份证号码",
'email' :"邮箱格式不正确",
'tel' :"电话号码不正确"
};
// 封装一个changeTips的函数
function changeTips(span,ele,index){
var checkResult=checkInput(ele,index);
if(checkResult){
span.innerHTML='ok';
}else{
span.innerHTML=tipWords[index];
}
span.style.color='red';
return checkResult;
}
function checkInput(ele,index){
var result;
if(index==='repassword'){
if(repassword.value){
result=repassword.value===password.value;
}else{
result=false;
}
}else{
var pattern=regExp[index];
var str=ele.value;
result=pattern.test(str);
}
return result;
}
for(var i=0,len=inputLists.length;i<len;i++){
(function(i){
inputLists[i].onblur=function(){
var span=this.nextSibling;
var tipIndex=this.id;
boolen[i]=changeTips(span,this,tipIndex);
};
})(i);
}
// for(var i=0,lenght=boolen.length;i<length;i++){
// button.onclick=function(){
// if(boolean[i]){
// alert('注册成功！');
// }else{
// alert('请将信息填写正确后进行提交！')
// }
// }
// }
button.onclick=function(){
if(boolen.length!=7){
alert('填写的格式不正确')
}else{
if(!boolen.indexOf(false)){
alert('填写的格式不正确');
}else{
alert('注册成功!');
}
}
}
</script>
我的代码在执行完后怎么总是报错
0 -
好帮手慕星星
2018-11-20
1、手机号码的验证规则可以再具体一些：
2、最后提交的时候可以不用进行for循环，在button的点击事件中判读：
如果boolen数组长度不是7，也是信息没有填完整，提示错误信息。如果长度为7，再判断数组中是否有false，也就是填写的是否正确，再分别提示信息。
自己测试下，祝学习愉快！
0
