當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript 表单验证
生活随笔
收集整理的這篇文章主要介紹了
JavaScript 表单验证
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
JavaScript 可用來在數據被送往服務器前對 HTML 表單中的這些輸入數據進行驗證。
被 JavaScript 驗證的這些典型的表單數據有：
- 用戶是否已填寫表單中的必填項目？
- 用戶輸入的郵件地址是否合法？
- 用戶是否已輸入合法的日期？
- 用戶是否在數據域 (numeric field) 中輸入了文本？
下面是連同 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" οnsubmit="return validate_form(this)" method="post"> Email: <input type="text" name="email" size="30"> <input type="submit" value="Submit"> </form> </body></html> <form action="submitpage.htm" οnsubmit="return validate_form(this)" method="post"> </form>這是一個form表單，action中是表單提交的請求，onsubmit是javascript腳本，提交后會先執行腳本然后再發送請求，return validate_form(this)，根據名字看應該是表單驗證，method="post"是以post方式發送出去，發送方式有get和post之分，get就是發送的數據在地址欄能顯示出來，但有長度和數據類型的限制，而post是放在請求體中發送，相比get方式，
post方式更安全。
E-mail 驗證
下面的函數檢查輸入的數據是否符合電子郵件地址的基本語法。
意思就是說，輸入的數據必須包含 @ 符號和點號(.)。同時，@ 不可以是郵件地址的首字符，并且 @ 之后需有至少一個點號：
下面是連同 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"οnsubmit="return validate_form(this);" method="post"> Email: <input type="text" name="email" size="30"> <input type="submit" value="Submit"> </form> </body></html>參考資料：http://www.w3school.com.cn/js/js_form_validation.asp
轉載于:https://www.cnblogs.com/lijingjun/archive/2012/08/14/2637710.html
總結
以上是生活随笔為你收集整理的JavaScript 表单验证的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 关于datediff(year,开始日期
- 下一篇： Spring笔记2