Jquery Easyui表单组件Form使用详解(30)

发布时间 - 2026-01-10 21:56:20    点击率:

本文实例为大家分享了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>

属性列表

//属性设置
$('#box').form({
  url : 'content.php',
});

事件列表

<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>

方法列表

//自动提交
      $('#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 重写默认值对象。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


# Jquery  # Easyui  # 表单组件  # Form  # jQuery EasyUI提交表单验证  # jquery插件EasyUI中form表单提交实例分享  # Jquery插件easyUi实现表单验证示例  # 实例解析jQuery插件EasyUI最常用的表单验证规则  # Jquery插件easyUi表单验证提交(示例代码)  # jQuery EasyUI API 中文文档 - Form表单  # Jquery easyui异步提交表单的两种方式示例详解  # 表单  # 加载  # 重写  # 大家分享  # 具体内容  # 大家多多  # 默认值  # 只能在  # gt  # div  # label  # method  # box  # id  # post  # text  # data  # options  # type  # input 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: EditPlus中的正则表达式 实战(1)  网站制作壁纸教程视频,电脑壁纸网站?  详解一款开源免费的.NET文档操作组件DocX(.NET组件介绍之一)  如何撰写建站申请书?关键要点有哪些?  Laravel Livewire是什么_使用Laravel Livewire构建动态前端界面  国美网站制作流程,国美电器蒸汽鍋怎么用官方网站?  微信小程序 require机制详解及实例代码  如何快速生成专业多端适配建站电话?  海南网站制作公司有哪些,海口网是哪家的?  香港服务器网站推广:SEO优化与外贸独立站搭建策略  个人网站制作流程图片大全,个人网站如何注销?  东莞市网站制作公司有哪些,东莞找工作用什么网站好?  如何在万网自助建站中设置域名及备案?  简单实现jsp分页  如何用虚拟主机快速搭建网站?详细步骤解析  Laravel如何实现邮箱地址验证功能_Laravel邮件验证流程与配置  如何在 React 中条件性地遍历数组并渲染元素  bootstrap日历插件datetimepicker使用方法  Python文件流缓冲机制_IO性能解析【教程】  如何在IIS中配置站点IP、端口及主机头?  JS弹性运动实现方法分析  晋江文学城电脑版官网 晋江文学城网页版直接进入  免费网站制作appp,免费制作app哪个平台好?  Laravel定时任务怎么设置_Laravel Crontab调度器配置  太平洋网站制作公司,网络用语太平洋是什么意思?  uc浏览器二维码扫描入口_uc浏览器扫码功能使用地址  如何快速上传自定义模板至建站之星?  Midjourney怎样加参数调细节_Midjourney参数调整技巧【指南】  Laravel怎么实现前端Toast弹窗提示_Laravel Session闪存数据Flash传递给前端【方法】  Laravel如何使用Eloquent ORM进行数据库操作?(CRUD示例)  香港服务器网站测试全流程:性能评估、SEO加载与移动适配优化  JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)  微信推文制作网站有哪些,怎么做微信推文,急?  Laravel如何实现密码重置功能_Laravel密码找回与重置流程  Laravel怎么实现微信登录_Laravel Socialite第三方登录集成  高防服务器如何保障网站安全无虞?  Swift中switch语句区间和元组模式匹配  如何快速选择适合个人网站的云服务器配置?  Claude怎样写约束型提示词_Claude约束提示词写法【教程】  Laravel如何实现邮件验证激活账户_Laravel内置MustVerifyEmail接口配置【步骤】  Laravel怎么连接多个数据库_Laravel多数据库连接配置  Laravel如何使用查询构建器?(Query Builder高级用法)  Laravel如何自定义分页视图?(Pagination示例)  如何在腾讯云免费申请建站?  电商网站制作多少钱一个,电子商务公司的网站制作费用计入什么科目?  Laravel如何实现API版本控制_Laravel版本化API设计方案  Python并发异常传播_错误处理解析【教程】  Laravel怎么调用外部API_Laravel Http Client客户端使用  Laravel如何创建自定义Artisan命令?(代码示例)  详解jQuery停止动画——stop()方法的使用