Oliver's Blog

前端表单验证

  • Jul 22, 2016

JavaScript原生验证

<form>元素没有定义novalidate属性，且<input>元素通过一些验证有关的属性开启验证，例如定义required，max，min等属性，表单提交的时候默认自动验证。除此之外可以通过以下JS代码主动触发验证

document.getElementById('form').checkValidity()

jQuery Validation

引入jQuery Validation

<script src="../common/jQuery-3.4.1/jquery-3.4.1.min.js" th:src="@{/static/common/jQuery-3.4.1/jquery-3.4.1.min.js}"></script>
<script src="../common/jquery-validation-1.19.1/jquery.validate.min.js" th:src="@{/static/common/jquery-validation-1.19.1/jquery.validate.min.js}"></script>  
<script src="../common/jquery-validation-1.19.1/additional-methods.min.js" th:src="@{/static/common/jquery-validation-1.19.1/additional-methods.min.js}"></script>

表单例子，用于用户注册

<form class="form-sign formHide" id="signUpForm" th:action="@{/signUp}" method="post" novalidate>  
    <div class="formInput">  
        <label for="usernameSignUp" class="sr-only">Username</label>  
        <input type="text" id="usernameSignUp" name="username" class="form-control" placeholder="Username">  
    </div>    <div class="formInput">  
        <label for="passwordSignUp" class="sr-only">Password</label>  
        <input type="password" id="passwordSignUp" name="password" class="form-control" placeholder="Password">  
    </div>    <div class="formInput">  
        <label for="passwordConfirmSignUp" class="sr-only">Confirm password</label>  
        <input type="password" id="passwordConfirmSignUp" name="confirmPassword" class="form-control" placeholder="Password again">  
    </div>    <button id="signUpSubmitButton" class="btn btn-lg btn-primary btn-block" type="submit">Sign up</button>  
    <p class="mt-5 mb-3 text-muted">&copy; 2017-2019</p>  
</form>

jQuery validation核心方法为validate方法

$("#signUpForm").validate({  
    rules : {  
        username : {  
            required : true,  
            remote : {  
                url : "signUp/validateUsername",  
                method : "GET",  
                data : {  
                    username : function() {  
                        return $("#usernameSignUp").val();  
                    }  
                },  
                dataType : "text"  
            }  
        },  
        password : {  
            required : true  
        },  
        confirmPassword : {  
            required : true,  
            equalTo : "#passwordSignUp"  
        }  
    },  
    messages : {  
        username : {  
            remote : "Username exists."  
        }  
    },  
    validClass : "is-valid",  
    errorClass : "is-invalid",  
    errorElement : "div",  
    showErrors : function() {  
        this.defaultShowErrors();  
        $("div.is-invalid").addClass("invalid-feedback");  
    }  
});

后端远程验证注册用户名是否重复

@RequestMapping(value = "/signUp/validateUsername", method = RequestMethod.GET, produces = MediaType.TEXT_PLAIN_VALUE)  
@ResponseBody  
public String signUpValidateUsername(String username, HttpServletResponse httpServletResponse) {  
    boolean result = userService.validateUsernameDuplicated(username);  
    httpServletResponse.setCharacterEncoding("UTF-8");  
    httpServletResponse.setContentType("text/plain");  
    return String.valueOf(result);  
}
Search