1. 程式人生 > >jQuery 之 validate新增ajax函式

jQuery 之 validate新增ajax函式

1.使用介紹
(1)jQuery的validate功能:提供格式驗證。
(2)使用時需要引入兩個jsk庫檔案:

<script src="../js/login/modernizr-2.6.2.min.js"></script>
<script src="../js/login/jquery.min.js"></script>

自己定義的規則寫入自定義的js庫中,一併引入:

<script src="../js/login/jquery.validate.js"></script>

(3)使用格式

$().ready(function
() {
$("#signupForm").validate({ rules:{ //校驗規則 Username:{ //控制元件name屬性值 } }, messages:{ //錯誤提示資訊 Username:{ } }, });

(4)出錯時,預設在校驗元素後新增加一label標籤,並新增預設屬性。

<label id="xxx-error"  for="xxx" style="display: inline-block;"></label>

(5)規則介紹
hightlight:跟一個函式,無預設規則,需自定義樣式給未通過驗證的元素加效果。函式中的element指向當前校驗的元素。

highlight : function(element) { 
                   $(element).addClass('has-error');  
               } 

2.自定義規則之新增ajax函式
例如:自定義規則,驗證資料庫中該使用者名稱是否存在。

$.validator.addMethod("checkUsername",function(value,element,params){ 
        $.ajax({url:"/rz/LoginServlet?method=checkUsername",
            data:{
                Username:$("#susername"
).val() }, success:function(data){ if(data == "true") { $("#namehint").empty(); document.getElementById("susername-error").innerText="使用者名稱已存在,請重新輸入"; $("#susername").val(""); }else{ $("#namehint").empty(); $("#susername").removeClass("has-error"); } } });

(1)addMethod(name,method,message)方法
name:引數 name 是新增的方法的名字
method:引數 method 是一個函式,接收三個引數 (value,element,param) 。value 是元素的值,element 是元素本身,param 是引數。
message:引數message是自定義的錯誤提示
(2)使用ajax校驗時,使用alert後存在多次請求問題,儘量別使用alert提示資訊。
(3)使用ajax時,需要將返回的資料新增到提示標籤中,可通過出錯提示標籤的id屬性,新增到預設的出錯標籤中。
(4)使用append函式,將新建立元素當子元素新增在被追加元素中。如果是input標籤使用append函式,不會顯示提示資訊內容,但通過控制檯,可檢視到新增成功後的排布為:

<input id="myhint"><span>新增成功</span></input>