JQuery EasyUI(31)

最新推荐文章于 2025-07-01 23:42:13 发布

翻译最新推荐文章于 2025-07-01 23:42:13 发布 · 177 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://study.163.com/course/courseMain.htm?courseId=943002

WEB - jQuery EasyUI 专栏收录该内容

55 篇文章

订阅专栏

本文详细介绍了EasyUI框架中的表单组件使用方法，包括加载方式、属性、事件及方法等，适合前端开发者深入理解并应用。

第三十一章：Form（表单）组件

学习要点：

加载方式
属性列表
事件列表
方法列表

一、加载方式：

表单组件只能在JS区域设置，首先定义一张表单。

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>            
  </head>
  <body>
    <from id="box" action="123.html" method="post">
      <div>
        <label for="name">Name:</label>
        <input type="text" name="name" class="easyui-validatebox" data-options="required:true"/>
      </div>
   
      <div>
        <label for="email">Email:</label>
        <input type="text" name="email" class="easyui-validatebox" data-options="validType:'email',required:true"/>
      </div>

      <input type="submit">
    </from>
   </body>
</html>

2.JS调用加载

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>            
</head>
  <body>
      <from id="box" action="123.html" method="post">
        <p>账号：<input type="text" name="name" class="easyui-validatebox" data-options="required:true"/></p>
        <p>邮件：<input type="text" name="email" class="easyui-validatebox" data-options="validType:'email',required:true"/></p>
        <input type="submit">
      </from>
  </body>
</html>

<?php
   echo $_POST['name'];
   echo '|';
   echo $_POST['email'];
?>

$(function(){

   $.('#box').form({
     url:'content.php',
     onSubmit:function(param){    
   
    },
    success:function(data){
      alert(data);      
   },
  });
});

3.提交额外数据

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>            
</head>
  <body>
      <from id="box" action="123.html" method="post">
        <p>账号：<input type="text" name="name" class="easyui-validatebox" data-options="required:true"/></p>
        <p>邮件：<input type="text" name="email" class="easyui-validatebox" data-options="validType:'email',required:true"/></p>
         <input type="submit">
      </from> 
  </body>
</html>

<?php
   echo $_POST['name'];
   echo '|';
   echo $_POST['email'];
   echo '|';
   echo $_POST['code'];
?>

$(function(){

   $.('#box').form({
     url:'content.php',
     onSubmit:function(param){
        param.code = '320902';
    },
    success:function(data){
      alert(data);      
   },
  });
});

4.解析JSON数据

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>            
</head>
  <body>
      <from id="box" action="123.html" method="post">
        <p>账号：<input type="text" name="name" class="easyui-validatebox" data-options="required:true"/></p>
        <p>邮件：<input type="text" name="email" class="easyui-validatebox" data-options="validType:'email',required:true"/></p>
        <input type="submit">
      </from>
  </body>
</html>

<?php
/*
   echo $_POST['name'];
   echo '|';
   echo $_POST['email'];
   echo '|';
   echo $_POST['code'];
*/
?>
{
  "name":"ycku",
  "email":"ycku@gmail.com",
}

$(function(){

   $.('#box').form({
     url:'content.php',
     onSubmit:function(param){
        param.code = '320902';
    },
    success:function(data){
      //alert(data);
      var data = eval('('+data+')');
      if(data.email){
        alert(data.email);
     }
   },
  });
});

5.自动提交

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>            
</head>
  <body>
      <from id="box" action="123.html" method="post">
        <p>账号：<input type="text" name="name" class="easyui-validatebox" data-options="required:true"/></p>
        <p>邮件：<input type="text" name="email" class="easyui-validatebox" data-options="validType:'email',required:true"/></p>
        <input type="submit">
      </from>
  </body>
</html>

<?php
/*
   echo $_POST['name'];
   echo '|';
   echo $_POST['email'];
   echo '|';
   echo $_POST['code'];
*/
?>
{
  "name":"ycku",
  "email":"ycku@gmail.com",
}

$(function(){

   $.('#box').form('submit',{
     url:'content.php',
     onSubmit:function(param){
        param.code = '320902';
    },
    success:function(data){
      //alert(data);
      var data = eval('('+data+')');
      if(data.email){
        alert(data.email);
     }
   },
  });
});

二、属性列表：

Form属性
属性名	值	说明
url	string	提交表单动作的URL地址。默认值null。

三、事件列表：

Form事件
方法名	传参	说明
onSubmit	param	在提交之前触发，返回false可以终止提交。
success	data	在表单提交成功以后触发。
onBeforeLoad	param	在请求加载数据之前触发，返回false可以停止该动作。
onLoadSuccess	data	在表单数据加载完成之后触发。
onLoadError	data	在表单数据加载出现错误的时候触发。

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>            
</head>
  <body>
      <from id="box" action="123.html" method="post">
        <p>账号：<input type="text" name="name" class="easyui-validatebox" data-options="required:true"/></p>
        <p>邮件：<input type="text" name="email" class="easyui-validatebox" data-options="validType:'email',required:true"/></p>
        <input type="submit">
      </from>
  </body>
</html>

{
  "name":"樱桃小丸子",
  "email":"xiaowanzi@163.com",
}

$(function(){

  /*
   $('#box').form('load',{
    name:'蜡笔小新',
    email:'xiaoxin@163.com',
  });
  */

  $('#box').form('load','load.php');

  $('#box').form({
      onBeforeLoad:function(){
         alert('load之前');
     }
      onLoadSuccess:function(data){
         alert('load成功' + data.email);
     }
      onLoadError:function(){
         alert('错误');
     }
  });

});

四、方法列表：

Form方法
方法名	参数	说明
submit	options	执行提交操作，该选项参数是一个对象。
load	data	读取记录填充到表单中。
clear	none	清除表单数据。
reset	none	重置表单数据。
validate	none	做表单字段验证，当所有字段都有效的时候返回true，该方法使用validatebox（验证框）插件。·
enableValidation	none	启用验证。
unableValidation	none	禁用验证。

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>            
</head>
  <body>
      <from id="box" action="123.html" method="post">
        <p>账号：<input type="text" name="name" class="easyui-validatebox" data-options="required:true"/></p>
        <p>邮件：<input type="text" name="email" class="easyui-validatebox" data-options="validType:'email',required:true"/></p>
        <input type="submit">
      </from>
  </body>
</html>

<?php
   echo $_POST['name'];
   echo '|';
   echo $_POST['email'];
   echo '|';
   echo $_POST['code'];
?>

$(function(){

   $.('#box').form({
     url:'content.php',
     onSubmit:function(param){
        param.code = '320902';
        return $(this).form('validate');
    },
    success:function(data){
      alert(data);      
   },
  });
});

PS：我们可以使用$.fn.slider.defaults重写默认值对象。

作者：Roger_CoderLife

链接：https://blog.youkuaiyun.com/Roger_CoderLife/article/details/103063492

本文根据网易云课堂JQuery EasyUI视频教程翻译成文档，转载请注明原文出处，欢迎转载