表單驗證可以通過 JavaScript 來完成
以下示例代碼用於判斷表單字段(Name)值是否存在，如果存在，則彈出信息，否則阻止表單提交：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表單驗證</title> 6 <script type="text/javascript"> 7 function myFunction(){ 8 9 var x=document.forms["Form"]["Name"].value; 10 if(x=null||x=="") 11 { 12 alert("請輸入名字！！"); 13 return false; 14 } 15 } 16 17 18 19 </script> 20 </head> 21 <body> 22 23 <form name="Form" action="#" onsubmit="return myFunction()" method="post"> 24 名字：<input type="text" name="Name"> 25 <input type="submit" value="提交"> 26 27 28 </form> 29 30 </body> 31 </html>
JavaScript 驗證輸入的數字
示例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>驗證輸入的數字</title> 6 </head> 7 <body> 8 <p><strong>請輸入1到10之間的數字：</strong></p> 9 <input id="number"> 10 <button type="button" onclick="myFunction()">提交</button> 11 12 <script type="text/javascript"> 13 function myFunction(){ 14 15 16 var x=document.getElementById("number").value;//獲取id="number"的值 17 //如果輸入的值 x 不是數字或者小於 1 或者大於 10，則提示錯誤 18 if(isNaN(x)||x<1||x>10) 19 { 20 alert("您輸入有誤，請輸入1到10之間的數字！！！"); 21 }else{ 22 alert("您輸入正確"); 23 } 24 } 25 26 </script> 27 </body> 28 </html>
HTML 表單驗證也可以通過瀏覽器來自動完成。
如果表單字段 (Name) 的值為空, required 屬性會阻止表單提交：
required可實現點擊提交按鈕，如果輸入框是空的，瀏覽器會提示錯誤信息。
示例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>HTML 表單自動驗證</title> 6 </head> 7 <body> 8 9 <form action="#" method="post" > 10 <input type="text" name="Name" required="required"> 11 <input type="submit" value="提交"> 12 </form> 13 </body> 14 </html>
注：Internet Explorer 9 及更早 IE 瀏覽器不支持表單自動驗證。