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 相关文章推荐
Ext 表单布局实例代码
Apr 30 Javascript
JavaScript打开word文档的实现代码(c#)
Apr 16 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
Apr 18 Javascript
用box固定长宽实现图片自动轮播js代码
Jun 09 Javascript
JavaScript简单表格编辑功能实现方法
Apr 16 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
Jan 24 Javascript
浅谈js内置对象Math的属性和方法(推荐)
Sep 19 Javascript
js实现对table的增加行和删除行的操作方法
Oct 13 Javascript
Vue.use源码分析
Apr 22 Javascript
js中Object.defineProperty()方法的不详解
Jul 09 Javascript
JavaScript常见JSON操作实例分析
Aug 08 Javascript
Vue项目总结之webpack常规打包优化方案
Jun 06 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安全上传图片的方法
2015/03/21 PHP
javascrip关于继承的小例子
2013/05/10 Javascript
前台js调用后台方法示例
2013/12/02 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
2015/04/12 Javascript
BootStrap Typeahead自动补全插件实例代码
2016/08/10 Javascript
解析Javascript单例模式概念与实例
2016/12/05 Javascript
jQuery实现淡入淡出的模态框
2017/02/09 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
2017/05/10 Javascript
js评分组件使用详解
2017/06/06 Javascript
javascript中的replace函数(带注释demo)
2018/01/07 Javascript
vue绑定的点击事件阻止冒泡的实例
2018/02/08 Javascript
JavaScript获取用户所在城市及地理位置
2018/04/21 Javascript
angular学习之动态创建表单的方法
2018/12/07 Javascript
Vue vm.$attrs使用场景详解
2020/03/08 Javascript
非常漂亮的js烟花效果
2020/03/10 Javascript
Vue基于localStorage存储信息代码实例
2020/11/16 Javascript
[48:37]EG vs OG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python实现爬虫下载美女图片
2015/07/14 Python
使用Python导出Excel图表以及导出为图片的方法
2015/11/07 Python
Django如何配置mysql数据库
2018/05/04 Python
Python爬虫的两套解析方法和四种爬虫实现过程
2018/07/20 Python
Python中的异常处理try/except/finally/raise用法分析
2019/02/28 Python
Python实例方法、类方法、静态方法的区别与作用详解
2019/03/25 Python
Python+Kepler.gl实现时间轮播地图过程解析
2020/07/20 Python
HTML5标签使用方法详解
2015/11/27 HTML / CSS
为您的家、后院、车库等在线购物:Spreetail
2019/06/17 全球购物
美国豪华的多品牌精品店:The Webster
2019/07/31 全球购物
StudentUniverse英国:学生航班、酒店和旅游
2019/08/25 全球购物
如何保障Web服务器安全
2014/05/05 面试题
构造方法和其他方法的区别
2016/04/26 面试题
医护人员英文求职信范文
2013/11/26 职场文书
函授毕业生的自我鉴定
2013/11/26 职场文书
学校安全检查制度
2014/01/27 职场文书
群众路线对照检查材料
2014/09/22 职场文书
Go归并排序算法的实现方法
2022/04/06 Golang
三星 3nm 芯片将于第二季度开始量产
2022/04/29 数码科技