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>