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的闭包
Dec 31 Javascript
js 处理URL实用技巧
Nov 23 Javascript
JavaScript中的call方法和apply方法使用对比
Aug 12 Javascript
js实现Select列表各项上移和下移的方法
Aug 14 Javascript
js实现带有介绍的Select列表菜单实例
Aug 18 Javascript
Node.js实现兼容IE789的文件上传进度条
Sep 02 Javascript
Input文本框随着输入内容多少自动延伸的实现
Feb 15 Javascript
AngularJS表单验证功能
Oct 19 Javascript
JS二级菜单不同实现方法分析【4种方法】
Dec 21 Javascript
JS使用对象的defineProperty进行变量监控操作示例
Feb 02 Javascript
微信小程序文章详情页跳转案例详解
Jul 09 Javascript
JavaScript实现缓动动画
Nov 25 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的POSIX 函数以及进程测试的深入分析
2013/06/03 PHP
php从数据库查询结果生成树形列表的方法
2015/04/17 PHP
常见PHP数据库解决方案分析介绍
2015/09/24 PHP
PHP 常用时间函数资料整理
2016/10/22 PHP
JSON 数字排序多字段排序介绍
2013/09/18 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
2013/10/30 Javascript
href下载文件根据id取url并下载
2014/05/28 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
2015/08/20 Javascript
Bootstrap实现默认导航栏效果
2020/09/21 Javascript
BootStrap入门学习第一篇
2017/08/28 Javascript
Async/Await替代Promise的6个理由
2019/06/15 Javascript
微信小程序后端无法保持session的原因及解决办法问题
2020/03/20 Javascript
[36:33]Ti4 循环赛第四日 附加赛NEWBEE vs Mouz
2014/07/13 DOTA
天翼开放平台免费短信验证码接口使用实例
2013/12/18 Python
Python删除Java源文件中全部注释的实现方法
2017/08/30 Python
对Python3.6 IDLE常用快捷键介绍
2018/07/16 Python
WxPython建立批量录入框窗口
2019/02/27 Python
python使用adbapi实现MySQL数据库的异步存储
2019/03/19 Python
Django使用Celery加redis执行异步任务的实例内容
2020/02/20 Python
python 子类调用父类的构造函数实例
2020/03/12 Python
在tensorflow下利用plt画论文中loss,acc等曲线图实例
2020/06/15 Python
python对 MySQL 数据库进行增删改查的脚本
2020/10/22 Python
matplotlib更改窗口图标的方法示例
2021/02/03 Python
css3 iphone玻璃透明气泡完美实现
2013/03/20 HTML / CSS
国家地理在线商店:Shop National Geographic
2018/06/30 全球购物
意大利奢侈品零售商:ilDuomo Novara
2019/09/11 全球购物
怎样让char类型的东西转换成int类型
2013/12/09 面试题
行政专员岗位职责
2014/01/02 职场文书
青春励志演讲稿范文
2014/08/25 职场文书
2014第二批党的群众路线教育实践活动对照检查材料思想汇报
2014/09/18 职场文书
死亡证明书样本说明
2014/10/18 职场文书
工艺技术员岗位职责
2015/02/04 职场文书
幼儿园小班个人总结
2015/02/12 职场文书
2016年幼儿园教研活动总结
2016/04/05 职场文书
高中优秀作文(范文)
2019/08/15 职场文书
python中24小时制转换为12小时制的方法
2021/06/18 Python