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>
