在学习js制作表单登录界面遇到的问题
我发现一个问题,在登录框输入正确的登录名后,我单击输入框外面,登录框是提示成功了,但是当我没有改变登录框中的值,只是在框中单击了一下,在再登录框外面单击一下,登录框就提示我输入的登录名不合法了,这是怎么回事呢?怎么处理这个问题呢?
我发现一个问题,在登录框输入正确的登录名后,我单击输入框外面,登录框是提示成功了,但是当我没有改变登录框中的值,只是在框中单击了一下,在再登录框外面单击一下,登录框就提示我输入的登录名不合法了,这是怎么回事呢?怎么处理这个问题呢?
2015-11-04
这个是正则使用的问题。
var pw = /^[a-zA-Z]{1}[\w\d]{4,7}$/g; //当鼠标离开时发生的事件 //判断登录名事件 d_input.onblur = function () { var re = /^[\u4e00-\u9fa5]{3}$/g; if (re.test(this.value)) { dp.innerHTML = "OK!"; dp.style.color = "green"; d_i.style.visibility = "hidden"; } else if (this.value == "") { dp.innerHTML = "登录名不能为空!"; dp.style.color = "red"; d_i.style.visibility = "hidden"; }else { dp.innerHTML = "登录名使用三个中文"; dp.style.color = "red"; } };
这里是把
var re = /^[\u4e00-\u9fa5]{3}$/g; //移动到了d_input.onblur里面。
因为如果放到外面的话 re.test(this.value) 的值会一次true 一次false 交替着出现。即使this.value的值一直是3个中文。详细的原因你可以去查一下正则表达的用法 ,尤其是关于全局匹配的(g)
html代码
58.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="58.css">
<script type="text/javascript" src="58.js"></script>
</head>
<body>
<div id="main">
<div>
<label>
<span>
登录名:
</span>
<input type="text"/>
</label>
<p>只能输入三个中文名作为登录名!</p>
<i>0个中文</i>
</div>
<div>
<label>
<span>
密码:
</span>
<input type="text"/>
</label>
<p >要求密码在5到8个字符之间,不能为中文,开头为英文,其余的是数字或者为英文</p>
<i>0个字符</i>
</div>
<div>
<label>
<span>
确认密码:
</span>
<input type="password"/>
</label>
<p></p>
</div>
<input type="submit" id="submit"/>
</div>
</body>
</html>
58.js
//排除是否全是数字或者一个字符
function getStr(str,n){
var num=0;
for(var i=0;i<str.lengthl;i++){
if(str.charAt(i)==n){
num++;
}
}
return num;
}
//若为汉字这以两个字符计算
function getLength(str){
return str.replace(/[^\x00-xff]/g,"xx").length;
}
var length=0;
window.onload=function(){
//获取P的对象集合
var ps=document.getElementsByTagName("p");
//获取登录名的提示语
var dp=ps[0];
//获取密码的提示语
var pp=ps[1];
//获取确认密码的提示语
var zpp=ps[2];
//获取input的对象集合
var inputs=document.getElementsByTagName("input");
//获取登录名的对象
var d_input=inputs[0];
//获取密码框对象
var p_input=inputs[1];
//获取确认密码框对象
var zp_input=inputs[2];
//获取计数i的对象集合
var counts=document.getElementsByTagName("i");
//获取登录名的计数i的个数
var d_i=counts[0];
//获取密码的计数个数
var pw_i=counts[1];
//鼠标进入到登录框时提示语出现
d_input.onfocus=function(){
dp.style.visibility="visible";
};
//鼠标进入密码框时提示语出现
p_input.onfocus=function(){
pp.style.visibility="visible";
};
//匹配登录名的正则表达式
var re=/^[\u4e00-\u9fa5]{3}$/g;
var pw=/^[a-zA-Z]{1}[\w\d]{4,7}$/g;
//当鼠标离开时发生的事件
//判断登录名事件
d_input.onblur=function(){
if(re.test(this.value)){
dp.innerHTML="OK!";
dp.style.color="green";
d_i.style.visibility="hidden";
}else if(this.value==""){
dp.innerHTML="登录名不能为空!";
dp.style.color="red";
d_i.style.visibility="hidden";
}
else{
dp.innerHTML="登录名使用三个中文";
dp.style.color="red";
}
};
//密码框鼠标离开时判断密码是否错误
p_input.onblur=function(){
if(pw.test(this.value)){
pp.innerHTML="OK!";
pw_i.style.visibility="hidden";
pp.style.color="green";
}else if(this.value==""){
pw_i.style.visibility="hidden";
pp.innerHTML="密码不能为空!";
pp.style.color="red";
}
else{
pp.innerHTML="5到8个字符之间,不能为中文,开头为英文,其余的是数字或者为英文";
pp.style.color="red";
}
};
//登录名的中文个数记录
d_input.onkeyup=function(){
d_i.style.visibility="visible";
var length=getLength(this.value);
d_i.innerHTML=length/2+'个中文';
if(length==1){
d_i.style.visibility="hidden";
}
};
//密码的字符个数记录
p_input.onkeyup=function(){
pw_i.style.visibility="visible";
var length=getLength(this.value);
pw_i.innerHTML=length+'个字符';
};
//再次确认密码是否匹配
zp_input.onblur=function(){
if(this.value==p_input.value){
zpp.style.visibility="visible";
zpp.innerHTML="OK!";
zpp.style.color="green";
}else if(this.value==""){
zpp.style.visibility="visible";
zpp.innerHTML="确认密码不能为空!";
zpp.style.color="red";
}else{
zpp.style.visibility="visible";
zpp.innerHTML="您输入的密码不一致!";
zpp.style.color="red";
}
};
58.css
div,body,label,p,span{
margin: 0px;
padding: 0px;
}
#main{
width: 950px;
height:400px;
margin-left: 400px;
margin-top: 100px;
}
#main div{
float: left;
margin-left: 10px;
width: 930px;
height: 90px;
}
#main label{
float: left;
font-size: 36px;
margin-top: 20px;
}
#main input{
width: 150px;
height: 30px;
}
#main p{
margin-top: 40px;
visibility: hidden;
}
#submit{
float: left;
margin-left: 180px;
}
.count{
float: left;
clear: both;
margin-left:230px;
display: block;
visibility: hidden;
}
};
举报