jQuery validate remote实现异步验证

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"时该用户才存在，输入其他值用户不存在。

效果图

jQuery validate remote实现异步验证

猜你喜欢