最简单的表单验证 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>最简单表单验证</title>
 6     <style>
 7         form { margin: 20px auto; width: 500px; padding: 20px; border: 1px solid #ccc; box-shadow: 0 0 5px #ccc; border-radius:10px;}
 8     </style>
 9 </head>
10 <body>
11     <form action="" method="post">
12         账号：<input type="text" name="" id="userid"><br/><br/>
13         密码：<input type="password" name="" id="userpwd"><br/><br/>
14         确认：<input type="password" name="" id="userrepwd"><br/><br/>
15         <input type="submit" value="注册" onclick="return eg.regCheck();">
16     </form>
17 <script>
18     //该表单只验证输入的文本域是否为空
19     //声明一个对象，当作命名空间使用
20     var eg = {};
21     //在eg对象基础上添加一个公共函数用来获取页面id元素，减少代码量，提高代码复用率
22     eg.getId = function(id){
23         return document.getElementById(id);                //此处id运行时接受参数，不能加‘’引号
24     };
25     //在eg对象基础上定义表单验证函数
26     eg.regCheck = function(){
27         var uid = eg.getId('userid');
28         var upwd = eg.getId('userpwd');
29         var upwd2 = eg.getId('userrepwd');
30         if (uid.value == '') {
31             alert('账号不能为空！');
32             return false;
33         };
34         if (upwd.value == '') {
35             alert('密码不能为空！');
36             return false;
37         };
38         if (upwd2.value != upwd.value) {
39             alert('两次密码输入不一致！');
40             return false;
41         };
42         return true;
43     };
44 </script>
45 </body>
46 </html>

 

posted @ 2015-07-11 21:55  清风自来_Jason  阅读(1355)  评论(0)    收藏  举报