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 相关文章推荐
js正确获取元素样式详解
Aug 07 Javascript
jQuery学习5 jQuery事件模型
Feb 07 Javascript
jQuery 技巧小结
Apr 02 Javascript
图片延迟加载的实现代码(模仿懒惰)
Mar 29 Javascript
javascript date格式化示例
Sep 25 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
Dec 24 Javascript
js解决select下拉选不中问题
Oct 14 Javascript
jQuery实现长按按钮触发事件的方法
Feb 02 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
Jan 12 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
Aug 09 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
Dec 29 Javascript
JS简单数组排序操作示例【sort方法】
May 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
德生S2000南麂列岛台湾FM收听记录
2021/03/02 无线电
提升PHP执行速度全攻略(上)
2006/10/09 PHP
PHP漏洞全解(详细介绍)
2012/11/13 PHP
php获取表单中多个同名input元素的值
2014/03/20 PHP
PHP递归调用数组值并用其执行指定函数的方法
2015/04/01 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
jquery 表格分页等操作实现代码(pagedown,pageup)
2010/04/11 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
2013/02/22 Javascript
js中的如何定位固定层的位置
2014/06/15 Javascript
AngularJS入门教程(零):引导程序
2014/12/06 Javascript
三种方式实现瀑布流布局
2017/02/10 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
2017/08/21 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
2017/09/20 Javascript
VUE2.0中Jsonp的使用方法
2018/05/22 Javascript
微信小程序如何实现在线客服功能
2019/10/16 Javascript
js简单实现自动生成表格功能示例
2020/06/02 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
2020/06/24 jQuery
Nodejs实现微信分账的示例代码
2021/01/19 NodeJs
shell命令行,一键创建 python 模板文件脚本方法
2018/03/20 Python
python3使用SMTP发送简单文本邮件
2018/06/19 Python
Python设计模式之装饰模式实例详解
2019/01/21 Python
Python利用pandas处理Excel数据的应用详解
2019/06/18 Python
python实现人机猜拳小游戏
2020/02/03 Python
python next()和iter()函数原理解析
2020/02/07 Python
python+OpenCV实现图像拼接
2020/03/05 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
Python函数参数定义及传递方式解析
2020/06/10 Python
基于Python模拟浏览器发送http请求
2020/11/06 Python
Python并发爬虫常用实现方法解析
2020/11/19 Python
实例讲解CSS3中的box-flex弹性盒属性布局
2016/06/09 HTML / CSS
GAP美国官网:美国休闲时尚品牌
2016/08/26 全球购物
外语专业毕业生自我评价分享
2013/10/05 职场文书
国际贸易专业个人求职信格式
2014/02/02 职场文书
元旦联欢会感言
2014/03/04 职场文书
村级四风对照检查材料
2014/08/24 职场文书
党的群众路线教育实践活动个人自我剖析材料
2014/10/07 职场文书