validate針對checkbox、radio、select標籤的驗證

jquery.validate 是jquery的一個插件，用來輔助開發者在客戶端方便快捷的實現表單驗證，最終達到提升用戶體驗的目的。

 

示例代碼

 

<form id="formLogin" method="post"> <div> <label for="username">Username:</label> <input type="text" id="username" name="username" /> </div> <div> <label for="password">password:</label> <input type="text" id="password" name="password" /> </div> <div> <label for="password1">password1:</label> <input type="text" id="password1" name="password1" /> </div> <div> <label for="sex">sex:</label> <select id="sex" name="sex"> <option id="sexopt" value="" selected="selected">請選擇</option> <option id="sexnan" value="1">男</option> <option id="sexnv" value="2">女</option> </select> </div> <div> <label for="favorite">level:</label> <input type="checkbox" id="sport" name="favorite" value="sport" />sport <input type="checkbox" id="write" name="favorite" value="write" />write </div> <div> <label for="level">level:</label> <input type="radio" id="one" name="level" value="one" />1 <input type="radio" id="two" name="level" value="two" />2 </div> <div> <input id="submit" type="button" value="submit" /> </div> </form> @section scripts{ <script type="text/javascript" src="/content/home/index.js"></script> }

jquery.validate在定位html標籤的時候，默認使用name屬性來獲取標籤，因此須要開發者給須要進行驗證的標籤都加上name屬性，而且賦值。

index.js

$().ready(function () { $("#formLogin").validate({ rules: { username: { required: true }, password: { required: true }, sex: { required: true }, level: { required: true }, favorite: { required: true } }, messages: { username: { required: "please input username" }, password: { required: "please input password" }, sex: { required: "please select sex" }, level: { required: "level requred" }, favorite: { required: "favorite required" } }, errorPlacement: function (error, element) { //指定錯誤信息位置 if (element.is(':radio') || element.is(':checkbox')) { //若是是radio或checkbox var eid = element.attr('name'); //獲取元素的name屬性 error.appendTo(element.parent()); //將錯誤信息添加當前元素的父結點後面 } else { error.insertAfter(element); } } }); }); $("#submit").click(function () { $("#submit").submit(); });

有時候咱們須要使用正則表達式對一些輸入進行驗證，好比說郵箱，電話號碼，或者是用戶名必須字母開頭而且長度要在5-30位，等等之類的。

jquery.validate默認沒有提供正則表達式的驗證，可是它提供了一個擴展，咱們能夠本身添加關於正則表達式的驗證規則。

$(function () { // 判斷用戶輸入的value是否知足傳入的正則params的規範 jQuery.validator.addMethod("pattern", function (value, element, params) { if (!params.test(value)) { return false; } return true; }); });

這樣咱們就能夠像下面這樣使用咱們自定義的正則表達式驗證了。

$().ready(function () { $("#formLogin").validate({ rules: { tel: { required:true, pattern: /^[0-9]+$/ } }, messages: { tel: { required:'tel required', pattern: "regex error" } } }); });

怎麼樣，是否是很酷啊！

$("#formSupplier").validate還有一些其餘的參數，跟多的參數能夠查看

http://blog.csdn.net/a497785609/article/details/5758613

在這裏先介紹兩個比較經常使用的。

errorElement

錯誤提示的html標籤

submitHandler

驗證成功以後的操做

$("#formSupplier").validate({
        errorElement: "span", submitHandler: function (form) { if (btnType == 1) { submitUpdateSupplier(); } else { offShelf(); } }, rules: { txtSuUserName: { required: true, pattern: regexUsername } }， messages: { txtSuUserName: { required: "請填寫編號！", pattern: "請注意，編號只能使用3-15位的字母組合！" } } });