javascript驗(yàn)證form表單數(shù)據(jù)的案例詳解
更新時(shí)間:2019年03月25日 14:08:13 作者:lay500
這篇文章主要介紹了javascript驗(yàn)證form表單數(shù)據(jù),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
直接po截圖和代碼
下面是CheckFormDemo.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>驗(yàn)證表單的案例</title> <link rel="stylesheet" type="text/css" href="../css/body.css" rel="external nofollow" /> <script type="text/javascript" src="jsCheckDateDemo.js"></script> </head> <body> <h1>驗(yàn)證表單的案例</h1> <form name="form1" id="f1" action="../TestForm" method="get"> 姓名:<input type="text" name="userName" id="uName"> <br/> 年齡:<input type="text" name="age" id="uAge"> <br/> 密碼:<input type="password" name="pwd" id="myPwd"> <br/> 重復(fù)密碼:<input type="password" name="repeatPwd" id="myRepeatPwd"> <br/> <!-- 雖然復(fù)選框設(shè)置了 name屬性,但是如果復(fù)選框不選中,是不會提交到服務(wù)器端的,只 有選中了的復(fù)選框,才會提交到服務(wù)器端 --> 愛好:<input type="checkbox" name="hobby" id="myHobby" value="football">足球 <input type="checkbox" name="hobby" id="myHobby" value="badminton">羽毛球 <input type="checkbox" name="hobby" id="myHobby" value="basketball">籃球 <input type="checkbox" name="hobby" id="myHobby" value="billiards">臺球 <br/> 備注:<textarea rows="3" cols="30" id="remarks"></textarea> <br/> <!-- 只有設(shè)置了 name 屬性的表單元素才能在提交表單時(shí)傳遞它們的值 --> 測試字段:<input type="text" id="test" value="本文本框故意不設(shè)置name屬性,看服務(wù)器端能不能接收到"> <br/> <!-- onclick="checkForm();"這句話中的;分號也可以省略不寫,但是如果有多行js代 碼的話,那就要在每行js代碼后面加上;分號,最后一行js代碼后面可以不寫;分號,也可以寫上;分號 --> <input type="button" value="js驗(yàn)證表單" onclick="checkForm();"> <input type="submit" value="提交到servlet"> </form> </body> </html>
下面是jsCheckDateDemo.js
/** * */ //驗(yàn)證表單數(shù)據(jù) function checkForm(){ // alert(document.form1.hobby.length); // alert(document.getElementsByName("hobby").length); // alert(document.getElementsByName("hobby")[0].value); // alert(document.getElementById("myHobby")); // for (var i = 0; i < document.forms[0].hobby.length; i++) { // alert("---" + document.forms[0].hobby[i].value); // } var flag = false; for (var i = 0; i < document.form1.hobby.length; i++) { // alert(document.form1.hobby[i].value); // alert(document.form1.hobby[i].checked); if (document.form1.hobby[i].checked) { flag = true; break; } } if (!flag) {//沒有一個(gè)愛好被選中 alert("請至少選擇一個(gè)愛好!"); //程序也沒必要再往下走了,直接return return; } if (document.forms[0].pwd.value.length < 8) { alert("密碼長度不能小于8位!"); document.forms[0].pwd.focus();//讓密碼框獲取焦點(diǎn) //程序也沒必要再往下走了,直接return return; } if (document.forms[0].pwd.value != document.forms[0].repeatPwd.value) { alert("兩次密碼輸入不一致!"); document.forms[0].repeatPwd.focus();//讓重復(fù)密碼框獲取焦點(diǎn) //程序也沒必要再往下走了,直接return return; } if (document.getElementById("remarks").value == "") { alert("備注不能為空!"); /* 這里可以不寫return,因?yàn)槌绦驁?zhí)行到這里時(shí),后面已經(jīng)沒有任何代碼了,所 以寫不寫return都無所謂,所以就不要寫return了,寫了反而讓人覺得你是個(gè)新手,水平有點(diǎn)菜! */ } }
以上所述是小編給大家介紹的javascript驗(yàn)證form表單數(shù)據(jù)詳解整合,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
this.clientWidth和this.offsetWidth兩個(gè)有什么不同
this.clientWidth和this.offsetWidth兩個(gè)有什么不同...2006-10-10JavaScript高級程序設(shè)計(jì)(第3版)學(xué)習(xí)筆記13 ECMAScript5新特性
通常而言,JavaScript由ECMAScript核心、BOM和DOM三部分構(gòu)成,前面的文章將ECMAScript核心部分粗略的過了一篇2012-10-10JavaScript中的函數(shù)的兩種定義方式和函數(shù)變量賦值
這篇文章主要介紹了JavaScript中的函數(shù)的兩種定義方式和函數(shù)變量賦值,需要的朋友可以參考下2014-05-05