JavaScript表單驗證實現(xiàn)代碼
JavaScript 可用來在數(shù)據(jù)被送往服務(wù)器前對 HTML 表單中的這些輸入數(shù)據(jù)進行驗證
JavaScript 表單驗證
JavaScript 可用來在數(shù)據(jù)被送往服務(wù)器前對 HTML 表單中的這些輸入數(shù)據(jù)進行驗證。
被 JavaScript 驗證的這些典型的表單數(shù)據(jù)有:
用戶是否已填寫表單中的必填項目?
用戶輸入的郵件地址是否合法?
用戶是否已輸入合法的日期?
用戶是否在數(shù)據(jù)域 (numeric field) 中輸入了文本?
必填(或必選)項目
下面的函數(shù)用來檢查用戶是否已填寫表單中的必填(或必選)項目。假如必填或必選項為空,那么警告框會彈出,并且函數(shù)的返回值為 false,否則函數(shù)的返回值則為 true(意味著數(shù)據(jù)沒有問題):
function validate_required(field,alerttxt) { with (field) { if (value==null||value=="") {alert(alerttxt);return false} else {return true} } }
下面是連同 HTML 表單的代碼:
<html> <head> <script type="text/javascript"> function validate_required(field,alerttxt) { with (field) { if (value==null||value=="") {alert(alerttxt);return false} else {return true} } } function validate_form(thisform) { with (thisform) { if (validate_required(email,"Email must be filled out!")==false) {email.focus();return false} } } </script> </head> <body> <form action="submitpage.htm" onsubmit="return validate_form(this)" method="post"> Email: <input type="text" name="email" size="30"> <input type="submit" value="Submit"> </form> </body> </html>
E-mail 驗證
下面的函數(shù)檢查輸入的數(shù)據(jù)是否符合電子郵件地址的基本語法。
意思就是說,輸入的數(shù)據(jù)必須包含 @ 符號和點號(.)。同時,@ 不可以是郵件地址的首字符,并且 @ 之后需有至少一個點號:
function validate_email(field,alerttxt) { with (field) { apos=value.indexOf("@") dotpos=value.lastIndexOf(".") if (apos<1||dotpos-apos<2) {alert(alerttxt);return false} else {return true} } }
下面是連同 HTML 表單的完整代碼:
<html> <head> <script type="text/javascript"> function validate_email(field,alerttxt) { with (field) { apos=value.indexOf("@") dotpos=value.lastIndexOf(".") if (apos<1||dotpos-apos<2) {alert(alerttxt);return false} else {return true} } } function validate_form(thisform) { with (thisform) { if (validate_email(email,"Not a valid e-mail address!")==false) {email.focus();return false} } } </script> </head> <body> <form action="submitpage.htm"onsubmit="return validate_form(this);" method="post"> Email: <input type="text" name="email" size="30"> <input type="submit" value="Submit"> </form> </body> </html>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
使用typescript快速開發(fā)一個cli的實現(xiàn)示例
這篇文章主要介紹了使用typescript快速開發(fā)一個cli的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12echarts學(xué)習(xí)之legend點擊事件解讀
這篇文章主要介紹了echarts學(xué)習(xí)之legend點擊事件解讀,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-03-03動態(tài)更新highcharts數(shù)據(jù)的實現(xiàn)方法
下面小編就為大家?guī)硪黄獎討B(tài)更新highcharts數(shù)據(jù)的實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-05