JavaScript - 表单验证

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/
  本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

posted @ 2020-01-07 16:23  Jeremy.Wu  阅读(234)  评论(0)  编辑  收藏  举报