EasyUI jQuery Form Widget完整参考

EasyUI是基于jQuery的图形用户界面插件库，它提供了各种易于使用和高度可定制的UI组件和插件，其中包括 Form Widget 组件。

Form Widget 组件可以帮助程序员快速创建表单，并支持表单验证、表单数据绑定、表单提交等功能。本文将详细介绍 EasyUI jQuery Form Widget 组件的使用方法和开发技巧。

安装

可以通过以下方式来安装 EasyUI：

1. 通过 npm 安装：npm install jquery-easyui

2. 直接下载 EasyUI 的源代码并引入：

   <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css">
   <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css">
   <script type="text/javascript" src="jquery-easyui/jquery.min.js"></script>
   <script type="text/javascript" src="jquery-easyui/jquery.easyui.min.js"></script>
   

基本用法

创建表单

首先，我们需要在 HTML 中创建一个表单元素，然后通过 jQuery 命令来初始化 Form Widget：

<form id="myForm" method="post">
  <input type="text" name="username" />
  <input type="password" name="password" />
</form>

$('#myForm').form();

这样一个基本的表单就创建出来了。

表单验证

使用 Form Widget 可以非常方便地进行表单验证。我们可以在表单元素中添加验证规则，并在 jQuery 中为表单元素绑定验证函数：

<form id="myForm" method="post">
  <input type="text" name="username" class="easyui-validatebox" data-options="required:true" />
  <input type="password" name="password" class="easyui-validatebox" data-options="required:true" />
  <input type="submit" value="提交" />

  <div id="errorBox" style="color:red;"></div>
</form>

$('#myForm').form({
  onSubmit: function(){
    return $(this).form('validate');
  },
  success: function(data){
    alert('提交成功：' + data);
  },
  error: function(){
    $('#errorBox').html('验证出错，提交失败！');
  }
});

表单数据绑定

除了验证，Form Widget 还支持表单数据的绑定。我们可以通过以下方式为表单元素绑定初始值：

<form id="myForm" method="post">
  <input type="text" name="username" class="easyui-validatebox" data-options="required:true" value="张三" />
  <input type="password" name="password" class="easyui-validatebox" data-options="required:true" />
  <input type="submit" value="提交" />
</form>

表单提交

最后，在表单验证通过之后，我们需要提交表单数据。可以通过以下方式来提交表单：

$('#myForm').form('submit', {
  success: function(data){
    alert('提交成功：' + data);
  }
});

高级用法

除了基本的用法，Form Widget 还提供了一些高级的功能和插件：

文件上传

表单中经常需要上传文件，而 Form Widget 也提供了支持。

首先，我们需要添加一个可以选择和上传文件的按钮：

<input type="file" name="imageFile" id="uploadButton" />

然后，我们要初始化文件上传插件：

$('#uploadButton').filebox({
    buttonText: '选择文件',
    buttonAlign: 'right',
    onChange: function(newValue, oldValue){
        // newValue 表示新选择的文件名称，oldValue 是旧文件名称
        // 可以在此处验证文件类型、大小等
        // 判断成功之后可以提交表单
    }
});

自定义验证器

Form Widget 还支持自定义验证器。下面是一个示例：

$.extend($.fn.validatebox.defaults.rules, {
    phone: {
        validator: function(value, param){
            return /^1[3-9]\d{9}$/.test(value);
        },
        message: '电话号码格式错误'
    }
});

// 在表单元素中使用这个验证器：
<input type="text" name="phone" class="easyui-validatebox" data-options="required:true, validType:'phone'" />

可以看到，我们通过 $.extend 方法为 $.fn.validatebox.defaults.rules 添加了一个名为 phone 的验证器，然后在表单元素中使用了该验证器。

表单数据初始化

有时候，我们需要在表单元素中倒入一些数据。这时候，我们可以使用表单数据初始化功能：

<form id="myForm" method="post">
  <input type="text" name="username" class="easyui-validatebox" data-options="required:true" value="张三" />
  <input type="password" name="password" class="easyui-validatebox" data-options="required:true" />
  <input type="submit" value="提交" />
</form>

$('#myForm').form('load', {
  username: '李四'
});

注意，load 方法并不会触发表单元素的验证，如果需要验证，需要手动调用：

$('#myForm').form({
  onSubmit: function(){
    return $(this).form('validate');
  },
  success: function(data){
    alert('提交成功：' + data);
  },
  error: function(){
    $('#errorBox').html('验证出错，提交失败！');
  }
}).form('load', {
  username: '李四'
});

结语

EasyUI jQuery Form Widget 组件提供了众多功能，可以大大加快程序员的开发速度。通过本文的介绍，希望可以对你有所帮助。如果你对 EasyUI 还有任何问题，欢迎到官方文档中查看更多信息。