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实例教程(19) 使用HoTMetal(2)
Dec 23 Javascript
javascript编程起步(第五课)
Jan 10 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
Jan 28 Javascript
Node.js的基本知识简单汇总
Sep 19 Javascript
通过js修改input、select默认字体颜色
Apr 19 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
Jun 13 Javascript
vue+vue-validator 表单验证功能的实现代码
Nov 13 Javascript
基于vue cli 通过命令行传参实现多环境配置
Jul 12 Javascript
使用JS判断页面是首次被加载还是刷新
May 26 Javascript
vue实现在v-html的html字符串中绑定事件
Oct 28 Javascript
微信小程序日历插件代码实例
Dec 04 Javascript
简介JavaScript错误处理机制
Aug 04 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
深入密码加salt原理的分析
2013/06/06 PHP
Ubuntu中搭建Nginx、PHP环境最简单的方法
2015/03/05 PHP
php curl请求信息和返回信息设置代码实例
2015/04/27 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
用js实现的一个Flash滚动轮换显示图片代码生成器
2007/03/14 Javascript
始终在屏幕中间显示Div的代码(css+js)
2011/03/10 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
2013/10/29 Javascript
网页运行时提示对象不支持abigimage属性或方法
2014/08/10 Javascript
前端轻量级MVC框架CanJS详解
2014/09/26 Javascript
JS/Jquery判断对象为空的方法
2015/06/11 Javascript
JavaScript常用基础知识强化学习
2015/12/09 Javascript
jQuery点击其他地方时菜单消失的实现方法
2016/04/22 Javascript
如何判断Javascript对象是否存在的简单实例
2016/05/18 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
2017/05/02 Javascript
深入理解Angular.JS中的Scope继承
2017/06/04 Javascript
vue.js实现备忘录demo
2019/06/26 Javascript
vue-cli配置flexible过程详解
2019/07/04 Javascript
解决Python中由于logging模块误用导致的内存泄露
2015/04/23 Python
python生成随机图形验证码详解
2017/11/08 Python
django站点管理详解
2017/12/12 Python
Python中if elif else及缩进的使用简述
2018/05/31 Python
Python后台开发Django的教程详解(启动)
2019/04/08 Python
Djang的model创建的字段和参数详解
2019/07/27 Python
运用PyTorch动手搭建一个共享单车预测器
2019/08/06 Python
python多线程扫描端口(线程池)
2019/09/04 Python
python如何运行js语句
2020/09/09 Python
python向企业微信发送文字和图片消息的示例
2020/09/28 Python
CSS3 Flexbox中flex-shrink属性的用法示例介绍
2013/12/30 HTML / CSS
使用css如何制作时间ICON方法实践
2012/11/12 HTML / CSS
C&A巴西网上商店:时尚、衣服、手机和鞋子
2020/06/07 全球购物
说说你所熟悉或听说过的j2ee中的几种常用模式?及对设计模式的一些看法
2012/05/24 面试题
应届实习生的自我评价范文
2014/01/05 职场文书
高中运动会广播稿
2014/01/21 职场文书
打架检讨书500字
2014/01/29 职场文书
三万活动总结
2014/04/28 职场文书
材料物理专业求职信
2014/09/01 职场文书