jQuery EasyUI API 中文文档 – Form表单

jQuery EasyUI 是一套基于jQuery的完整Web UI组件库，其中的Form表单组件是用于创建表单的扩展，提供了丰富的表单元素和验证功能，支持Ajax提交表单和表单数据的展示。本文将对 “jQuery EasyUI API 中文文档 - Form表单” 进行详细讲解，包括如何创建表单、表单元素的设置、表单验证、以及表单数据的提交和展示。

创建表单

使用jQuery EasyUI的form组件进行表单创建需要注意以下几点：

• 表单必须包含一个id，用于标识表单；
• 表单中需要包含需要的表单元素和验证规则。

下面是一个简单的表单创建示例：

<!-- html -->
<form id="myForm">
  <label for="name">姓名：</label>
  <input type="text" name="name" id="name" class="easyui-validatebox" required="true">
  <br>
  <label for="phone">电话：</label>
  <input type="text" name="phone" id="phone" class="easyui-validatebox" required="true" validType="mobile">
  <br>
  <button type="submit">提交</button>
  <button type="reset">重置</button>
</form>

// javascript
$('#myForm').form({
  url: 'submit.php',
  onSubmit: function() {
    // do something
  },
  success: function() {
    // do something
  }
});

在上面的例子中，我们通过id选择器来选中表单元素，然后使用form方法将其转换成jQuery EasyUI的表单组件，其中url属性指定表单提交的URL，onSubmit和success属性分别指定提交前和提交成功后要执行的回调函数。

设置表单元素

jQuery EasyUI提供了一系列的方法来设置表单元素，包括设置表单元素的值、获取表单元素的值、启用/禁用表单元素等等。下面是一些常用的表单元素的设置示例：

// 设置文本框的值
$('#name').textbox('setValue', '张三');

// 获取下拉框的值
var value = $('#gender').combobox('getValue');

// 启用/禁用按钮
$('#submitBtn').linkbutton('enable');

表单验证

表单验证是在表单提交前对表单数据进行验证，确保表单数据的有效性。jQuery EasyUI提供了多种验证方式，包括必填字段、正则表达式、最大最小长度等等。下面是一个简单的表单验证示例：

<!-- html -->
<form id="myForm">
  <label for="name">姓名：</label>
  <input type="text" name="name" id="name" class="easyui-validatebox" required="true">
  <br>
  <label for="phone">电话：</label>
  <input type="text" name="phone" id="phone" class="easyui-validatebox" required="true" validType="mobile">
  <br>
  <button type="submit">提交</button>
  <button type="reset">重置</button>
</form>

// javascript
$('#myForm').form({
  onSubmit: function() {
    if (!$('#myForm').form('enableValidation').form('validate')) {
      return false;
    }
  }
});

在上述的代码中，我们在提交表单前启用了表单的验证功能，并使用form('validate')方法对表单进行验证，如果验证不通过，则返回false，阻止表单的提交。

表单提交和数据展示

jQuery EasyUI提供了多种表单提交方式，包括ajax提交、iframe提交等方式。下面是一个ajax提交表单并展示提交结果的示例：

<!-- html -->
<form id="myForm">
  <label for="name">姓名：</label>
  <input type="text" name="name" id="name" class="easyui-validatebox" required="true">
  <br>
  <label for="phone">电话：</label>
  <input type="text" name="phone" id="phone" class="easyui-validatebox" required="true" validType="mobile">
  <br>
  <button type="submit">提交</button>
  <button type="reset">重置</button>
</form>
<div id="result"></div>

// javascript
$('#myForm').form({
  url: 'submit.php',
  onSubmit: function() {
    if (!$('#myForm').form('enableValidation').form('validate')) {
      return false;
    }
  },
  success: function(data) {
    $('#result').html(data);
  }
});

在上述的代码中，我们通过url属性指定表单数据的提交地址，在onSubmit事件中启用表单验证，并在success事件中展示服务器返回的提交结果。

以上就是 jQuery EasyUI API 中文文档中 Form表单 部分的详细讲解和完整攻略，希望可以帮助到你。