zfy421 发表于 2013-1-29 08:40:13

javascript-表单验证

一个基于javascript的简单表单验证程序,部分细节没有完善。
html部分代码:

<form action="regeist" method="post" id="form1">    用户名:<input type="text" name="username" id="username" >    <br/>    密码:<input type="password" name="password" id="password"><br/>    确认密码:<input type="password" name="repassword" id="repassword"><br/>    邮箱:<input type="text" name="email" id="email"><br/>    手机号码:<input type="text" name="mobile" id="mobile"><br/>    出生日期:<input type="text" name="birthday" id="birthday"><br/>    <input type="button" value="ok" >    <input type="reset" value="reset">    </form> js代码主要使用javascript进行验证,username属性使用jquery进行查询用户名是否存在,这里只是简单的匹配,也可以调用数据库查询。

<script type="text/javascript" src="jquery-1.5.2.js"></script>    <script type="text/javascript">    function mysubmit(){      if(check()){            alert("mainok");document.getElementById("form1").submit();      }      }      function check(){      var username=document.getElementById("username").value;      var password=document.getElementById("password").value;      var repassword=document.getElementById("repassword").value;      var email=document.getElementById("email").value;      var mobile=document.getElementById("mobile").value;      var birthday=document.getElementById("birthday").value;      if(username==null||username==""){      alert("用户名不能为空");      document.getElementById("username").focus();      return false;            }if(username.length<5){alert("用户名长度为5-20个字符");document.getElementById("username").focus();return false;}if(password==null||password==""){      alert("密码不能为空");      document.getElementById("password").focus();      return false;            }            if(password.length<6||password.length>20){            alert("密码长度为6-20个字符");            document.getElementById("password").focus();            return false;            }            if(password!=repassword){                alert("密码不一致");                document.getElementById("password").focus();                return false;            }            if(email==null||email==""){                alert("邮箱不能为空");                document.getElementById("email").focus();                return false;            }            if(email.indexOf("@")==-1){            alert("邮箱格式错误");                document.getElementById("email").focus();                return false;            }            var str=/^1\d{8}$/;            if(mobile!=null&&mobile!=""){            if(!str.test(mobile)){                alert("手机格式错误");                document.getElementById("mobile").focus();                return false;            }            }            return true;      }      function checkname(){      var username=document.getElementById("username").value;      $.ajax({type:"post",url:"checkname",data:{username:username},success:function(data){//alert(data);if(data=="true"){document.getElementById("username").focus();alert("用户存在");return false;}}})      }    </script> public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setContentType("text/html;charset=utf-8");PrintWriter out = response.getWriter();String username=request.getParameter("username");System.out.println(username);if(username.equals("zfy123")){out.print("true");}else{out.print("false");}}
页: [1]
查看完整版本: javascript-表单验证