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 相关文章推荐
HTML-CSS群中单选引发的“事件”
Mar 05 Javascript
jquery获得当前html页面源码的方法
Jul 14 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
Jul 18 Javascript
全面解析JavaScript中“&amp;&amp;”和“||”操作符(总结篇)
Jul 18 Javascript
javascript滚轮事件基础实例讲解(37)
Feb 14 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
Mar 09 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
May 16 Javascript
你了解vue3.0响应式数据怎么实现吗
Jun 07 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
Oct 16 Javascript
Echarts实现单条折线可拖拽效果
Dec 19 Javascript
微信小程序用户盒子、宫格列表的实现
Jul 01 Javascript
Vue3中的Refs和Ref详情
Nov 11 Vue.js
基于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
Windows下安装Memcached的步骤说明
2010/04/25 PHP
php读取大文件示例分享(文件操作类)
2014/04/13 PHP
PHP计算当前坐标3公里内4个角落的最大最小经纬度实例
2016/02/26 PHP
php文件上传及下载附带显示文件及目录功能
2017/04/27 PHP
php+redis实现消息队列功能示例
2019/09/19 PHP
javascript 面向对象编程基础 多态
2009/08/21 Javascript
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
javaScript函数中执行C#代码中的函数方法总结
2013/08/07 Javascript
jquery的选择器的使用技巧之如何选择input框
2013/09/22 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
2013/09/25 Javascript
jquery(hide方法)隐藏指定元素实例
2013/11/11 Javascript
JS中window.open全屏命令解析及使用示例
2013/12/11 Javascript
TypeError document.getElementById(...) is null错误原因
2015/05/18 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
2015/09/19 Javascript
jquery实现图片放大镜功能
2015/11/23 Javascript
JavaScript实现斗地主游戏的思路
2016/02/29 Javascript
巧用jQuery选择器提高写表单效率的方法
2016/08/19 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
2018/08/08 jQuery
了解重排与重绘
2019/05/29 Javascript
node中实现删除目录的几种方法
2019/06/24 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
2020/05/06 Javascript
python创建列表并给列表赋初始值的方法
2015/07/28 Python
python opencv实现任意角度的透视变换实例代码
2018/01/12 Python
python 删除指定时间间隔之前的文件实例
2018/04/24 Python
python中scikit-learn机器代码实例
2018/08/05 Python
python单线程下实现多个socket并发过程详解
2019/07/27 Python
连卡佛中国官网:Lane Crawford中文站
2018/01/27 全球购物
Merchant 1948澳大利亚:新西兰领先的鞋类和靴子供应商
2018/03/24 全球购物
西班牙床垫网上商店:Colchones.es
2018/05/06 全球购物
阿联酋手表和配饰购物网站:Rivolishop
2019/11/25 全球购物
企划经理的岗位职责
2013/11/17 职场文书
小学生评语集锦
2014/04/18 职场文书
地质工程专业毕业生求职信
2014/08/08 职场文书
12.4法制宣传日活动总结
2014/08/26 职场文书
骨干教师个人总结
2015/02/11 职场文书
简单且有用的Python数据分析和机器学习代码
2021/07/02 Python