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 相关文章推荐
Bootstrap实现默认导航栏效果
Sep 21 Javascript
jquery.validate使用详解
Jun 02 Javascript
JavaScript中函数声明与函数表达式的区别详解
Aug 18 Javascript
原生JS+Canvas实现五子棋游戏
May 28 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
Sep 14 Javascript
AngularJS实现注册表单验证功能
Oct 16 Javascript
Vue组件通信之Bus的具体使用
Dec 28 Javascript
利用Vue2.x开发实现JSON树的方法
Jan 04 Javascript
vue的全局提示框组件实例代码
Feb 26 Javascript
微信小程序实现原生步骤条
Jul 25 Javascript
layer弹出层取消遮罩的方法
Sep 25 Javascript
微信小程序手动添加收货地址省市区联动
May 18 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的preg_match匹配字符串长度问题解决方法
2014/05/03 PHP
Yii使用migrate命令执行sql语句的方法
2016/03/15 PHP
PHP7新增运算符用法实例分析
2016/09/26 PHP
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
2007/03/06 Javascript
javascript下function声明一些小结
2007/12/28 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
2013/02/22 Javascript
HTML,CSS,JavaScript速查表推荐
2014/12/02 Javascript
javascript获取四位数字或者字母的随机数
2015/01/09 Javascript
js实现Select头像选择实时预览代码
2015/08/17 Javascript
JavaScript类型系统之正则表达式
2016/01/05 Javascript
javascript自动切换焦点控制效果完整实例
2016/02/02 Javascript
jstl中判断list中是否包含某个值的简单方法
2016/10/14 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
2016/12/16 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
2017/01/13 Javascript
JQueryMiniUI按照时间进行查询的实现方法
2017/06/07 jQuery
vue mixins组件复用的几种方式(小结)
2017/09/06 Javascript
一步步教你利用Canvas对图片进行处理
2017/09/19 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
2019/03/13 Javascript
JS判断数组是否包含某元素实现方法汇总
2020/06/24 Javascript
Javascript call及apply应用场景及实例
2020/08/26 Javascript
jQuery实现购物车全功能
2021/01/11 jQuery
在Python的Django框架中获取单个对象数据的简单方法
2015/07/17 Python
使用Kivy将python程序打包为apk文件
2017/07/29 Python
Python创建一个空的dataframe,并循环赋值的方法
2018/11/08 Python
python实现从pdf文件中提取文本,并自动翻译的方法
2018/11/28 Python
基于python实现计算两组数据P值
2020/07/10 Python
python 调用API接口 获取和解析 Json数据
2020/09/28 Python
澳大利高级泳装品牌:Bondi Born
2018/05/23 全球购物
帕克纽约:PARKER NY
2018/12/09 全球购物
暑期研修感言
2014/02/17 职场文书
学生鉴定评语大全
2014/05/05 职场文书
计算机求职信
2014/07/02 职场文书
12.4法制宣传日活动总结
2014/08/26 职场文书
毕业实习证明(4篇)
2014/10/28 职场文书
小学生交通安全寄语
2015/02/27 职场文书
java executor包参数处理功能 
2022/02/15 Java/Android