快捷導(dǎo)航

Jquery Easyui表單組件Form使用詳解（30）

更新時間：2016年12月19日 14:03:50 作者：Jsakura

這篇文章主要為大家詳細(xì)介紹了Jquery Easyui表單組件Form的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Jquery Easyui表單組件的實(shí)現(xiàn)代碼，供大家參考，具體內(nèi)容如下

加載方式

表單組件只能在 JS 區(qū)域設(shè)置，首先定義一張表單。

  <form id="box" method="post">
    <div>
      <label for="name">Name:</label>
      <input class="easyui-validatebox" type="text" name="name"
          data-options="required:true" />
    </div>
    <div>
      <label for="email">Email:</label>
      <input class="easyui-validatebox" type="text" name="email"
          data-options="validType:'email'" />
    </div>
    <input type="submit">
  </form>
  <script>
    $(function () {
      //JS 加載調(diào)用
      $('#box').form({
        url : 'content.php',
        onSubmit: function(){
        },
        success:function(data){
          alert(data);
        }
      });
    });
  </script>

屬性列表

//屬性設(shè)置
$('#box').form({
  url : 'content.php',
});

事件列表

<script>
    $(function () {
      //JS 加載調(diào)用
      $('#box').form({
        url : 'content.php',
        onSubmit: function(){
        },
        success:function(data){
          alert(data);
        },
        onBeforeLoad : function () {
          alert('load 之前執(zhí)行');
        },
        onLoadSuccess : function (data) {
          alert('load 成功后執(zhí)行：' + data.name);
        },
        onLoadError : function () {
          alert('load 錯誤時執(zhí)行');
        },
      });
    });
  </script>

方法列表

//自動提交
      $('#box').form('submit', {

      });
      //使用 load 填充
      $('#box').form('load', {
        name : 'bnbbs',
        email : 'bnbbs@163.com',
      });
      //使用 load 通過 URL 填充，對方是 JSON 格式
      $('#box').form('load', 'content.php');
      //驗(yàn)證后再執(zhí)行提交
      $('#box').form({
        url : 'content.php',
        onSubmit : function (param) {
          return $(this).form('validate');
        },
        success : function (data) {
          alert(data);
        },
      });
      //清理和重置
      $('#box').form('clear');
      $('#box').form('reset');
      //禁用和啟用驗(yàn)證
      $('#box').form('disableValidation');
      $('#box').form('enableValidation');
      //使用$.fn.form.defaults 重寫默認(rèn)值對象。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: