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 基于原型的对象(创建、调用)
Oct 16 Javascript
jQuery each()小议
Mar 18 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 03 Javascript
javascript连续赋值问题
Jul 08 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
May 13 Javascript
jquery实现输入框实时输入触发事件代码
Dec 21 Javascript
微信小程序 支付简单实例及注意事项
Jan 06 Javascript
集合Bootstrap自定义confirm提示效果
Sep 19 Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
解决JS表单验证只有第一个IF起作用的问题
Dec 04 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
Apr 15 Javascript
JavaScript数值类型知识汇总
Nov 17 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 json_encode奇怪问题说明
2011/09/27 PHP
Apache实现Web Server负载均衡详解(不考虑Session版)
2013/07/05 PHP
ThinkPHP关于session的操作方法汇总
2014/07/18 PHP
PHP实现文件上传功能实例代码
2017/05/18 PHP
利用laravel搭建一个迷你博客实战教程
2017/08/13 PHP
php中curl和soap方式请求服务超时问题的解决
2018/06/11 PHP
jquery创建div 实现代码
2009/04/27 Javascript
从零开始学习jQuery (十) jQueryUI常用功能实战
2011/02/23 Javascript
JS中把字符转成ASCII值的函数示例代码
2013/11/21 Javascript
批量修改标签css样式以input标签为例
2014/07/31 Javascript
jQuery实现网页顶部固定导航效果代码
2015/12/24 Javascript
Bootstrap树形组件jqTree的简单封装
2016/01/25 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
2016/07/12 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
2016/11/29 Javascript
详解如何去除vue项目中的#——History模式
2017/10/13 Javascript
vue项目中使用tinymce编辑器的步骤详解
2018/09/11 Javascript
30分钟快速实现小程序语音识别功能
2018/11/27 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
2018/12/09 Javascript
利用 JavaScript 实现并发控制的示例代码
2020/12/31 Javascript
python获取从命令行输入数字的方法
2015/04/29 Python
TensorFlow 实战之实现卷积神经网络的实例讲解
2018/02/26 Python
Django 数据库同步操作技巧详解
2019/07/19 Python
django将数组传递给前台模板的方法
2019/08/06 Python
Python 单例设计模式用法实例分析
2019/09/23 Python
Python 基于FIR实现Hilbert滤波器求信号包络详解
2020/02/26 Python
python如何实时获取tcpdump输出
2020/09/16 Python
Python虚拟环境virtualenv创建及使用过程图解
2020/12/08 Python
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
2013/01/31 HTML / CSS
一道SQL存储过程面试题
2016/10/07 面试题
致跳高运动员广播稿
2014/01/13 职场文书
1000字打架检讨书
2014/11/03 职场文书
教代会闭幕词
2015/01/28 职场文书
2015年纪念“卢沟桥事变”78周年活动方案
2015/05/06 职场文书
2015年财务个人工作总结范文
2015/05/22 职场文书
士兵突击观后感
2015/06/16 职场文书
《百分数的认识》教学反思
2016/02/19 职场文书