js代码
$(function () { ???$("#regForm").validate({ ???????onsubmit:true,// 是否在提交是验证 ???????onkeyup: false, ???????//失去焦点验证 ???????onfocusout:function(element){ $(element).valid();},// 是否在获取焦点时验证 ???????rules: { ???????????username: { ???????????????required: true, ???????????????minlength: 7, ???????????????maxlength: 16 , ???????????????remote: { ???????????????????type: "post", ???????????????????url: "/nameverify", ???????????????????data: { ???????????????????????username: function() { ???????????????????????????return $("#username").val(); ???????????????????????} ???????????????????????// 如果直接写“data: {username: $("#username").val();}”，这样是获取不到值的。 ???????????????????}, ???????????????????dataType: "json", ???????????????????????dataFilter: function(data) { ???????????????????????????return data; ???????????????????????} ???????????????} ???????????}, ???????????password: { ???????????????required: true, ???????????????minlength: 7, ???????????????maxlength: 16 ???????????}, ???????????secondPassword:{ ???????????????required: true , ???????????????equalTo: "#password" ???????????} ???????}, ???????messages:{ //验证错误信息 ???????????username: { ???????????????required: "请输入用户名" , ???????????????minlength: "至少7位字符" , ???????????????maxlength: "最多16位字符" , ???????????????remote: "用户名已存在" ???????????}, ???????????password: { ???????????????required: "请输入密码", ???????????????minlength: "至少7位字符" , ???????????????maxlength: "最多16位字符" ???????????}, ???????????secondPassword:{ ???????????????required: "请确认密码" , ???????????????equalTo: "密码不一致" ???????????} ???????}, ???});});html页面
<body ><form class="form-signin text-center" id="regForm" th:action="@{/toregister}" method="post"> ???<img class="mb-4" src="/img/Pig_chivalrous_407px_505743_easyicon.net.svg" alt="" width="72" height="72"> ???<h1 class="h3 mb-3 font-weight-normal">注册</h1> ???<label for="username" class="sr-only">用户名</label> ???<input name="username" type="text" id="username" class="form-control" placeholder="用户名" ?> ???<label for="password" class="sr-only">密码</label> ???<input name="password" type="password" id="password" class="form-control" placeholder="密码" > ???<label for="secondPassword" class="sr-only">确认密码</label> ???<input name="secondPassword" type="password" id="secondPassword" class="form-control" placeholder="确认密码" style="margin-bottom: 10px;" > ???<div class="checkbox mb-3"> ???????<label> ???????????<input type="checkbox" value="remember-me"> 记住我 ???????</label> ???</div> ???<button class="btn btn-lg btn-primary btn-block" type="submit">注册</button> ???<a class="btn " th:href="@{/login}" >登陆</a> ???<p class="mt-5 mb-3 text-muted">© 校园二手交易</p></form></body>js导入
?? <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> ???<script type="text/javascript" src="js/register.js"></script> ???<script type="text/javascript" src="js/jquery.validate.min.js"></script> ???<script type="text/javascript" src="js/messages_zh.js"></script>
springmvc后台响应json
?@ResponseBody ???@RequestMapping("/nameverify") ???public Boolean nameIsExists(String username){ ???????return !localAuthService.isNameExists(username); ??}js的validate插件异步效验
原文地址：https://www.cnblogs.com/luffyxin/p/9882847.html