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>新闻热点
疑难解答
