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. C++的命令行参数（gflag）

    参考:https://www.cnblogs.com/myyan/p/4699940.html 这是一款google开源的命令行参数解析工具,支持从环境变量.配置文件读取参数(可以用gflags代替配 ...

  2. springboot自定义错误页

    静态错误页放在         动态可以放在freemaker或者thymeleaf         匹配规则: 先找动态页面再找静态页面 先找精确错误页面再找模糊页面     注:精确错误页面=50 ...

  3. 百度小程序 配置 app.json 文件

    可以通过配置 app.json 文件,设置 SWAN 的界面.路径.多 TAB 等. app.json 配置项列表如下 属性 类型 必填 描述 pages Array.<string> 是 ...

  4. c++复习——类（2）

    1.this指针 this指针是一个指向对象的指针.  this指针是一个隐含于成员函数中的对象指针.  this指针是一个指向正在调用成员函数的对象的指针.  类的静态成员函数没有this指针 ...

  5. R which

    setwd("E:/courses/molecular biology/homework1st") genes <- read.table('genes.txt',sep = ...

  6. 在XenCenter6.2中构建CentOS7虚拟机的启动错误

    在XenCenter6.2中创建CentOS7虚拟机时,发现系统并没有提供CentOS7 64bit的模板,只有CentOS6 64bit模板.如果采用CentOS6作为其模板来创建CentOS7虚拟 ...

  7. APK文件结构和安装过程

    APK文件结构Android应用是用Java编写的,利用Android SDK编译代码,并且把所有的数据和资源文件打包成一个APK (Android Package)文件,这是一个后缀名为.apk的压 ...

  8. CG-CTF | 综合题

    开场就是一个js混淆,直接丢到console里面 然后根据tip查头: 看到这个tip,一开始还以为要考注入了,用访问历史来进行注入,后来发现是我高估这题了,,,:

  9. HTTP入门（二）：用Chrome开发者工具查看 HTTP 请求与响应

    HTTP入门(二):用Chrome开发者工具查看 HTTP 请求与响应 本文简单总结HTTP的请求与响应. 本文主要目的是对学习内容进行总结以及方便日后查阅. 详细教程和原理可以参考HTTP文档(MD ...

  10. pl/sql的安装使用详解

    一.  先安装  orcale10.1客户端 setup右键属性,按下图设置 net  manager 设置,不设置 pl/sql developer没办法连接 二.再安装 pl/sql develo ...