JavaScript 表单验证
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
表单数据经常需要使用 JavaScript 来验证其正确性：
- 验证表单数据是否为空？
- 验证输入是否是一个正确的email地址？
- 验证日期是否输入正确？
- 验证表单输入内容是否为数字型？
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <script> 7 //清除用户名和密码 8 function Cancel() { 9 document.getElementById("userName").value = ""; 10 document.getElementById("passWord").value = ""; 11 alert("清除成功，请重新输入！"); 12 document.getElementById("userName").focus(); 13 } 14 //验证输入是否完整 15 function Check() { 16 if (CheckInfo()) { 17 alert("恭喜您，验证通过！"); 18 } 19 } 20 //检查用户名和密码有无输入 21 function CheckInfo() { 22 //注意：这里需要先把value取出来再验证，否则无响应 23 var userName = document.getElementById("userName").value; 24 var passWord = document.getElementById("passWord").value; 25 if (userName == "") { 26 alert("用户名不能为空，请确认！"); 27 document.getElementById("userName").focus(); 28 return false; 29 } 30 if (passWord == "") { 31 alert("密码不能为空，请确认！"); 32 document.getElementById("passWord").focus(); 33 return false; 34 } 35 return true; 36 } 37 </script> 38 </head> 39 <body> 40 <h1>系统登录</h1> 41 <hr /> 42 <p>用户名：</p><input id="userName" /> 43 <p>密 码：</p><input id="passWord" /><br> 44 <button onclick="Cancel()">取消</button> 45 <button onclick="Check()">登录</button> 46 </body> 47 </html>
作者：Jeremy.Wu
出处：https://www.cnblogs.com/jeremywucnblog/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。