通过jquery.validate.js校验表单字段是否合法

Posted 再也伤不起

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了通过jquery.validate.js校验表单字段是否合法相关的知识,希望对你有一定的参考价值。

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2 <html>
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5 <title>蓝源Eloan-P2P平台->用户注册</title>
  6 <link rel="stylesheet" href="/js/bootstrap-3.3.2-dist/css/bootstrap.css" type="text/css" />
  7 <link rel="stylesheet" href="/css/core.css" type="text/css" />
  8 <script type="text/javascript" src="/js/jquery/jquery-2.1.3.js"></script>
  9 <script type="text/javascript" src="/js/bootstrap-3.3.2-dist/js/bootstrap.js"></script>
 10 <script type="text/javascript" src="/js/plugins/jquery-validation/jquery.validate.js"></script>
 11 <script type="text/javascript" src="/js/plugins/jquery-validation/localization/messages_zh.js"></script>
 12 <script type="text/javascript" src="/js/plugins/jquery.form.js"></script>
 13 <script type="text/javascript" src="/js/jquery.bootstrap.min.js"></script>
 14 
 15 <style type="text/css">
 16     .el-register-form{
 17         width:600px; 
 18         margin-left:auto;
 19         margin-right:auto;
 20         margin-top: 20px;
 21     }
 22     .el-register-form .form-control{
 23         width: 220px;
 24         display: inline;
 25     }
 26 </style>
 27 <script type="text/javascript">
 28     $(function(){
 29         //第一种Ajax提交表单的方式
 30         //$("#registerForm").ajaxForm();
 31         //执行流程:1,点击表单的提交按钮,2,触发jQuery-validate的验证;
 32         //3,验证成功,jquery-validate会自动提交表单;(因为这个时候表单已经是Ajax表单了,所以表单的提交通过Ajax提交)
 33         
 34         //自定义jquery-validate验证方法
 35         $.validator.addMethod("checkUsername", function(value, element) {
 36             //这个验证方法返回一个boolean值来代表验证是否通过
 37             var ret=false;
 38             $.ajax({
 39                 dataType:"json",
 40                 type:"post",
 41                 async:false,
 42                 url:"/checkUsername.do",
 43                 data:{
 44                     username:value
 45                 },
 46                 success:function(data){
 47                     ret = data.success;
 48                 }
 49             });
 50             return ret;
 51         }, "用户名已经存在!");
 52         
 53         $("#registerForm").validate({
 54             rules:{
 55                 username:{
 56                     required:true,
 57                     rangelength:[4,16],
 58                     checkUsername:true
 59                 },
 60                 password:{
 61                     required:true,
 62                     rangelength:[4,16]
 63                 },
 64                 confirmPwd:{
 65                     equalTo:"#password"
 66                 }
 67             },
 68             messages:{
 69                 username:{
 70                     required:"请输入用户名",
 71                     rangelength:"用户名长度为{0}到{1}",
 72                     remote:"用户名已经存在"
 73                 },
 74                 password:{
 75                     required:"请输入密码",
 76                     rangelength:"密码长度为{0}到{1}"
 77                 },
 78                 confirmPwd:{
 79                     equalTo:"两次输入密码不一致"
 80                 }
 81             },
 82             //修改错误提示文字的样式
 83             errorClass:"text-danger",
 84             //处理错误高亮
 85             highlight:function(element,errorClass){
 86                 //寻找离自己最近的div
 87                 $(element).closest(".form-group").addClass("has-error");
 88             },
 89             //取消错误高亮
 90             unhighlight:function(element,errorClass){
 91                 $(element).closest(".form-group").removeClass("has-error");
 92             },
 93             //在表单验证成功之后提交表单做的事情
 94             //第二种Ajax提交表单方式:
 95             //1,点击表单中的提交按钮,2,jquery-valiate执行验证通过;因为这个时候我们配置了submitHandler,所以,当验证成功之后;
 96             //jquery-validate不会自动提交表单,来执行submitHandler,3,在submitHandler中直接使用ajaxSubmit来完成表单提交;
 97             submitHandler:function(form){
 98                 $(form).ajaxSubmit({
 99                     dataType:"json",
100                     success:function(data){
101                         if(data.success){
102                             $.messager.confirm("提示","注册成功,点击确认进入登录",function(){
103                                 window.location.href="/login.html";
104                             });
105                         }else{
106                             $.messager.popup("注册失败,"+data.msg);
107                         }
108                     }
109                 });
110             }
111         });
112     })
113 </script>
114 </head>
115 <body>
116     <!-- 网页头信息 -->
117     <div class="el-header" >
118         <div class="container" style="position: relative;">
119             <ul class="nav navbar-nav navbar-right">
120                 <li><a href="/">首页</a></li>
121                 <li><a href="/login.html">登录</a></li>
122                 <li><a href="#">帮助</a></li>
123             </ul>
124         </div>
125     </div>
126     
127     <!-- 网页导航 --> 
128     <div class="navbar navbar-default el-navbar">
129         <div class="container">
130             <div class="navbar-header">
131                 <a href=""><img alt="Brand" src="/images/logo.png"></a>
132                 <span class="el-page-title">用户注册</span>
133             </div>
134         </div>
135     </div>
136     
137     <!-- 网页内容 -->
138     <div class="container">  
139         <form id="registerForm" class="form-horizontal el-register-form" action="/register.do" method="post" >
140             <p class="h4" style="margin: 10px 10px 20px;color:#999;">请填写注册信息,点击“提交注册”即可完成注册!</p>
141             <div class="form-group">
142                 <label class="control-label col-sm-2">用户名</label>
143                 <div class="col-sm-10">
144                     <input type="text" autocomplete="off" name="username" class="form-control" id="username"/>
145                     <p class="help-block">用户名为4~16位字母,数字,符号或中文</p>
146                 </div>
147             </div>
148             <div class="form-group">
149                 <label class="control-label col-sm-2">&emsp;</label>
150                 <div class="col-sm-10">
151                     <input type="password" autocomplete="off" name="password" id="password" class="form-control" />
152                     <p class="help-block">密码为4~16位字符组成,采用数字、字母、符号安全性更高</p>
153                 </div> 
154             </div>
155             <div class="form-group">
156                 <label class="control-label col-sm-2">确认密码</label>
157                 <div class="col-sm-10">
158                     <input type="password" autocomplete="off" name="confirmPwd" class="form-control" />
159                     <p class="help-block">请再次填写密码</p>     
160                 </div>
161             </div> 
162             <div class="form-gorup">   
163                 <div class="col-sm-offset-2">  
164                     <button type="submit" class="btn btn-success">
165                         同意协议并注册  
166                     </button>
167                     &emsp;&emsp;
168                     <a href="/login.html" class="text-primary">已有账号,马上登录</a>
169                     
170                     <p style="padding-left: 50px;margin-top: 15px;">
171                         <a href="#">《使用协议说明书》</a>
172                     </p>
173                 </div>
174             </div>
175         </form>
176     </div>
177     <!-- 网页版权 -->
178     <div class="container-foot-2">
179         <div class="context">
180             <div class="left">
181                 <p>专注于高级Java开发工程师的培养</p>
182                 <p>版权所有:&emsp;2015广州小码哥教育科技有限公司</p>
183                 <p>&emsp;&emsp;址:&emsp;广州市天河区棠下荷光三横路盛达商务园D座5楼</p>
184                 <p>&emsp;&emsp;话: 020-29007520&emsp;&emsp;
185                     邮箱:&emsp;[email protected]</p>
186                 <p>
187                     <a href="http://www.miitbeian.gov.cn" style="color: #ffffff">ICP备案
188                         :粤ICP备字1504547</a>
189                 </p>
190                 <p>
191                     <a href="http://www.gzjd.gov.cn/wlaqjc/open/validateSite.do" style="color: #ffffff">穗公网安备:44010650010086</a>
192                 </p>
193             </div>
194             <div class="right">
195                 <a target="_blank" href="http://weibo.com/ITxiaomage"><img
196                     src="/images/sina.png"></a>
197             </div>
198             <div class="clearfix"></div>
199         </div>
200     </div>
201 </body>
202 </html>

 

以上是关于通过jquery.validate.js校验表单字段是否合法的主要内容,如果未能解决你的问题,请参考以下文章

使用jquery.validate.js实现boostrap3的校验和验证

jquery.validate.js表单验证

JQuery.validate.js 表单验证

jquery.validate.js表单验证

Validate常用校验

validate jquery怎么判断一个表单是不是通过验证