在學習js制作表單登錄界面遇到的問題
我發(fā)現(xiàn)一個問題，在登錄框輸入正確的登錄名后，我單擊輸入框外面，登錄框是提示成功了，但是當我沒有改變登錄框中的值，只是在框中單擊了一下，在再登錄框外面單擊一下，登錄框就提示我輸入的登錄名不合法了，這是怎么回事呢？怎么處理這個問題呢？
qq_小柯_1
2015-11-04
3 回答
舉報
0/150
提交
取消
2015-11-04
這個是正則使用的問題。
????????var?pw?=?/^[a-zA-Z]{1}[\w\d]{4,7}$/g; //當鼠標離開時發(fā)生的事件 //判斷登錄名事件 ????????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 ?交替著出現(xiàn)。即使this.value的值一直是3個中文。詳細的原因你可以去查一下正則表達的用法 ，尤其是關(guān)于全局匹配的（g）
2015-11-04
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個字符之間，不能為中文，開頭為英文，其余的是數(shù)字或者為英文</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
//排除是否全是數(shù)字或者一個字符
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];
? ? ? ? ? //獲取密碼框?qū)ο?/p>
? ? ? ? ? var p_input=inputs[1];
? ? ? ? ? //獲取確認密碼框?qū)ο?/p>
? ? ? ? ? var zp_input=inputs[2];
? ? ? ? ? //獲取計數(shù)i的對象集合
? ? ? ? ? var counts=document.getElementsByTagName("i");
? ? ? ? ? //獲取登錄名的計數(shù)i的個數(shù)
? ? ? ? ? var d_i=counts[0];
? ? ? ? ? //獲取密碼的計數(shù)個數(shù)
? ? ? ? ? var pw_i=counts[1];
? ? ? ?
? ? ? ? ? //鼠標進入到登錄框時提示語出現(xiàn)
? ? ? ? ? d_input.onfocus=function(){
? ? ? ? ? dp.style.visibility="visible";
? ? ? ? ? };
? ? ? ? ? //鼠標進入密碼框時提示語出現(xiàn)
? ? ? ? ? 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;
? ? ? ??
? ? ? ??
? ? ? ? ? //當鼠標離開時發(fā)生的事件
? ? ? ? ? //判斷登錄名事件
? ? ? ? ?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個字符之間，不能為中文，開頭為英文，其余的是數(shù)字或者為英文";
? ? ? ? ? pp.style.color="red";
? ? ? ? ?}
? ? ? ?};
? ? ? ? //登錄名的中文個數(shù)記錄
? ? ? ? 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";
? ? ? ? ? ? }
? ? ? ? };
? ? ?//密碼的字符個數(shù)記錄
? ? ?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;
? ? ? ?}
? ? ? ?};
2015-11-04
出了問題最好是貼一下代碼，別人才能看出原因，猜出來的可能性不大。