你的位置:首页 > Java教程

[Java教程]最简单的表单验证


 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>