您所在的位置:小祥子 » 编程 » JavaScript » 正文

最简单的表单验证

时间:2015-07-11 编辑:Jasontoyell 来源:CnBlogs
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>最简单表单验证</title>
     <style>
         form { margin: 20px auto; width: 500px; padding: 20px; border: 1px solid #ccc; box-shadow: 0 0 5px #ccc; border-radius:10px;}
     </style>
 </head>
 <body>
     <form action="" method="post">
         账号:<input type="text" name="" id="userid"><br/><br/>
         密码:<input type="password" name="" id="userpwd"><br/><br/>
         确认:<input type="password" name="" id="userrepwd"><br/><br/>
         <input type="submit" value="注册" >
     </form>
 <script>
     //该表单只验证输入的文本域是否为空
     //声明一个对象,当作命名空间使用
     var eg = {};
     //在eg对象基础上添加一个公共函数用来获取页面id元素,减少代码量,提高代码复用率
     eg.getId = function(id){
         return document.getElementById(id);                //此处id运行时接受参数,不能加‘’引号
     };
     //在eg对象基础上定义表单验证函数
     eg.regCheck = function(){
         var uid = eg.getId('userid');
         var upwd = eg.getId('userpwd');
         var upwd2 = eg.getId('userrepwd');
         if (uid.value == '') {
             alert('账号不能为空!');
             return false;
         };
         if (upwd.value == '') {
             alert('密码不能为空!');
             return false;
         };
         if (upwd2.value != upwd.value) {
             alert('两次密码输入不一致!');
             return false;
         };
         return true;
     };
 </script>
 </body>
 </html>
关键词:简单 表单 验证