?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">密 码</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 ????????????????????  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>版权所有： 2015广州小码哥教育科技有限公司</p>183 ????????????????<p>地  址： 广州市天河区棠下荷光三横路盛达商务园D座5楼</p>184 ????????????????<p>电  话： 020-29007520  185 ????????????????????邮箱： service@520it.com</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"><img196 ????????????????????src="/images/sina.png"></a>197 ????????????</div>198 ????????????<div class="clearfix"></div>199 ????????</div>200 ????</div>201 </body>202 </html>通过jquery.validate.js校验表单字段是否合法
原文地址：http://www.cnblogs.com/xuyou551/p/8093518.html