                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /表單驗(yàn)證

input框輸入過(guò)之后為什么再?zèng)]法選中了~

<html>
<head lang="en">
? ?<meta charset="utf-8"/>
? ?<title></title>
? ?<link href="style.css" rel="stylesheet"/>
? ?<script>
? ? ? ?window.onload=function() {
? ? ? ? ? ?var aInput = document.getElementsByTagName('input');
? ? ? ? ? ?var oName = aInput[0];
? ? ? ? ? ?var pwd = aInput[1];
? ? ? ? ? ?var pwd2 = aInput[2];
? ? ? ? ? ?var aP = document.getElementsByTagName('p');
? ? ? ? ? ?var nameMsg = aP[0];
? ? ? ? ? ?var pwdMsg = aP[1];
? ? ? ? ? ?var pwdMsg2 = aP[2];
? ? ? ? ? ?var count = document.getElementById('count');
? ? ? ? ? ?var aEm = document.getElementsByTagName('em');
? ? ? ? ? ?var name_length=0;
? ? ? ? ? ?function getLength(str){
? ? ? ? ? ? ? ?return str.replace(/[^\x00-\xff]/ig,'xx').length;
? ? ? ? ? ?}

? ? ? ? ? ?oName.onfocus = function () {
? ? ? ? ? ? ? ?nameMsg.style.display='block';
? ? ? ? ? ? ? ?nameMsg.innerHTML='<i></i>5-25個(gè)字符，一個(gè)漢字為兩個(gè)字符，推薦使用中文會(huì)員名'
};
? ? ? ? ? ?oName.onkeyup = function () {
? ? ? ? ? ? ? ?count.style.visibility='visible';
? ? ? ? ? ? ? ?name_length=getLength(this.value);
? ? ? ? ? ? ? ?count.innerHTML=name_length+'個(gè)字符';
? ? ? ? ? ? ? ?if(name_length==0){
? ? ? ? ? ? ? ? ? ?count.style.visibility="hidden";
? ? ? ? ? ? ? ?}
? ? ? ? ? ?};
? ? ? ? ? ?oName.onblur = function () {
? ? ? ? ? ?//含有非法字符
var re=/[^\w\u4e00-\u9fa5]/g;
? ? ? ? ? ? ? ?if(re.test(this.value)){
? ? ? ? ? ? ? ? ? ?nameMsg.innerHTML="<i></i>含有非法字符"
}
? ? ? ? ? //不能為空
else if(name_length==0){
? ? ? ? ? ? ? ? ? ?nameMsg.innerHTML="<i></i>不能為空"
}
? ? ? ? ? //長(zhǎng)度超過(guò)25個(gè)字符
else if(name_length>25){
? ? ? ? ? ? ? ? ? ?nameMsg.innerHTML="<i></i>長(zhǎng)度超過(guò)二十五個(gè)字符"
}
? ? ? ? ? //長(zhǎng)度少于6個(gè)字符
else if(name_length<6){
? ? ? ? ? ? ? ? ? ?nameMsg.innerHTML="<i></i>長(zhǎng)度少于6個(gè)字符"
}
? ? ? ? ? //ok
else{
? ? ? ? ? ? ? ? ? ?nameMsg.innerHTML="<i></i>ok"
}
? ? ? ? ? ?};
? ? ? ?}

? ?</script>
</head>
<body>
<form>
? ?<div><span> 會(huì)員名：</span><input type="text" class="text"><p class="meg"><i class="ati"></i>5-25個(gè)字符，一個(gè)漢字為兩個(gè)字符，推薦使用中文會(huì)員名</p></div>
? ?<div><span> </span><b id="count">0個(gè)字符</b></div>
? ?<div><span>登錄密碼：</span><input type="password" class="text"/><p class="msg"><i class="err"></i>5-25個(gè)字符，一個(gè)漢字為兩個(gè)字符，推薦使用中文會(huì)員名</p></div>
? ?<div><span> </span><em class="active">弱</em><em>中</em><em>強(qiáng)</em></div>
? ?<div><span>確認(rèn)密碼：</span><input type="password" class="text"/><p>請(qǐng)?jiān)佥斎胍淮?lt;/p></div>
? ?<div><span> 驗(yàn)證碼：</span><input type="text" class="text" style="width:50px;"/></div>
? ?<div><span> </span><input class="submitBtn btn" type="submit" value="同意協(xié)議并注冊(cè)"/></div>
</form>
</body>
</html>