javascript中表單驗證知識點
阿新 • • 發佈：2018-12-11
javascript中表單驗證知識點
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>javascript中表單驗證知識點,雪豹軟體工作室,javascript</title> <link rel="stylesheet" type="text/css" href="mark.css"> <link rel="stylesheet" type="text/css" href="input2.css"> <link rel="stylesheet" type="text/css" href="body.css"> <style type="text/css"> div { margin: auto; } body { text-align: center; } </style> <script type="text/javascript"> function $(id) { var objNode = document.getElementById(id); return objNode; } /* 第1種:在submit按鈕的onclick事件中新增,如果驗證方法返回true則表單會提交,如果返回false則表 單不會提交，onclick="return checkData();" 第2種:在form表單的onsubmit事件中新增,只要使用提交按鈕或影象提交域提交form表單，onsubmit事件一定會觸發，如果驗 證方法返回true則表單會提交,如果返回false則表單不會提交，onsubmit="return checkData();" 注意：使用非提交按鈕或非提交域提交表單，onsubmit事件並不會觸發，直接在呼叫submit方法的程式碼中作驗證 第3：使用影象提交域提交表單，本質上與提交按鈕相同 */ //表單驗證 function checkData() { var userName = $("userName").value; if (userName == "") { alert("使用者名稱不能為空!"); return false; } var password = $("password").value; if (password == "") { alert("密碼不能為空!"); return false; } return true; } /* 普通按鈕和普通圖片提交表單，需要手動提交表單，即document.forms[表單name屬性的值].submit();而且需要注 意的是submit()方法執行的時候不會觸發form表單的onsubmit事件，所以如下面的例子，下面的例子中，寫了一個mySubmit()方 法，在該方法中通過document.forms[下標或表單name屬性的值].submit()方式呼叫submit()方法來提交表單，如果要做資料驗 證的話，在呼叫submit()方法前呼叫checkData()方法即可 還有一點需要特別的注意，頁面中所有的控制元件的name和id屬性的值都不要等於submit，要不然表單會提交不了(原因就 是document.forms[表單name屬性的值].submit()的時候，瀏覽器會認為submit()方法不是一個方法，而認為是一個控 件的name或控制元件的id,換句話說就是表單.表單元素名稱這樣的方式是獲得一個表單下的某個表單元素控制元件，巧就巧在這裡，如果是某個表單元素的name屬性值和id屬性值與表 單的submit()方法重名了的話，那麼瀏覽器就會優先將name和id解析為某個表單元素控制元件，而不是解析成表單的方法，所以就會出現無法提交表單的情況 所以總結一下： 哪個表單需要通過document.forms[表單name屬性的值].submit()這種方式手動提交的話，就要特別注意該表單內的所有表單元素控制元件的name屬性值和id屬性值不 要等於submit，否則就會造成和submit()方法重名，瀏覽器會優先把submit()方法解析成某個表單元素控制元件，而不是解析成表單的方法，從而造成表單無法提交的情況 別說表單了，最好是整個頁面的所有控制元件的name屬性和id屬性的值都不要等於關鍵字，更不要把控制元件的name屬性和id屬性的值設定成和系統的方法名一樣，因為很容易造成瀏覽器解析錯誤 ) */ //普通圖片提交表單 function mySubmit(){ //alert(" 表單控制元件 = " + testMyForm + " 控制元件id = " + testMyForm.id + " 控制元件name = " + testMyForm.name); //alert(" 我是 " + testMyForm + " 表單名字 = " + document.forms[0].name + " 表單id = " + document.forms[0].id); // alert("document.表單id = " + document.testMyForm);//使用document.表單id屬性值的這種方式不能獲取到表單控制元件 // alert("document.表單name = " + document.testForm.id);//使用document.表單name屬性值的這種方式可以獲取到表單控制元件 // alert("直接用控制元件id訪問控制元件的屬性" + testMyForm.name);//直接使用控制元件id屬性值的方式可以獲取到表單控制元件 //alert(document.getElementById("testMyForm")); if (checkData()) { //直接寫控制元件的id名字就是該控制元件物件 //testMyForm.submit(); //document.getElementById("testMyForm").submit(); //document.testForm.submit(); //document.forms[0].submit(); //document.forms["testForm"].submit(); /* 使用document.forms["表單name"]和使用document.forms["表單id"]都可以得到表單控制元件，當然也可 以使用下標的方式得到表單控制元件，如document.forms[0](我是在火狐瀏覽器下測試的，谷歌瀏覽器和IE瀏覽器沒有測試) */ //alert("使用表單的name得到表單action = " + document.forms['testForm'].action); //alert("使用表單的id得到表單action = " + document.forms["testMyForm"].action); //document.forms["testMyForm"].submit();//使用表單id的方式得到表單控制元件 //document.forms['testForm'].submit();//使用表單name的方式得到表單控制元件，一般是用表單name的方式 /*個人建議還是用document.getElementById(控制元件id屬性值)的方式比較好，各個瀏覽器都支援這種方式*/ document.forms[0].submit();//使用下標的方式得到表單控制元件 } } function test(){ /* document.forms[下標]和document.forms[form的name]和document.forms[form的id]這3種方 式都可以獲得表單控制元件(我是在火狐瀏覽器和谷歌瀏覽器中測試的，其他的瀏覽器沒測試) */ //alert("通過表單[下標] = " + document.forms[1].action); //alert("通過表單[form的name] = " + document.forms['helloTest'].action); //alert("通過表單[form的id] = " + document.forms["hiTest"].action); document.forms[1].submit();//使用下標的方式得到表單控制元件 } </script> </head> <body> <div> <form name="testForm" id="testMyForm" action="calculator.html" method="post" onsubmit="return checkData();"> 使用者名稱:<input type="text" id="userName" name="userName"><br> <br> 密碼:<input type="password" id="password" name="password"><br> <br> <input type="submit" id="submit3" name="submithaha" value="提交" style="width: 150px;" onclick="return checkData();"> <input type="reset" value="重置" style="width: 150px;"> <input type="image" src="img/img1.png" title="影象提交域" onclick="return checkData();"> <input type="button" value="普通按鈕提交表單" onclick="mySubmit()"> <input type="button" value="故意把該控制元件的name屬性值等於submit和表單的submit()方法重名" name="submithehe"> <input type="text" value="故意把該控制元件的name屬性值等於submit和表單的submit()方法重名" id="submithaha"> </form> <input type="text" value="故意把該控制元件的name屬性值等於submit和表單的submit()方法重名" name="submit"> <img title="普通圖片提交表單" src="img/img4.jpg" onclick="mySubmit()"> </div> <div> <form action="calculator.html" name="helloTest" id="hiTest"> 測試：<input type="text"><br><br> <!-- 參考網頁：http://www.cnblogs.com/lonelyxmas/p/3735446.html?utm_source=tuicool&utm_medium=referral submit:特殊的button，會自動將表單的資料提交，onClick方法不加return 會自動提交，並不會起到約束的作用， 所以，使用submit時需要驗證請加 return true或false. 例：<input type="submit" name="Submit" value="注 冊" onClick=" return checkData();">， 在JS中判斷的時候 寫return true; 或者 return false; --> <input type="text" value="故意把該控制元件的name屬性值等於submit和表單的submit()方法重名" id="submitaaaaaa"> <input type="submit" value="測試submit按鈕提交表單" onclick="test()"> <input type="button" value="測試普通按鈕提交表單" onclick="test()"> </form> </div> </body> </html>
