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


Posted in Javascript onDecember 19, 2016

本文实例为大家分享了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>

属性列表

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

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

事件列表

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

<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>

方法列表

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

//自动提交
      $('#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 重写默认值对象。

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

Javascript 相关文章推荐
javascript实现动态增加删除表格行(兼容IE/FF)
Apr 02 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
Mar 11 Javascript
获取当前点击按钮的id用this.id实现
Mar 17 Javascript
JS根据生日月份和日期计算星座的简单实现方法
Nov 24 Javascript
Bootstrap的基本应用要点浅析
Dec 19 Javascript
js实现随机抽选效果、随机抽选红色球效果
Jan 13 Javascript
JS常用知识点整理
Jan 21 Javascript
使用vue.js写一个tab选项卡效果
Mar 25 Javascript
微信小程序实战之自定义toast(6)
Apr 18 Javascript
说说node中的可读流和可写流的区别
Jun 01 Javascript
vue安装和使用scss及sass与scss的区别详解
Oct 15 Javascript
微信小程序实现滑动操作代码
Apr 23 Javascript
基于JavaScript实现自动更新倒计时效果
Dec 19 #Javascript
Bootstrap的基本应用要点浅析
Dec 19 #Javascript
详解javascript获取url信息的常见方法
Dec 19 #Javascript
js封装tab标签页实例分享
Dec 19 #Javascript
jQuery焦点图轮播效果实现方法
Dec 19 #Javascript
JS实现焦点图轮播效果的方法详解
Dec 19 #Javascript
jQuery拖拽通过八个点改变div大小
Nov 29 #Javascript
You might like
比较详细PHP生成静态页面教程
2012/01/10 PHP
php 对输入信息的进行安全过滤的函数代码
2012/06/29 PHP
php读取excel文件示例分享(更新修改excel)
2014/02/27 PHP
根据ip调用新浪api获取城市名并转成拼音
2014/03/07 PHP
php实现singleton()单例模式实例
2014/11/06 PHP
PHP实现过滤各种HTML标签
2015/05/17 PHP
详解PHP数组赋值方法
2015/11/07 PHP
PHP实现断点续传乱序合并文件的方法
2018/09/06 PHP
JavaScript获得选中文本内容的方法
2008/12/02 Javascript
Javascript Select操作大集合
2009/05/26 Javascript
javascript 通用loading动画效果实例代码
2014/01/14 Javascript
javascript中验证大写字母、数字和中文
2014/01/15 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
2014/03/17 Javascript
javascript读写json示例
2014/04/11 Javascript
JavaScript DOM 学习总结(五)
2015/11/24 Javascript
javascript实现粘贴qq截图功能(clipboardData)
2016/05/29 Javascript
基于Bootstrap+jQuery.validate实现表单验证
2016/05/30 Javascript
AngularJS中的API(接口)简单实现
2016/07/28 Javascript
简单实现js浮动框
2016/12/13 Javascript
javascript面向对象三大特征之多态实例详解
2019/07/24 Javascript
json.stringify()与json.parse()的区别以及用处
2021/01/25 Javascript
[01:20]DOTA2 2017国际邀请赛冠军之路无止竞
2017/06/19 DOTA
python中字符串类型json操作的注意事项
2017/05/02 Python
python 实现在txt指定行追加文本的方法
2018/04/29 Python
python读取LMDB中图像的方法
2018/07/02 Python
基于ccs3的timeline时间线实现方法
2020/04/30 HTML / CSS
Notino瑞典:购买香水和美容产品
2019/07/26 全球购物
Skyscanner新西兰:全球领先的旅游搜索网站
2019/08/26 全球购物
美国购买韩国护肤和美容产品网站:Althea Korea
2020/11/16 全球购物
战友聚会邀请函
2014/01/18 职场文书
人资专员岗位职责
2014/04/04 职场文书
预备党员转正考核材料
2014/06/03 职场文书
2015年小学数学教师个人工作总结
2015/05/25 职场文书
军训新闻稿范文
2015/07/17 职场文书
2016年优秀团支部事迹材料
2016/02/26 职场文书
Nginx配置80端口访问8080及项目名地址方法解析
2021/03/31 Servers