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. SQL 介绍和操作

    1.什么是SQL SQL的全称是“结构话查询语句”(Structured Query Language ),是1974年有Boyce和chamberlin 提出来的.经过多年的发展,SQL语言已经成为 ...

  2. Bugku 杂项 隐写

    隐写 下载后打开压缩包发现是一张图片 用winhex打开 图中红色框内是PNG的PE头 在IHDR后面的八个字节(黄色框部分)为该图片的长度.宽度信息 将黄色框内最后一个字节由A4改为F4后另存为图片 ...

  3. Quadratic equation

    Quadratic equation 牛客多校九B 给定 $(x+y)\%mod=b$ $(x*y)\%mod=c$ 求 $x,y$ 二次剩余 求$((x-y)^{2})\%mod = (b\time ...

  4. Educational Codeforces Round 16 D. Two Arithmetic Progressions （不互质中国剩余定理）

    Two Arithmetic Progressions 题目链接: http://codeforces.com/contest/710/problem/D Description You are gi ...

  5. css基础—字体那些事

    css基础-字体那些事 1. 首先讲字的大小样式等 字体大小 font-size: 40px; 文字字体 font-family: "宋体",Arial; 文字样式 font-st ...

  6. 使用wxpy模块了解微信好友

    网上看了一篇python文章,内容简单有趣,正好可以练习一下.原文连接:http://mp.weixin.qq.com/s/oI2pH8uvq4kwYqc4kLMjuA 一.环境:Windows+py ...

  7. 如何查看yum安装的程序包都放在哪些地方了?

    yum安装, 是先下载下来, 然后安装, 用dnf代替yum后, 配置文件跟yum类似, 也是放在 /etc/dnf/ 目录下的, 也有dnf.conf 配置文件等 dnf list后面还可以跟参数: ...

  8. Vue中解决路由切换，页面不更新的实用方法

    前言:vue-router的切换不同于传统的页面的切换.路由之间的切换,其实就是组件之间的切换,不是真正的页面切换.这也会导致一个问题,就是引用相同组件的时候,会导致该组件无法更新,也就是我们口中的页 ...

  9. git_03_git可视化工具github Desktop使用教程

    前言 github desktop是github的桌面客户端,支持Windows和Mac OS版本.使用简单,可以查看.切换和创建分支,以及提交.合并或部署代码. 下载 由于电脑限制,这里以mac o ...

  10. Android安全测试（一）数字签名检测

    1.测试环境 SDK: Java JDK, Android SDK. 下图为利用中间人攻击的手段,将智能电视上所有影片的封面图替换的实际效果图 利用中间人攻击还可以进行token获取等,所以不要轻易使 ...