js的validate插件异步效验

Posted 2021-01-16 大薯片

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js的validate插件异步效验相关的知识，希望对你有一定的参考价值。

　　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插件异步效验的主要内容，如果未能解决你的问题，请参考以下文章

ajax和jQuery同时操作唯一效验和正则表达式

自定义validate的效验规则

Springboot使用validator进行参数校验