1. 程式人生 > >jquery表單校驗規則及示例

jquery表單校驗規則及示例

jquery表單校驗,必須引入jquery.validator.js檔案。
1、js的$(function(){}中初始化校驗引數及校驗規則;

$(function () {
    var $form = $('#addJobInfo');
    var $form = $('#addJobInfo');
    $form.validator({
        debug: false,
        stopOnError: true,
        focusInvalid: false,
        showOk: false,
        timely: 0,
        msgMaker: false,
        fields: {
            job_group: {rule: "required;"},
            processid: {rule: "required;"},
            taskName: {rule: "required;length[~100];"},
            executorHandler: {rule: "required;"},
            overTime: {rule: "required;digits"},
            beginTime: {rule: "required;"},
            endTime: {rule: "required;"},
            // invalDate: {rule: "required;digits"},
            targettable: {rule: "required;length[~100];"},
            targettable_index: {rule: "required;length[20~100];"},    --20到100個字元
            jobCron: {rule: "required;length[~200];"}
        }
    });
        $form.on("validation", $.validation);
}

2、提交表單的方法中獲取校驗(自動返回介面點對點提示)

var submitForm = function(){
        var $form = $('#addJobInfo');
    $form.isValid(function (isValied) {
        if (isValied) {
            submitNow($dialog, $grid, $pjq);//todo具體提交操作
        }
    });
}

jquery預設校驗規則整理
(1)required:true        必輸欄位
(2)remote:"check.php"   使用ajax方法呼叫check.php驗證輸入值
(3)email:true           必須輸入正確格式的電子郵件
(4)url:true     必須輸入正確格式的網址
(5)date:true    必須輸入正確格式的日期 日期校驗ie6出錯,慎用
(6)dateISO:true 必須輸入正確格式的日期(ISO),例如:2009-06-23,1998/01/22 只驗證格式,不驗證有效性
(7)number:true  必須輸入合法的數字(負數,小數)
(8)digits:true          必須輸入整數
(9)creditcard:  必須輸入合法的信用卡號
(10)equalTo:"#field"    輸入值必須和#field相同
(11)accept:     輸入擁有合法字尾名的字串(上傳檔案的字尾)
(12)maxlength:5 輸入長度最多是5的字串(漢字算一個字元)
(13)minlength:10                輸入長度最小是10的字串(漢字算一個字元)
(14)rangelength:[5,10]  輸入長度必須介於 5 和 10 之間的字串")(漢字算一個字元)
(15)range:[5,10]        輸入值必須介於 5 和 10 之間
(16)max:5       輸入值不能大於5
(17)min:10      輸入值不能小於10