ITPub博客

首页 > 应用开发 > IT综合 > 从用户管理系统中复习javaweb知识10

从用户管理系统中复习javaweb知识10

原创 IT综合 作者:William茌 时间:2015-11-14 12:07:14 0 删除 编辑

用户注册信息的验证不止需要验证用户名是否已经存在,还有其他的验证,比如不能为空、字符长度控制,而且所有输入框都要验证,这么多的条件满足后才能提交,用Jquery该如何实现呢。

比较简单,也没有啥好说的,直接上代码吧。


点击(此处)折叠或打开

  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3. var okemail = false;
  4. var okname = false;
  5. var okpassword1 = false;
  6. var okpassword2 = false;
  7. $("#password1").focus(function(){
  8.     $("#password1span").html("密码应在6-20位之间");
  9. }).blur(function(){
  10.   var password1 = $("#password1").val();
  11.   if(password1.length >= 6 && password1.length <=20 && password1!=''){
  12.                        $("#password1span").html("<b>输入成功</b>");
  13.                         okpassword1=true;
  14.                     }else{
  15.                          $("#password1span").html("<b>密码应在6-20位之间</b>");
  16.                     }
  17. });
  18. $("#password2").focus(function(){
  19.     $("#password2span").html("请和上次密码相同");
  20. }).blur(function(){
  21.   var password2 = $("#password2").val();
  22.   var password1 = $("#password1").val();
  23.   if(password2.length >= 6 && password2.length <=20 && password2!='' && password2 == password1){
  24.                        $("#password2span").html("<b>验证成功</b>");
  25.                         okpassword2=true;
  26.                     }else{
  27.                          $("#password2span").html("<b>请和第一次输入密码相同</b>");
  28.                     }
  29. });

  30. $("#name").focus(function(){
  31. $("#namespan").html("用户名应在3-12位之间");
  32. }).blur(function(){
  33.  var username = $("#name").val();

  34.   $.ajax({
  35.                 async:    false,            //默认为true,即请求为异步请求
  36.                 timeout:5000,            //设置请求超时时间(毫秒)
  37.                 dataType:"json",        //返回的数据类型
  38.                 type:    "post",            //设置请求方式
  39.                 url:    "test",        //设置请求URL
  40.                  data:    "word=name&username="+username,    //设置传递的参数值
  41.                 success:function(msg){        //设置响应成功之后执行的回调函数
  42.                     if(username.length >= 3 && username.length <=12 && username!=''){
  43.                      /* $("#namespan").html(""); */
  44.                      if(msg.existName==true){
  45.                      $("#namespan").html("<b>名称可用</b>");
  46.                      }else{
  47.                      $("#namespan").html("<b>名称已被使用,换一个</b>");
  48.                      }
  49.                     }else{
  50.                      $("#namespan").html("<b>用户名应在3-12位之间</b>");
  51.                     }
  52.                 },
  53.                 error:function(){        //设置响应失败之后执行的回调函数
  54.                     alert("失败喽");
  55.                 }        
  56.             });
  57. });
  58. //-----------------------------------------------------------------------------------------------
  59. $("#mail").focus(function(){
  60. $("#em").html("邮箱不能为空,");
  61. }).blur(function(){
  62. //获取邮箱地址
  63.             var em = $("#mail").val();
  64.             
  65.              $.ajax({
  66.                 async:    false,            //默认为true,即请求为异步请求
  67.                 timeout:5000,            //设置请求超时时间(毫秒)
  68.                 dataType:"json",        //返回的数据类型
  69.                 type:    "post",            //设置请求方式
  70.                 url:    "test",        //设置请求URL
  71.                  data:    "word=email&email="+em,    //设置传递的参数值
  72.                 success:function(msg){        //设置响应成功之后执行的回调函数
  73.                     if(msg.existEmail==true){
  74.                      $("#em").html("<b>邮箱未被注册,可以使用</b>");
  75.                      okemail = true;
  76.                     }else{
  77.                     $("#em").html("<b>邮箱已被注册,换一个</b>");
  78.                     }
  79.                 },
  80.                 error:function(){        //设置响应失败之后执行的回调函数
  81.                     alert("失败喽");
  82.                 }        
  83.             });
  84.              if(em.search(/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/)==-1){
  85.                        $("#em").html("请输入正确的邮箱格式");
  86.                     }
  87.             });
  88. //------------------------------------------------------------------------------------------------------
  89.              $('#submit').click(function(){
  90.                     if(okemail && okname && okpassword1 &&okpassword2){
  91.                         $('form').submit();
  92.                     }else{
  93.                         return false;
  94.                     }
  95.                 });
  96.         
  97. });
  98. </script>
html代码如下:

点击(此处)折叠或打开

  1. 注册<br/>
  2.     <form action="user?action=register" method="post">
  3.    用户名<input type="text" name="username" id="name" ><span id="namespan"> </span><br/>
  4.    密码<input type="password" name="passwd" id="password1"> <span id="password1span"></span> <br/>
  5.   确认密码<input type="password" name="passwd2" id="password2"> <span id="password2span"></span> <br/>
  6.    邮箱<input type="text" name="email" id="mail"><span id="em"> </span> <br/>
  7.         <input type="submit" id="submit" value="注册"/>
  8.     </form>
这样就ok了。


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/29876573/viewspace-1838552/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2014-09-14

  • 博文量
    25
  • 访问量
    44097