jQuery Validate非同步ajax方式驗證

admin發表於2019-02-02
jQuery非同步
Validate外掛提供了ajax方式的驗證，使用remote規則即可。

其實他就是對jQuery ajax()的一個封裝。

程式碼如下: 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://www.softwhy.com/demo/jQuery/js/jquery.validate.js"></script>
<script src="http://www.softwhy.com/demo/jQuery/js/messages_zh.js"></script>
<script>
$(document).ready(function() { 
  $("#myform").validate({   
    errorPlacement: function(error, element) {    
      error.insertAfter(element);   
    },
    rules: {       
      username: {         
        required: true,
        remote: {        
          url: "tel.php",
          type: "post",
          dataType: "html",
          data: {
            username: function() {
              return $("#username").val();
            }       
          },
          dataFilter: function(data, type) {      
            if (data == "yes")
              return true;
            else
              return false;
          }       
        }       
      },
      telphone: {        
        required: true,
        rangelength: [11, 11],
        phonecheck: true,
        honesame: true      
      }    
    },
    messages: {      
      telphone: {        
        required: "請填寫電話號碼",
        rangelength: "電話號碼必須是11位數字"      
      },
      username: {        
        required: "請填寫使用者名稱",
        remote: "使用者名稱已經存在"      
      }    
    }
  }) 
});
</script>
</head>
<body>
  <form id="myform" method="post">
    <label>電話:</label>
    <input name="telphone" class="required"/><br><br>
    <label>姓名</label>
    <input name="username" id="username" class="required"/>
    <br />
    <input type="submit" value="Submit" />
  </form>
</body>
</html>

使用remote規則即可實現ajax驗證，它是對ajax()的一個封裝。

url規則的是要驗證資料提交的地址，根據remote()返回true還是false來判斷驗證是否成功。

非常簡單的簡單，配置幾乎和ajax()完全一樣。

特別說明:提交的資料最好是: 

[JavaScript] 純文字檢視 複製程式碼
username: function() {
  return $("#username").val();
}

而不是下面這種方式: 

[JavaScript] 純文字檢視 複製程式碼
username:("#username").val()

因為這種方式可能導致提交的資料不是最新的，而是使用老舊資料，從而導致錯誤。

Validate外掛是很靈活的，並不是說不使用remote就無法進行ajax方式驗證了，變通一下也是可以的: 

[JavaScript] 純文字檢視 複製程式碼
jQuery.validator.addMethod("phonesame", function(value, element) {
  var flag = 1;
  $.ajax({
    type:"POST",
    url:'tel.php',
    async:false,
    data:{'tel':value},
    success: function(msg){
      if(msg == 'yes'){
        flag = 0;
      }
    }
  });
  if(flag == 0){
    return false;
  }else{
    return true;
  }
 }, "號碼已經重複");

相關文章