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

急求源代碼。。。

誰可以分享一下源代碼？？深表感謝！

zy1994713

2016-11-21

源自：表單驗(yàn)證 2-1

關(guān)注問題我要回答

1598

操作

收起

2 回答

慕粉0956007758
2017-12-04

大神，請教下如果有多個(gè)form或table里面或外面都有input標(biāo)簽，那怎么保證獲取的數(shù)據(jù)無誤？

window.onload=function(){
?var alnput=document.getElementsByTagName('input')
?var oName=alnput[0];?
?var pwd=alnput[1];
?var pwdd=alnput[2];

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

慕妹6355885
2016-11-22

<!DOCTYPE html>
<html>

?<head>
??<meta charset="utf-8" />
??<link rel="stylesheet" href="css/new_file.css" />
??<script type="text/javascript" src="js/index.js" ></script>
??<title></title>
?</head>
?<body>
??<form>
???<div>
????<label>
?????<span>會(huì)員名：</span>
?????<input type="text" class="text" />
????</label>
????<p class="msg">
????<i class="ati"></i>
????5-25個(gè)字符，一個(gè)漢字為兩個(gè)字符，推薦使用中文會(huì)員名
????</p>
???</div>
???<div>
????<label>
?????<span>
??????<b ="count" id="count">0個(gè)字符</b>
?????</span>
????</label>
???</div>
???<div>
????<label>
?????<span>
??????登錄密碼：
?????</span>
?????<input type="password" class="text">
????</label>
????<p class="msg">
?????<i class="er"></i>
?????5-25個(gè)字符，一個(gè)漢字為兩個(gè)字符，推薦使用中文會(huì)員名
????</p>
???</div>
??????????? <div style="margin: 3px 0 10px 0;">
??????????? ?<label>
??????????? ??<span></span>
??????????? ??<em class="active">弱</em>
??????????? ??<em class="">中</em>
??????????? ??<em class="">強(qiáng)</em>
??????????? ?</label>
??????????? </div>
??????????? <div style="margin-bottom: 20px;">
??????????? ?<label>
??????????? ??<span>確認(rèn)密碼</span>
??????????? ??<input type="password" class="text" disabled="">
??????????? ?</label>
??????????? ?<p class="msg">
??????????? ??<i class="ati"></i>
??????????? ??請?jiān)谳斎胍淮?br />??????????? ?</p>
??????????? </div>
??????????? <div>
??????????? ?<label>
??????????? ??<span>驗(yàn)證碼：</span>
??????????? ??<input type="text" class="text" style="50px">
??????????? ???? <img src="" width="100" height="30">
??????????? ???? <a class="changelmg" href="#" title="重新獲取驗(yàn)證碼"></a>
??????????? ?</label>
??????????? </div>
??????????? <div>
??????????? ?<input class="submitBtn btn" type="submit" value="同意協(xié)議并注冊">
??????????? </div>
?????????? </form>
?</body>
?

</html>

/*rese*/
body.div.dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,th,td{margin:0:padding:0;font:12px/1.5
;color:#666;}
ul,ol,li{list-style:none}
img{ border:none}
input,select,img{verticat-align:middle}
label{vertical-align:middle}
input:focus,textarea:focus{outline:none}
.btn{border:none 0}
.mb10{ margin-bottom: 10px}
/*main*/
form{width:740px; height:500px; margin:100px auto}
form div{overflow:hidden;clear:both;}
form div label{float:left; clear:both}
form div label .text{ width: 152px; height:26px; padding:0 2px: border: 1px solid #ccc}
form div label b{ font-weight:normal; font-size: 12px; color:#ccc; visibility:hidden}
form div em{ display:inline-block; font-size: 12px; text-align:center; color:#fff; vertical-align:middle; font-style:normal; width:53px; height:
15px; line-height: 15px; background:#FFD099}
form div .active{ background-color:#FF6600}
div span{ display:inline-block; width:80px; text-align:right}
.submitBtn{ width: 135px; height:33px;? color:#fff; margin:20px 0 0 80px}
.changelmg{ width:22px; height:22px; display:inline-block; vertical-align:middle;}
.msg{ line-height: 12px; color:#999;float:left;margin-left:5px; display:none;margin-top: 5px}
.msg i{display:inline-block;vertical-align:middle; width:25px; height:20px;}
.msg .ati{ background: url(../img/deng.jpg) no-repeat;background-size:cover ;}
.msg .err{background: url(../img/cha.jpg) no-repeat;background-size:cover ;}
.msg .ok{ background: url(../img/dui.jpg) no-repeat;background-size:cover ;}

?

??? //顯示多少個(gè)字符
?function getLength(str){
??return str.replace(/[^\x00-xff]/g,'xx').length;
?}
??? //相同的字母
?function findStr(str,n){
??var tmp=0;
??for(var i=0;i<str.length;i++){
???if(str.charAt(i)==n){
????tmp++
???}
??}
??return tmp
?}

?

???
???? pwd.onkeyup=function(){
???? ? //大于5個(gè)字符“中
???? ?if(this.value.length>5){
???? ??aEM[1].className='active';
???? ??pwdd.removeAttribute('disabled');
???? ??pwd2_msg.style.display='block'
?? ?}
? ??? else{
? ??aEM[1].className='';
??????? pwdd.setAttribute("disabled","");
??????? pwd2_msg.style.display="none"
???? }
???? ?
???? ?//大于10個(gè)字符“強(qiáng)
???? ??if(this.value.length>10){
???? ??aEM[2].className='active';???? ??
?? ?}
? ??? else{
? ??aEM[2].className='';??????
???? }
???? ?
???? ?
???? ?
???? }
???
??? pwd.onblur=function(){
??? ?var m=findStr(pwd.value,pwd.value[0]);
??? ?var? re_n=/[^\d]/g;?? //不能全為數(shù)字
??? ?var? re_t=/[^a-zA-Z]/g;?? //不能全為字母
??? ?//不能為空
??? ?if(this.value==''){
??? ??pwd_msg.innerHTML='<i class="err"></i>? 不能為空'
??? ?}
??? ?
??? ?//不能用相同的字符
??? ?else if(m==this.value.length){
??? ??pwd_msg.innerHTML='<i class="err"></i>? 不能用相同字符'
??? ?}
??? ?
??? ?
??? ?//長度應(yīng)為6-16個(gè)字符
??? ?else if(this.value.length<6 || this.value.length>16){
??? ??pwd_msg.innerHTML='<i class="err"></i>? 長度應(yīng)為6-16個(gè)字符'
??? ?}
??? ?
??? ?
??? ?//不能全為數(shù)字
??? ?else if(!re_n.test(this.value)){
??? ??pwd_msg.innerHTML='<i class="err"></i>? 不能全為數(shù)字'
??? ?}
??? ?
??? ?
??? ?
??? ?//不能全為字母
??? ?else if(!re_t.test(this.value)){
??? ??pwd_msg.innerHTML='<i class="err"></i>? 不能全為字母'
??? ?}
??? ?
??? ?
??? ?//ok
??? ?else{
??? ??pwd_msg.innerHTML='<i class="ok"></i>? OK'
??? ?}?? ?
??? }
??????? pwdd.onblur=function(){
??????? ?if(this.value!=pwd.value){
??????? ??pwd2_msg.innerHTML='<i class="err"></i>? 兩字輸入的密碼不一致'
??????? ?}
??????? ?else{
??????? ??pwd2_msg.innerHTML='<i class="ok"></i> ok'
??????? ?}
??????? }???
}