jQuery validate remote实现异步验证

亦凉 2022-05-09 09:18 170阅读 0赞

html文件内容（springboot项目，使用了thymeleaf模板引擎）

<!DOCTYPE html>
    <html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>使用 jQuery validate 表单验证</title>
        <script th:src="@{/scripts/jquery-1.7.2.min..js}"></script>
        <script th:src="@{/scripts/jquery.validate.min.js}"></script>
        <script th:src="@{/scripts/messages_zh.min.js}"></script>
        <script>
            $(document).ready(function () {
                $("#form1").validate({
                    rules:{  //校验规则
                        userName:{
                            required: true,
                            minlength: 2,
                            remote:{
                                url: "userLogin",     //后台处理程序
                                type: "post",               //数据发送方式
                                dataType: "json",           //接受数据格式
                                data: {                     //要传递的数据
                                    userName: function() {
                                        return $("#userName").val();
                                    }
                                }
                            }
                        },
                        email:{
                            required:true
                        },
                        password:{
                            required: true,
                            minlength: 5
                        }
                    } ,
                    messages:{ //提示
                        userName:{
                            required: "请输入用户名",
                            minlength: "用户名必需由两个字母组成",
                            remote:"用户不存在"
                        },
                        email:{
                            required:"请输入邮箱地址"
                        },
                        password:{
                            required: "请输入密码",
                            minlength: "密码长度不能小于 5 个字母"
                        }
                    }
                });
            });
        </script>
    </head>
    <body>
    <form id="form1" action="/userLogin">
        <input type="text" id="userName" class="userName" name="userName"><br>
        <input type="email" id="email" name="email"><br>
        <input type="password" id="password" class="password" name="password"><br>
        <input type="submit" value="login">
    </form>
    </body>
    </html>

后台验证程序代码（省去了从数据库中查找数据这一操作，该项目是springboot项目）

package com.njxz.demo.controller;
    
    import org.apache.ibatis.annotations.Param;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;
    
    @RestController
    public class UserController {
    
        //对应前端的remote中的URL地址 
        //远程地址只能输出 "true" 或 "false"，不能有其他输出
        @RequestMapping("/userLogin")
        public String userLogin(@Param("userName") String userName){//验证用户是否存在
            if(userName.equals("yxc")){
                return "true";
            }
            return "false";
        }
    }

即在userName输入框中只有当输入"yxc"时该用户才存在，输入其他值用户不存在。

效果图

![70][]

![70 1][]

![70 2][]

[70]: /images/20220509/3f5c569c56ff4bf29a871632cdfd5905.png
[70 1]: /images/20220509/9827ceab8aff4d7bb955b013c3fb9087.png
[70 2]: /images/20220509/b74b3bdb459a4457a4206c180026224c.png