4-8练习相关问题
来源：4-8 编程练习
田马达加斯加
2018-11-19 19:13:23
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>qq号，昵称和密码</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="mail" 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 reginList=document.getElementById('reginList');
// 定义一个对象来存放正则表达式
var regExp={
'username':/^[a-z]\w{5,19}$/,
'password':/^[^\s]{6,18}$/,
'relname' :/^[\u4e00-\u9fa5]{2,4}$/,
'idNumber':/^[\d]{17}[0-9X]$/,
'mail' :/^(?:\w+\.)*\w+@(?:\w+\.)+[a-z]+$/,
'tel' :/^[1-9]\d{10}$/
};
// 封装一个验证是否填写正确的函数
function checkRegin(pattern,str){
var checkResult=pattern.test(str);
return checkResult;
}
// 封装一个changeTips的函数
function changeTips(span){
if(checkResult){
span.innerHTML='ok';
}else{
span.innerHTML=tipWord;
}
span.style.color='red';
}
var boolen1,boolen2,boolen3,boolen4,boolen5,boolen6;
function whichInput(ele){
if(ele.id==='username'){
var pattern=regExp.username;
var str=ele.value;
tipsWord="6-20位字母、数字或_，字母开头";
boolen1=checkRegin(pattern,str);
}else if(ele.id==='password'){
pattern=regExp.password;
var str=ele.value;
tipsWord="6-18位 数字、字母或符号，中间不能有空格";
boolen2=checkRegin(pattern,str);
}else if(ele.id==='relname'){
pattern=regExp.relname;
var str=ele.value;
tipsWord="两位到四位中文";
boolen3=checkRegin(pattern,str);
}else if(ele.id==='idNumber'){
pattern=regExp.idNumber;
var str=ele.value;
tipsWord="两位到四位中文";
boolen4=checkRegin(pattern,str);
}else if(ele.id==='mail'){
pattern=regExp.mail;
var str=ele.value;
tipsWord="邮箱格式不正确";
boolen5=checkRegin(pattern,str);
}else{
pattern=regExp.tel;
var str=ele.value;
tipsWord="手机号码不正确";
boolen6=checkRegin(pattern,str);
}
}
for(var i=0,len=inputLists.length;i<len;i++){
inputLists[i].onblur=function(){
var span=this.nextSibling;
whichInput(this);
}
}
</script>
</body>
</html>
老师我的怎么没有反应
1回答
-
好帮手慕星星
2018-11-20
代码中没有调用提示信息的方法，参考：
可以将span定义成全局的变量，其它方法中直接使用即可。
这样修改之后，输入框失去焦点之后，后面会有提示信息，但是在for循环中的时候，包括了确认密码的输入框，而正则以及提示信息中是没有关于确认密码的判断的，所以后面提示信息会有失误，自己可以测试完善下这个问题。
祝学习愉快！
0
