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. Task5.PyTorch实现L1，L2正则化以及Dropout

    1.了解知道Dropout原理 深度学习网路中,参数多,可能出现过拟合及费时问题.为了解决这一问题,通过实验,在2012年,Hinton在其论文<Improving neural network ...

  2. logback系列二：logback在项目中的应用

    1.输出http日志 2.输出dubbo日志 3.输出interfacer日志 4.输出到access,remote,app等目录中

  3. import Vue form 'vue' 解释

  4. docker for windows 中 镜像 microsoft/donet 的文件结构

    一共有3个文件夹和1个文件: [Program Files] [Users] [Windows] License.txt 使用vs默认生成的dockerfile文件生成后,会新增app文件夹.

  5. Bugku 杂项 宽带信息泄露

    宽带信息泄露 flag是宽带用户名 下载文件后用RouterPassView打开,搜索username即可

  6. 实用工具/API

    实用工具/API PNG图片无损压缩 在线给图片加水印 随机密码生成 随机头像生成 微博一键清理工具 CSS压缩 在线工具 免费虚拟主机 技术摘要 https://github.com/biezhi/ ...

  7. python curl_get-pip.py Installing with get-pip.py

    w curl https://bootstrap.pypa.io/get-pip.py > curl_get-pip.pypython curl_get-pip.py https://pip.p ...

  8. Map 接口有哪些类

    Map接口 Map提供了一种映射关系,其中的元素是以键值对(key-value)的形式存储的,能够实现根据key快速查找value:Map中的键值对以Entry类型的对象实例形式存在:建(key值)不 ...

  9. java配置详解

    JAVA_HOMED:\JavaTools\Java\jdk1.7.0_80\ D:\JavaEnvironment\Java\jdk1.7.0_71D:\JavaEnvironment\Java\j ...

  10. 【ABAP系列】SAP VA02修改销售订单的BAPI举例

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP VA02修改销售订单的B ...