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 相关文章推荐
jQuery 工具函数学习资料
Apr 29 Javascript
下载文件个别浏览器文件名乱码解决办法
Mar 19 Javascript
javascript常用函数归纳整理
Oct 31 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
Mar 26 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
Sep 17 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
Dec 23 Javascript
JS+Canvas 实现下雨下雪效果
May 18 Javascript
浅析JavaScript 箭头函数 generator Date JSON
May 23 Javascript
微信小程序 富文本转文本实例详解
Oct 24 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
Nov 25 Javascript
代码分析vue中如何配置less
Sep 28 Javascript
es5 类与es6中class的区别小结
Nov 09 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开启opcache提升代码性能
2015/04/26 PHP
php获取当前页面完整URL地址
2015/12/30 PHP
浅谈PHP中的面向对象OOP中的魔术方法
2017/06/12 PHP
Windows Live的@live.com域名注册漏洞 利用代码
2006/12/27 Javascript
javascript 播放器 控制
2007/01/22 Javascript
浅谈JavaScript数据类型
2015/03/03 Javascript
JS实现跟随鼠标立体翻转图片的方法
2015/05/04 Javascript
Javascript实现苹果悬浮虚拟按钮
2016/04/10 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/15 Javascript
一个简易的js图片轮播效果
2017/07/22 Javascript
JQuery实现ajax请求的示例和注意事项
2018/12/10 jQuery
微信小程序公用参数与公用方法用法示例
2019/01/09 Javascript
react 原生实现头像滚动播放的示例
2020/04/21 Javascript
解决js中的setInterval清空定时器不管用问题
2020/11/17 Javascript
python字典序问题实例
2014/09/26 Python
python3.5仿微软计算器程序
2020/03/30 Python
Python如何判断数独是否合法
2016/09/08 Python
书单|人生苦短,你还不用python!
2017/12/29 Python
pandas数值计算与排序方法
2018/04/12 Python
python入门:这篇文章带你直接学会python
2018/09/14 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
TensorFlow2.1.0安装过程中setuptools、wrapt等相关错误指南
2020/04/08 Python
Spark处理数据排序问题如何避免OOM
2020/05/21 Python
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
python 使用csv模块读写csv格式文件的示例
2020/12/02 Python
加拿大知名的国际儿童品牌:Hatley
2016/11/09 全球购物
Shoes For Crews法国官网:美国领先的防滑鞋设计和制造商
2018/01/01 全球购物
怎样从/向数据文件读/写结构
2014/11/23 面试题
艺术专业大学生自我评价
2013/09/22 职场文书
区优秀教师事迹材料
2014/02/10 职场文书
电工实训报告总结
2014/11/05 职场文书
仓库保管员岗位职责
2015/02/09 职场文书
英语辞职信范文
2015/02/28 职场文书
综治目标管理责任书
2015/05/11 职场文书
三好学生评选事迹材料(2016精选版)
2016/02/25 职场文书
基于Android10渲染Surface的创建过程
2022/08/14 Java/Android