1. 程式人生 > >validate針對checkbox、radio、select標籤的驗證

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還有一些其他的引數,跟多的引數可以檢視

在這裡先介紹兩個比較常用的。

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位的字母組合!"
            }
        }
});