jQuery表单验证

在注册时，有时候需要对表单的各项进行非空以及字数的限制，需要自定义表单验证规则：

示例：

HTML：

<form id="signupForm"  th:action="@{save_register}">
                <input id="name" name="name" type="text" autofocus="" placeholder="用户名" class="form-control"
                       th:field="${user.name}">
                <input id="email" name="email" type="text" autofocus="" placeholder="邮箱" class="form-control"
                       th:field="${user.email}">

                <div class="radios" id="sex">
                    <label for="radio-01" class="label_radio col-lg-6 col-sm-6">
                        <input type="radio" checked="" value="男" id="radio-01" name="sex"> 男
                    </label>
                    <label for="radio-02" class="label_radio col-lg-6 col-sm-6">
                        <input type="radio" value="女" id="radio-02" name="sex"> 女
                    </label>
                </div>

                <input id="password" name="password" type="password" placeholder="密码" class="form-control"
                       th:field="${user.password}">
                <input id="confirm_password" name="confirm_password" type="password" placeholder="确认密码"
                       class="form-control">
                <label class="checkbox">
                    <input id="agree" name="agree" type="checkbox" value="agree this condition"> I agree to the Terms of
                    Service and Privacy
                    Policy
                </label>
                <button type="submit" class="btn btn-lg btn-login btn-block">
                    <i class="fa fa-check"></i>
                </button>
            </form>

js:

var Script = function () {

    // $.validator.setDefaults({
    //     submitHandler: function () {
    //         alert("submitted!");
    //     }
    // });

    $().ready(function () {
        // validate the comment form when it is submitted
        // $("#commentForm").validate();

        // validate signup form on keyup and submit
        $("#signupForm").validate({
            rules: {
                name: {
                    required: true,
                    minlength: 2,
                    remote: {
                        url: "check_userName",
                        type: "post",
                        delay:1000,
                        data: {
                            name:function (validator) {
                                return $("#signupForm").find($("#name")).val();
                            }
                        }
                    }
                },
                password: {
                    required: true,
                    minlength: 5
                },
                confirm_password: {
                    required: true,
                    minlength: 5,
                    equalTo: "#password"
                },
                email: {
                    required: true,
                    email: true
                },
                 agree: "required"
            },
            messages: {
                name: {
                    required: "请输入用户名",
                    minlength: "用户名至少2个字符",
                    remote:"用户名已存在"
                },
                password: {
                    required: "请输入密码",
                    minlength: "密码至少5个字符"
                },
                confirm_password: {
                    required: "请再次输入密码",
                    minlength: "密码至少5个字符",
                    equalTo: "两次密码不一样"
                },
                email: "请输入正确的邮箱",
                agree: "请同意我们的声明"
            }
        });
    });
}();

这里在验证用户名是否存在时，用到了jQuery的remote方法，其中data项是向后台传递的数据，因为要判断的是用户名，所以传的是表单中id为name的值，注意：为避免表单中数据一开始为空，而导致传值为null的情况下，一定要写成function (validator) {
           return $("#signupForm").find($("#name")).val();}的形式。

向后台传递用户名后，后台应该根据传来的用户名在数据库中进行判断是否已经存在，如果存在，返回false；不存在，则返回true。注意注意：remote方法返回的是Boolean类型，所以只要返回true or false就可以啦~~~，因为之前不知道，被坑惨了。

controller：

@ResponseBody
    @RequestMapping("check_userName")
    public boolean checkUser(HttpServletRequest request){
        String data = request.getParameter("name");
        Users users = userService.getUserByName(data);
        System.out.println(data);
        System.out.println(users);
        if (data != null) {
            if (users != null) {
                //如果用户名存在
                return false;
            } else {
                return true;
            }
        } else {
            return false;
        }
    }

表单提交：

$.validator.setDefaults({
        submitHandler: function (form) {
            alert("submitted!");
            form.submit();
        }
    });

一定要加上form.submit();这一句才能让表单提交跳转