jQuery的validate插件

 

http://www.runoob.com/jquery/jquery-plugin-validate.html

連接中已經包含了大部分的使用規則，這裏記錄下一些常見的用法

1.提示變紅

<style>
    .error {
        color: red;
    }
</style>

2.自定義提示位置

默認的錯誤信息提示是在根據name選定的元素的後面添加，因此在這裏自定義位置的時候只要在想要的位置上添加便可，此時在script中不須要添加校驗規則。

<div class="form-group opt">
                    <label for="sex1" class="col-sm-2 control-label">性別</label>
                    <div class="col-sm-6">
                        <label class="radio-inline"> <input type="radio" name="sex" id="sex1" value="male" checked="checked"> 男 </label>
                        <label class="radio-inline"> <input type="radio" name="sex" id="sex2" value="female"> 女 </label>
                        <label class="error" for="sex" style="display: none">您沒有第三種選擇</label>
                    </div>
                </div>

3.自定義校驗規則（以用戶名是否存在的校驗位例）

$.validator.addMethod(
        //規則名稱
        "checkUsername",
        //校驗的函數
        function (value, element, params) {
            //value: 輸入的內容
            //element:被校驗的元素對象
            //params:規則對應的參數值
            //mark一下
            var flag = true;

            //ajax校驗
            $.ajax({
                url: "${pageContext.request.contextPath}/checkUsername",
                async: false,
                data: {"username": value},
                type: "POST",
                dataType: "json",
                success: function (data) {
                    flag = !data.isExist;
                }
            });
            return flag;
        }
    );

$(function () {
        $("#registerForm").validate({
            rules: {
                "username": {
                    "checkUsername": true
                }
              },
            messages: {
                "username": {
                    "checkUsername": "用戶名已經存在"
                }
            }
        });
    });

值得注意的一點是： async: 必定要設置爲false，不然，ajax函數對於flag是沒有意義的，由於回調函數做爲入參的話，異步提交的方式會直接返回flag以後，再進行ajax函數調用，當設置爲非異步，會等回調函數執行完畢在進行flag的返回。