直接po截圖和代碼
下面是CheckFormDemo.html
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>驗證表單的案例</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>驗證表單的案例</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/>重復密碼：<input type="password" name="repeatPwd" id="myRepeatPwd"><br/><!-- 雖然復選框設置了 name屬性，但是如果復選框不選中，是不會提交到服務器端的，只有選中了的復選框，才會提交到服務器端 -->愛好：<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/><!-- 只有設置了 name 屬性的表單元素才能在提交表單時傳遞它們的值 -->測試字段:<input type="text" id="test" value="本文本框故意不設置name屬性，看服務器端能不能接收到"><br/><!-- onclick="checkForm();"這句話中的;分號也可以省略不寫，但是如果有多行js代碼的話，那就要在每行js代碼后面加上;分號，最后一行js代碼后面可以不寫;分號，也可以寫上;分號 --><input type="button" value="js驗證表單" onclick="checkForm();"><input type="submit" value="提交到servlet"></form></body></html>
下面是jsCheckDateDemo.js
/** * */ //驗證表單數據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) {//沒有一個愛好被選中 alert("請至少選擇一個愛好!"); //程序也沒必要再往下走了，直接return return; } if (document.forms[0].pwd.value.length < 8) { alert("密碼長度不能小于8位!"); document.forms[0].pwd.focus();//讓密碼框獲取焦點 //程序也沒必要再往下走了，直接return return; } if (document.forms[0].pwd.value != document.forms[0].repeatPwd.value) { alert("兩次密碼輸入不一致!"); document.forms[0].repeatPwd.focus();//讓重復密碼框獲取焦點 //程序也沒必要再往下走了，直接return return; } if (document.getElementById("remarks").value == "") { alert("備注不能為空!"); /*這里可以不寫return，因為程序執行到這里時，后面已經沒有任何代碼了，所以寫不寫return都無所謂，所以就不要寫return了，寫了反而讓人覺得你是個新手，水平有點菜! */ }} 以上所述是小編給大家介紹的javascript驗證form表單數據詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對VeVb武林網網站的支持！
新聞熱點
疑難解答
