JavaScript 表單驗證

本文轉載自查看原文 2012-08-14 11:20 3025 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" onsubmit="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" 
     onsubmit="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"onsubmit="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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JavaScript：基礎表單驗證 JavaScript實現表單驗證 JavaScript | 基礎表單驗證（純Js）強大的JavaScript表單驗證插件 JavaScript實現表單注冊與驗證 JavaScript form表單提交與驗證使用javaScript實現注冊表單驗證 15個最佳的 JavaScript 表單驗證庫 jQuery/javascript實現網頁注冊的表單驗證 Javascript 實現form 表單的驗證--自定義validate驗證