茄子在线看片免费人成视频,午夜福利精品a在线观看,国产高清自产拍在线观看,久久综合久久狠狠综合

Ajax在Web應用中的作用越來越大，許多工具都包含了對這一功能的使用，以下是對這些常用工具中Ajax的典型實例.

一、簡單應用實例：

1.用class樣式進行驗證，用法簡單，但不能自定義錯誤信息，只能修改jquery-1.4.1.min.js中的內置消息，也不支持高級驗證規(guī)則。

<script type="text/javascript" language="javascript" src="http://www.jb51.net/Scripts/jquery-1.4.1.min.js"></script>

<script type="text/javascript" language="javascript" src="http://www.jb51.net/Scripts/jquery.validate.min.js"></script>

<h2>ValidateTest</h2>

<form id="loginForm" action="post">

 <table border="0" cellpadding="0" cellspacing="0">

  <tr>

   <td>

 　　　　<input type="text" id="UserEmail" class="required email" /></td>

  </tr>

  <tr>

   <td>

 　　　　<input type="password" id="Password" class="required" /></td>

  </tr>

  <tr>

   <td>

    <input type="submit" value="submit" onclick="checkInput();" />

   </td>

  </tr>

 </table>

</form>

<script language="javascript" type="text/javascript">

 function checkInput() {

  if ($("#loginForm").valid()) {

   return true;

  }

  return false;

 }

</script>

當然，如果不希望使用onclick事件進行提交驗證，也可以在頁面加載時加上jQuery的監(jiān)控，代碼如下：

$(document).ready(function () {

 jQuery("#loginForm").validate();

});

這時就不需要在提交按鈕上加 onclick="checkInput();"這個事件了。

2.使用Json字符串驗證，使用該規(guī)則驗證，必須額外引入jquery.metadata.pack.js文件

修改上面的兩個INPUT如下：

<input type="text" id="UserEmail" class="{validate:{ required:true,email:true }}" />

<input type="password" id="Password" class="{validate:{required:true,minlength:6,messages:{required:'請輸入密碼 ',minlength:'密碼至少6位'}}}" />

可以看到，我們已經可以自定義錯誤消息了。

另外必須在頁面中加上以下代碼：

$(document).ready(function () {

 $("#loginForm").validate({

  meta: "validate"

 });

});

二、驗證規(guī)則的應用

1.使用class驗證的規(guī)則：

在class中可以使用：required，email，number，url，date，dateISO，dateDE，digits，creditcard，phoneUS

可以增加屬性：minlength，maxlength，min，max，accept，remote（注：請檢查是否返回是bool還是xml），equalTo='#password'

沒有找到使用辦法的內置方法：required(dependency-expression)，required(dependency-callback)，range，rangelength

2.使用Json對象驗證的規(guī)則：

在class中進行如下定義：class=“{validate:{required:true,minlength:6,messages:{required:'請輸入密碼',minlength:'密碼太短啦至少6位'}}}”

我們仍可進行以下定義：number:true, email:true, url:true, date:true, dateISO:true, dateDE:true, digits:true, creditcard:true, phoneUS:true

min:3, max:10, minlength:3, maxlength:10，required: '#other:checked'【此處表達式函數(shù)為required(dependency-expression)】

相比使用class來說，我們已經可以使用range方法了，可定義為數(shù)字range:[3,10]，字符串長度rangelength:[3,10]，remote:url，accept:'.csv|.jpg|.doc|.docx', equalTo:'#Password'

沒有找到使用方法的內置方法：required(dependency-callback)

三、高級驗證方法

在前面說到的簡單驗證中，使用起來非常簡單，有些傻瓜式的味道，但畢竟有些內置規(guī)則不能使用。但要想做到靈活運用，還是需要通過JS編碼來完成。這樣不但所有的內置規(guī)則可以使用，而且我們還可以自定義驗證規(guī)則。以下實例我從易到難逐個列出：

1.編寫JS的簡單方法

仍以登錄驗證為例：

<script type="text/javascript" language="javascript" src="http://www.jb51.net/Scripts/jquery-1.4.1.min.js"></script>

<script type="text/javascript" language="javascript" src="http://www.jb51.net/Scripts/jquery.validate.min.js"></script>

<h2>Validate-High</h2>

<form action="" id="loginForm" method="post">

 <table border="0" cellpadding="0" cellspacing="0">

  <tr>

   <td>

    <input type="text" id="UserEmail" />

   </td>

  </tr>

  <tr>

   <td>

   <input type="password" id="Password" />

   </td>

  </tr>

  <tr>

   <td>

   <input type="submit" value="submit"/>

   </td>

  </tr>

 </table>

</form>

<script language="javascript" type="text/javascript">

$(document).ready(function () {

 var validateOpts = {

  rules: {

   UserEmail: {

    required: true,

    email: true

   },

   Password: {

    required: true 

   }

  },

  messages: {

   UserEmail: {

    required: "請輸入郵箱地址",

    email: "郵箱地址不正確"

   },

   Password: {

    required: "請輸入密碼" 

   }

  }

 };

 $("#loginForm").validate(validateOpts);

});

</script>

我們只需設置validate的參數(shù)即可。

2.equalTo的使用，一般在注冊時會用到

<script type="text/javascript" language="javascript" src="http://www.jb51.net/Scripts/jquery-1.4.1.min.js"></script>

<script type="text/javascript" language="javascript" src="http://www.jb51.net/Scripts/jquery.validate.min.js"></script>

<h2>ValidateHigh</h2>

<form action="" id="loginForm" method="post">

 <table border="0" cellpadding="0" cellspacing="0">

  <tr>

   <td>

    <input type="text" id="UserEmail" /> 

   </td>

  </tr>

  <tr>

   <td>

    <input type="password" id="Password" />

   </td>

  </tr>

  <tr>

   <td>

    <input type="password" id="RePassword" />

   </td>

  </tr>

  <tr>

   <td>

    <input type="submit" value="submit"/>

   </td>

  </tr>

 </table>

</form>

<script language="javascript" type="text/javascript">

 $(document).ready(function () {

  var validateOpts = {

   rules: {

    UserEmail: {

     required: true,

     email: true

    },

    Password: {

     required: true

    },

    RePassword: {

     equalTo: "#Password"

    }

   },

   messages: {

    UserEmail: {

     required: "請輸入郵箱地址",

     email: "郵箱地址不正確"

    },

    Password: {

     required: "請輸入密碼"

    },

    RePassword: {

     equalTo: "兩次輸入密碼必須相同"

    }

   }

  };

  $("#loginForm").validate(validateOpts);

 });

</script>

3.required(dependency-callback)的使用，綠色字體。

var validateOpts = {

 rules: {

  age: {

   required: true,

   min: 3

  },

  parent: {

   required: function (element) {

    return $("#age").val() < 13;

   }

  }

 }

}

4.自定義規(guī)則，使用addMethod方法，如下：

//方法接收三個參數(shù)(value,element,param)

//value是元素的值,element是元素本身 param是參數(shù),我們可以用addMethod來添加除built-in Validation methods之外的驗證方法

//比如有一個字段,只能輸一個字母,范圍是a-f,寫法如下

$.validator.addMethod("af", function (value, element, params) {

 if (value.length >1) {

  returnfalse;

 }

 if (value >=params[0] && value <=params[1]) {

  returntrue;

 } else {

  returnfalse;

 }

}, "必須是一個字母,且a-f");

這樣我們就可以在rules中加上這個規(guī)則，如下

var validateOpts = {

 rules: {

  selectorId: {

   af: ["a","f"]//如果只有一個參數(shù),直接寫,如果af:"a",那么a就是這個唯一的參數(shù),如果多個參數(shù),用在[]里,用逗號分開

  }

 }

}

另外，經過試驗，在Json方式中，我們可以使用af:['a','f']，這個驗證可以起作用，在class方式中，在某個元素上增加af='af'，驗證也可以起到作用。

5.ajax驗證，使用remote

remote: {

 url:"CheckEmail",

 type:"post",

 dataType:"json"

}

如果我們驗證的方法是返回Boolean類型，這個方法是沒有問題的。但很多時候我們可能返回的信息會更多，或者返回其它類型，這時我們可以重新定義一個新的remote方法，示例如下（返回一個Json對象）：

$.validator.addMethod("jsonremome", function (value, element, param) {

 if (this.optional(element))

  return"dependency-mismatch";

 var previous =this.previousValue(element);

 if (!this.settings.messages[element.name])

  this.settings.messages[element.name] = {};

 previous.originalMessage =this.settings.messages[element.name].remote;

 this.settings.messages[element.name].remote = previous.message;

 param =typeof param =="string"&& { url: param} || param;

 if (previous.old !== value) {

  previous.old = value;

  var validator =this;

  this.startRequest(element);

  var data = {};

  data[element.name] = value;

  $.ajax($.extend(true, {

   url: param,

   mode: "abort",

   port: "validate"+ element.name,

   dataType: "json",

   data: data,

   success: function (response) {

    validator.settings.messages[element.name].remote = previous.originalMessage;

    //var valid = response === true;

    var valid = response.Result ===true;

    if (valid) {

     var submitted = validator.formSubmitted;

     validator.prepareElement(element);

     validator.formSubmitted = submitted;

     validator.successList.push(element);

     validator.showErrors();

    } else {

     var errors = {};

     //var message = (response.Message || validator.defaultMessage(element, "jsonremote"));

     var message = response.Message ||"遠程驗證未通過";

     errors[element.name] = $.isFunction(message) ? message(value) : message;

     validator.showErrors(errors);

    }

    previous.valid = valid;

    validator.stopRequest(element, valid);

   }

  }, param));

  return"pending";

 } elseif (this.pending[element.name]) {

  return"pending";

 }

 return previous.valid;

});

服務器端方法如下（MVC中）：

public JsonResult CheckEmail(string UserEmail)

{

 returnnew JsonResult { Data =new { Result =false, Message="Please change the filed" } };

}

我們就可以使用jsonremote來取代remote方法了。當然，remote方法依然可以使用。

6.錯誤顯示規(guī)則

var validateOpts = {

 wrapper: "div",// default has no wrapper

 errorClass: "invalid", // the default value is error

 errorElement: "em", // default value is lable

 errorLabelContainer: "#messageBox", // to gather all the error messages

}

以上就是本文的全部內容，希望能給大家一個參考