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. LeetCode--098--验证搜索二叉树（python）

    给定一个二叉树,判断其是否是一个有效的二叉搜索树. 假设一个二叉搜索树具有如下特征: 节点的左子树只包含小于当前节点的数.节点的右子树只包含大于当前节点的数.所有左子树和右子树自身必须也是二叉搜索树. ...

  2. 微信小程序细节部分

    微信小程序和HTML区别: 1.开发工具不同,H5的开发工具+浏览器Device Mode预览,小程序的开发基于自己的开发者工具 2.开发语言不同,小程序自己开发了一套WXML标签语言和WXSS样式语 ...

  3. zrender笔记----（数字Number组件）出现的问题和解决办法

    1.期望的效果是这样子的(这也是最终结果): 2.开始是用json假数据,开始没考虑null的问题,导致在判断传值处,判断有误. 导致在对接接口时,凌乱了,后来修改了下变成后面图C的逻辑,json数据 ...

  4. BZOJ 3319: 黑白树 并查集 + 离线 + 思维

    Description 给定一棵树,边的颜色为黑或白,初始时全部为白色.维护两个操作: 1.查询u到根路径上的第一条黑色边的标号. 2.将u到v    路径上的所有边的颜色设为黑色. Notice:这 ...

  5. HDU 1134 Game of Connections（卡特兰数+大数模板）

    题目代号:HDU 1134 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1134 Game of Connections Time Limit: 20 ...

  6. RedHat下使用gcc编译HelloWorld.cpp

    gcc ./HelloWorld.cpp 错误: /tmp/ccZuz3Ca.o:(.eh_frame+0x12): undefined reference to `__gxx_personality ...

  7. CG-CTF | Hello,RE!

    菜狗开始向着pwn与re进军了(●'◡'●)[说白了,还是在水博客吧] 按r出flag: galf    leW{    emoc    _oT_    W_ER  dlro   }! 反一下:fla ...

  8. shell中的=~的简单用法

    其中 ~ 其实是对后面的正则表达式表示匹配的意思,如果匹配就输出1, 不匹配就输出0 [[ $test =~ ^[0-9]+ ]] && echo 1 || echo 0

  9. datatbales的数据源类型(Data source types)

    数据是复杂的,并且所有的数据是不一样的.因此 DataTables 中有很多的选项可用于配置如何获得表中的数据显示,以及如何处理这些复杂的数据. 本节将讨论 DataTables 处理数据的三个核心概 ...

  10. c# 用DotNetZip来解压/压缩文件

    //https://archive.codeplex.com/?p=dotnetzip //最新在Nuget 下载DotNetZip using Ionic.Zip; private void but ...