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">&copy; 校园二手交易</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插件异步效验的更多相关文章

  1. validate插件实现表单效验（二）

    一款优秀的表单验证插件——validation插件 特点: l  内置验证规则:拥有必填.数字.email.url和信用卡号码等19类内置验证规则 l  自定义验证规则:可以很方便的自定义验证规则 l ...

  2. validate插件实现表单效验（一）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. jQuery Validate 插件[表单验证]

    在客户端添加信息提交表单时我们经常需要做一些验证,比如验证不能为空,验证客户输入手机格式,验证客户输入email,url等的格式,我们可以通过EL表达式结合js 进行自主验证,今天总结一个JQuery ...

  4. jQuery Validate 插件

    >>>>>>>>>>>>>>>>>>>>>>>>> ...

  5. JQuery Validate插件与实现

    菜鸟拙见,望请纠正 一:效果展示:以下是两个注册表单验证,左边使用Jquery validate插件实现,右边是自己用JQuery实现,效果差不多,但个人推荐用插件,毕竟前人栽了树而且长大了后人当然好 ...

  6. validate插件深入学习-01 小白从看透一个插件开始

    没有编程基础的的我,即使看了一遍jq文档也不知道怎么写程序,一个新的插件看了也不知道怎么用. 总是想做自己会的,自己不会的永远不去触碰,就永远不会. 都说编程这东西,很多都有很像的地方了,一个语言学通 ...

  7. jquery.validate插件在booststarp中的运用

    现在在网络上已经可以找到很多基于bootstarp的表单认证,但是验证的都不全面的,下载后,我们还要理解作者的思路然后进行修改添加,这种修改方式往往适合学习,时间很多的时候.但是我们很多时候是没有时间 ...

  8. validate插件的使用

    方法如下: 插件: jquery.validate.js jquery.validate.custom.js bootstrap html代码: <form id="form_name ...

  9. jquery validate form 异步提交

    jQuery取得select选中的值 jQuery("#select1  option:selected").text(); 相信很多人都用过jquery validate插件,非 ...

随机推荐

  1. Mac下Sublime text3无法安装Package Control及中文乱码问题

    sublime text3是一款轻量级的代码编辑器,我曾在Windows下配置过,但时间久了就忘了.这次是在mac上配置,在网上查了一些帖子,有的叙述不是很清楚,故记录一下详细过程. 在线安装: ht ...

  2. linux运维、架构之路-LVS负载均衡

    一.LVS介绍 1.介绍           LVS是Linux Virtual Server的简写,是linux虚拟的服务器集群系统,可以在unix/linux平台下实现负载均衡集群功能,由章文嵩博 ...

  3. 【ELK】ELK日志套件安装与使用

    ELK日志套件安装与使用   1.ELK介绍 ELK不是一款软件,而是elasticsearch+Logstash+kibana三款开源软件组合而成的日志收集处理套件,堪称神器.其中Logstash负 ...

  4. 【BZOJ5092】分割序列（高维前缀和）

    题意:对于一个长度为n的非负整数序列b_1,b_2,...,b_n, 定义这个序列的能量为:f(b)=max{i=0,1,...,n}((b_1 xor b_2 xor...xor b_i)+(b_{ ...

  5. 全球DC主机交流

    全球DC主机交流https://www.globaldc.cn/ 全球DC主机交流论坛是一个综合性的国内服务器.国外服务器.高防清洗.硬件服务器交流论坛,主要为网友提供IP地址鉴定主机商,全球独立服务 ...

  6. win7 编译postgresql9.6.8

    一.环境 windows7 postgresql9.6.8 vs2010 perl5.24.3 二.编译安装 1.安装perl,安装到C:\Perl64路径下,安装完成后设置环境变量PATH和Perl ...

  7. The JavaScript this Keyword

    https://www.w3schools.com/js/js_this.asp What is this? The JavaScript this keyword refers to the obj ...

  8. React Native商城项目实战16 - 购物中心详细页

    逻辑分析: 首页(Home)加载的购物中心组件(ShopCenter),传递url数据: ShopCenter里根据url加载购物中心详细页组件(ShopCenterDetail), ShopCent ...

  9. 基础：高通bring up camera【转】

    本文转载自:http://blog.csdn.net/liwei16611/article/details/53056710 bring UP 需要做的工作   1.kernelspace senso ...

  10. spoj 3267 D-query

    题目链接:http://vjudge.net/problem/SPOJ-DQUERY --------------------------------------------------------- ...