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]