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 相关文章推荐
DIV+CSS+JS不间断横向滚动实现代码
Mar 19 Javascript
jQuery把表单元素变为json对象
Nov 06 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
Nov 07 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
Aug 20 Javascript
最棒的Angular2表格控件
Aug 10 Javascript
使用svg实现动态时钟效果
Jul 17 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
Nov 28 Javascript
JS实现滑动拼图验证功能完整示例
Mar 29 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
Apr 29 Javascript
详解JavaScript自定义函数
Jul 29 Javascript
Vue实现简单的留言板
Oct 23 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
Oct 28 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
mysql5的sql文件导入到mysql4的方法
2008/10/19 PHP
PHP MemCached 高级缓存应用代码
2010/08/05 PHP
PHP发明人谈MVC和网站设计架构 貌似他不支持php用mvc
2011/06/04 PHP
php定时删除文件夹下文件(清理缓存文件)
2013/01/23 PHP
PHP代码保护--Zend Guard的使用详解
2013/06/03 PHP
apache集成php7.3.5的详细步骤
2019/06/20 PHP
jQuery chili图片远处放大插件
2009/11/30 Javascript
读jQuery之十 事件模块概述
2011/06/27 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
2015/01/09 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
2016/05/05 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
2017/04/13 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
2017/07/07 Javascript
VUE页面中加载外部HTML的示例代码
2017/09/20 Javascript
解决Vue不能检测数组或对象变动的问题
2018/02/24 Javascript
d3绘制基本的柱形图的实现代码
2018/12/12 Javascript
基于Vue和Element-Ui搭建项目的方法
2019/09/06 Javascript
JS实现星星海特效
2019/12/24 Javascript
微信小程序实现聊天室
2020/08/21 Javascript
如何在JS文件中获取Vue组件
2020/09/16 Javascript
[00:36]TI7不朽珍藏III——斯温不朽展示
2017/07/15 DOTA
Python基于smtplib实现异步发送邮件服务
2015/05/28 Python
python根据日期返回星期几的方法
2015/07/06 Python
Python2.7下安装Scrapy框架步骤教程
2017/12/22 Python
python 获取一个值在某个区间的指定倍数的值方法
2018/11/12 Python
Python读写文件模式和文件对象方法实例详解
2019/09/17 Python
Pytorch 多维数组运算过程的索引处理方式
2019/12/27 Python
pytorch中的上采样以及各种反操作,求逆操作详解
2020/01/03 Python
python百行代码自制电脑端网速悬浮窗的实现
2020/05/12 Python
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
解决HTML5中滚动到底部的事件问题
2019/08/22 HTML / CSS
专科毕业生学习生活的自我评价
2013/10/26 职场文书
2014老师三严三实对照检查材料思想汇报
2014/09/18 职场文书
考试作弊检讨书1000字(5篇)
2014/10/19 职场文书
2015年个人工作总结报告
2015/04/25 职场文书
门面租赁合同范文
2019/08/06 职场文书
JS前端轻量fabric.js系列物体基类
2022/08/05 Javascript