JQuery Validate 筆記

2017-06-15

<script>
//檢核是否為中文
function isChinese(str) {
    var regx = /[^\u4e00-\u9fa5]/;
    if (regx.test(str)) {
        return false;
    } else {
        return true;
    }
}
//自訂jQuery.validator 驗證規則
jQuery.validator.addMethod("chkChinese", function (value, element) {
    return isChinese(value)
}, "欄位只能輸入中文.");
//表單驗證
function formValid(title, formelement) {
    $(formelement).validate({
        errorPlacement: function (error, element) { }//取消頁面上JQuery validate帶出來的錯誤label
    });
    if (!$(formelement).valid()) {
        var errorList = $(formelement).validate().errorList;
        var errorMessage = '';
        var arrayErrMessage = [];
        for (var i = 0; i < errorList.length; i++) {
           //html element 加上desc的屬性 undefined
            var desc = $(errorList[i].element).attr('desc');
            desc = desc == undefined ? "" : desc;
            errorMessage += desc + errorList[i].message + '<br>';
        };

        
        showAlert(title, errorMessage, '', elementfocus, errorList[0].element);
        return false;
    };
    return true;
};
</script>
<form id='test'>
<input type='text' class='required chkChinese' desc="姓名" >
</form>
<a onclick='formValid("標題","#test")'>確定</a>

自訂的檢核

chkChinese: 檢核該欄位是否為中文

套件提供的檢核

required：必填欄位
email：格式要符合E-Mail格式
url：格式要符合網址格式，如：https://www.minwt.com
number：數字格包含小數點
digits：數字為正整數
date：日期格式
dateISO：日期格式，格式必需為YYYY/MM/DD、YYYY-MM-DD、YYYYMMDD
equalTo：與某一欄位值相同

minValue：最小字元長度
maxValue：最大字元長度
rangeValue：字元長度區間長度

minLength：最小字元長度(漢字算一個字符)
maxLength：最大字元長度(漢字算一個字符)
rangeLength：字元長度區間長度(漢字算一個字符)

回首頁