jQuery驗證框架（六）內置驗證方法 (jQuery validation)

時間 2019-11-06

標籤 jquery 驗證框架內置方法 validation 欄目 JQuery 简体版

原文原文鏈接

jQuery驗證框架

6、框架內建的驗證方法( List of built-in Validation methods )

[1] required( )       返回：Boolean
      說明：讓表單元素必須填寫（選擇）。
                  若是表單元素爲空(text input)或未選擇(radio/checkbox)或選擇了一個空值(select)。
                  做用於text inputs, selects, checkboxes and radio buttons.
                  當select提供了一個空值選項<option value="">Choose...</option>則強迫用戶去選擇一個不爲空的值。php

Js代碼

$("#myform").validate({
rules: {
fruit: "required"
}
});

$("#myform").validate({
  rules: {
    fruit: "required"
  }
});

[2] required( dependency-expression )       返回：Boolean
      參數 dependency-expression     類型：String    在form上下文中的一個表達式( String )，表單元素是否須要填寫依賴於該表達式返回一個或多個元素。
      說明：讓表單元素必須填寫（選擇），依賴於參數的返回值。
                  表達式中像#foo:checked, #foo:filled, #foo:visible這樣的選擇過濾器將常常用到。git

Js代碼

$("#myform").validate({
rules: {
details: {
required: "#other:checked"
}
}, debug:true
});
$("#other").click(function() {
$("#details").valid();
});

$("#myform").validate({
  rules: {
    details: {
      required: "#other:checked"
    }
  }, debug:true
});
$("#other").click(function() {
   $("#details").valid();
});

[3] required( dependency-callback )       返回：Boolean
      參數 dependency-callback     類型：Callback   該回函數以待驗證表單元素做爲其惟一的參數。當該回調函數返回true，則該表單元素是必須的。
      說明：讓表單元素必須填寫（選擇），依賴於參數的返回值。
                  表達式中像#foo:checked, #foo:filled, #foo:visible這樣的選擇過濾器將常常用到。ajax

Js代碼

$("#myform").validate({
rules: {
age: {
required: true,
min: 3
},
parent: {
required: function(element) {
return $("#age").val() < 13;
}
}
}
});
$("#age").blur(function() {
$("#parent").valid();
});

$("#myform").validate({
  rules: {
    age: {
      required: true,
      min: 3
    },
    parent: {
      required: function(element) {
        return $("#age").val() < 13;
      }
    }
  }
});
$("#age").blur(function() {
    $("#parent").valid();
});

[4] remote( options )       返回：Boolean
      參數 options      類型：String, Options    請求服務器端資源的url(String)。或$.ajax()方法中的選項(Options)。
      說明：請求服務器端資源驗證。
                  服務器端的資源經過$.ajax (XMLHttpRequest)獲取key/value對，響應返回true則表單經過驗證。express

Js代碼

$("#myform").validate({
rules: {
email: {
required: true,
email: true,
remote: "check-email.php"
}
}
});

$("#myform").validate({
  rules: {
    email: {
      required: true,
      email: true,
      remote: "check-email.php"
    }
  }
});

[5] minlength( length )       返回：Boolean
      參數 length      類型：Integer    至少須要多少個字符數。
      說明：確保表單元素知足給定的最小字符數。
                  在文本框(text input)中輸入的字符太少、沒有選中足夠的複選框(checkbox)、一個選擇框(select)中沒有選中足夠的選項。這以上三種狀況中該方法返回false。服務器

Js代碼

$("#myform").validate({
rules: {
field: {
required: true,
minlength: 3
}
}
});

$("#myform").validate({
  rules: {
    field: {
      required: true,
      minlength: 3
    }
  }
});

[6] maxlength( length )       返回：Boolean
      參數 length      類型：Integer    容許輸入的最大字符數。
      說明：確保表單元素的文本不超過給定的最大字符數。
                  在文本框(text input)中輸入的字符太多、選擇太多的複選框(checkbox)、一個選擇框(select)中沒有選中太多的選項。這以上三種狀況中該方法返回false。框架

Js代碼

$("#myform").validate({
rules: {
field: {
required: true,
maxlength: 4
}
}
});

$("#myform").validate({
  rules: {
    field: {
      required: true,
      maxlength: 4
    }
  }
});

[7] rangelength( range )       返回：Boolean
      參數 range      類型：Array<Integer>    容許輸入的字符數範圍。
      說明：確保表單元素的文本字符數在給定的範圍當中。
                  在文本框(text input)中輸入的字符數不在給定範圍內、選擇的複選框(checkbox)不在給在的範圍內、一個選擇框(select)選中的選項不在給定的範圍內。這以上三種狀況中該方法返回false。dom

Js代碼

$("#myform").validate({
rules: {
field: {
required: true,
rangelength: [2, 6]
}
}
});

$("#myform").validate({
  rules: {
    field: {
      required: true,
      rangelength: [2, 6]
    }
  }
});

[8] min( value )       返回：Boolean
      參數 value      類型：Integer    須要輸入的最小整數。
      說明：確保表單元素的值大於等於給定的最小整數。
                  該方法只在文本輸入框(text input)下有效。函數

Js代碼

$("#myform").validate({
rules: {
field: {
required: true,
min: 13
}
}
});

$("#myform").validate({
  rules: {
    field: {
      required: true,
      min: 13
    }
  }
});

[9] max( value )       返回：Boolean
      參數 value      類型：Integer    給定的最大整數。
      說明：確保表單元素的值小於等於給定的最大整數。
                  該方法只在文本輸入框(text input)下有效。ui

Js代碼

$("#myform").validate({
rules: {
field: {
required: true,
max: 23
}
}
});

$("#myform").validate({
  rules: {
    field: {
      required: true,
      max: 23
    }
  }
});

[10] range( range )       返回：Boolean
      參數 range     類型：Array<Integer>    給定的整數範圍。
      說明：確保表單元素的值在給定的範圍當中。
                  該方法只在文本輸入框(text input)下有效。url

Js代碼

$("#myform").validate({
rules: {
field: {
required: true,
range: [13, 23]
}
}
});

$("#myform").validate({
  rules: {
    field: {
      required: true,
      range: [13, 23]
    }
  }
});

[11] email( )       返回：Boolean
      說明：確保表單元素的值爲一個有效的email地址。
                  若是值爲一個有效的email地址，則返回true。該方法只在文本輸入框(text input)下有效。

Js代碼

$("#myform").validate({
rules: {
field: {
required: true,
email: true
}
}
});

$("#myform").validate({
  rules: {
    field: {
      required: true,
      email: true
    }
  }
});

[12] url( )       返回：Boolean
      說明：確保表單元素的值爲一個有效的URL地址(http://www.mydomain.com)。
                  若是值爲一個有效的url地址，則返回true。該方法只在文本輸入框(text input)下有效。

Js代碼

$("#myform").validate({
rules: {
field: {
required: true,
url: true
}
}
});

$("#myform").validate({
  rules: {
    field: {
      required: true,
      url: true
    }
  }
});

[13] date( ) dateISO( ) dateDE( ) 返回：Boolean
說明：用來驗證有效的日期。這三個函數分別驗證的日期格式爲(mm/dd/yyyy)、(yyyy-mm-dd,yyyy/mm/dd)、(mm.dd.yyyy)。

Js代碼

$("#myform").validate({
rules: {
field: {
required: true,
date: true
/*dateISO: true
dateDE: true*/
}
}
});

$("#myform").validate({
  rules: {
    field: {
      required: true,
      date: true
      /*dateISO: true
        dateDE: true*/
    }
  }
});

[14] number( ) numberDE() 返回：Boolean
說明：用來驗證小數。number()的小數點爲圓點( . )，numberDE()的小數點爲英文逗號( , )。

Js代碼

$("#myform").validate({
rules: {
field: {
required: true,
number: true
//numberDE: true
}
}
});

$("#myform").validate({
  rules: {
    field: {
      required: true,
      number: true
      //numberDE: true
    }
  }
});

[15] digits() 返回：Boolean
說明：確保文本框中的值爲數字。

Js代碼

$("#myform").validate({
rules: {
field: {
required: true,
digits: true
}
}
});

$("#myform").validate({
  rules: {
    field: {
      required: true,
      digits: true
    }
  }
});

[16] digits() 返回：Boolean
說明：確保文本框中的值爲數字。

Js代碼

$("#myform").validate({
rules: {
field: {
required: true,
digits: true
}
}
});

$("#myform").validate({
  rules: {
    field: {
      required: true,
      digits: true
    }
  }
});

[17] accept( [extension] )       返回：Boolean
      參數 extension(Optional)     類型：String    容許的文件後綴名，用"|"或","分割。默認爲"png|jpe?g|gif"
      說明：確保表單元素接收給定的文件後綴名的文件。若是沒有指定參數，則只有圖片是容許的(png,jpeg,gif)。

Js代碼

$("#myform").validate({
rules: {
field: {
required: true,
accept: "xls|csv"
}
}
});

$("#myform").validate({
  rules: {
    field: {
      required: true,
      accept: "xls|csv"
    }
  }
});

[18] equalTo( other )       返回：Boolean
      參數 other      類型：Selector    要與當前值比較的另外一個表單元素。
      說明：確保兩個表單元素的值是一致的。

Js代碼

$("#myform").validate({
rules: {
password: "required",
password_again: {
equalTo: "#password"
}
}
});

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。