Jquery Easyui表单组件Form使用详解(30)

 更新时间:2016年12月19日 14:03:50   作者:Jsakura  
这篇文章主要为大家详细介绍了Jquery Easyui表单组件Form的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了Jquery Easyui表单组件的实现代码,供大家参考,具体内容如下

加载方式

表单组件只能在 JS 区域设置,首先定义一张表单。

  <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 加载调用
      $('#box').form({
        url : 'content.php',
        onSubmit: function(){
        },
        success:function(data){
          alert(data);
        }
      });
    });
  </script>

属性列表

//属性设置
$('#box').form({
  url : 'content.php',
});

事件列表

<script>
    $(function () {
      //JS 加载调用
      $('#box').form({
        url : 'content.php',
        onSubmit: function(){
        },
        success:function(data){
          alert(data);
        },
        onBeforeLoad : function () {
          alert('load 之前执行');
        },
        onLoadSuccess : function (data) {
          alert('load 成功后执行:' + data.name);
        },
        onLoadError : function () {
          alert('load 错误时执行');
        },
      });
    });
  </script>

方法列表

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

      });
      //使用 load 填充
      $('#box').form('load', {
        name : 'bnbbs',
        email : 'bnbbs@163.com',
      });
      //使用 load 通过 URL 填充,对方是 JSON 格式
      $('#box').form('load', 'content.php');
      //验证后再执行提交
      $('#box').form({
        url : 'content.php',
        onSubmit : function (param) {
          return $(this).form('validate');
        },
        success : function (data) {
          alert(data);
        },
      });
      //清理和重置
      $('#box').form('clear');
      $('#box').form('reset');
      //禁用和启用验证
      $('#box').form('disableValidation');
      $('#box').form('enableValidation');
      //使用$.fn.form.defaults 重写默认值对象。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • jQuery三组基本动画与自定义动画操作实例总结

    jQuery三组基本动画与自定义动画操作实例总结

    这篇文章主要介绍了jQuery三组基本动画与自定义动画操作,结合实例形式总结了jQuery基本动画函数与自定义动画相关操作技巧及使用注意事项,需要的朋友可以参考下
    2020-05-05
  • 基于jQuery的左滑出现删除按钮的示例

    基于jQuery的左滑出现删除按钮的示例

    本篇文章主要介绍了基于jQuery的左滑出现删除按钮的示例,这里整理了详细的代码,非常具有实用价值,需要的朋友可以参考下
    2017-08-08
  • jQuery经过一段时间自动隐藏指定元素的方法

    jQuery经过一段时间自动隐藏指定元素的方法

    这篇文章主要介绍了jQuery经过一段时间自动隐藏指定元素的方法,实例分析了两种比较常用的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-03-03
  • jquery lazyload延迟加载技术的实现原理分析

    jquery lazyload延迟加载技术的实现原理分析

    懒加载技术(简称lazyload)并不是新技术,它是js程序员对网页性能优化的一种方案。lazyload的核心是按需加载。在大型网站中都有lazyload的身影,例如谷歌的图片搜索页,迅雷首页,淘宝网,QQ空间等。
    2011-01-01
  • 取消选中单选框radio的三种方式示例介绍

    取消选中单选框radio的三种方式示例介绍

    本文依赖于jQuery,其中第一种,第二种方式是使用jQuery实现的,第三种方式是基于JS和DOM实现的,感兴趣的朋友可以了解下
    2013-12-12
  • jquery滚动特效集锦

    jquery滚动特效集锦

    本文给大家汇总介绍的是jquery单行滚动、批量多行滚动、文字图片翻屏滚动效果代码,都是分厂常用的一些文字以及图文的无缝滚动特效,希望能够对大家熟悉jQuery有所帮助。
    2015-06-06
  • jquery移除button的inline onclick事件(已测试及兼容浏览器)

    jquery移除button的inline onclick事件(已测试及兼容浏览器)

    这种方法在Google Chrome下正常工作,但是在IE的兼容模式下会马上调用reclick方法,这不是我们想要的效果;为了解决这个问题,我们可以换个思路,就是延迟绑定click事件
    2013-01-01
  • jQuery平滑旋转幻灯片特效代码分享

    jQuery平滑旋转幻灯片特效代码分享

    这篇文章主要介绍了jQuery平滑旋转幻灯片特效,一个具有自己特色的幻灯片会吸引用户的注意力,让用户产生浏览网站的兴趣至关重要,现在小编推荐给大家一款特别棒的幻灯片,感兴趣的小伙伴可以参考下。
    2015-09-09
  • jQuery的基本概念与高级编程

    jQuery的基本概念与高级编程

    这篇文章主要介绍了jQuery的基本概念与高级编程的简单介绍,有需要的小伙伴可以参考下。
    2015-05-05
  • 基于jquery实现人物头像跟随鼠标转动

    基于jquery实现人物头像跟随鼠标转动

    一款非常乖巧的人物头像跟随鼠标转动效果,在浏览器屏幕内,人物脸庞始终面向鼠标转动,本篇文章给大家介绍基于jquery实现人物头像跟随鼠标转动,有需要的朋友可以参考下
    2015-08-08

最新评论