可以生成 Vue 自定义组件的 PHP 表单生成器,支持 IView 和 ElementUI

FormBuilder

FormBuilder 是一个开源的PHP表单生成器,可以快速生成现代化的form表单。还可以配合开源项目 xaboy/form-create 生成任何 Vue 组件

github | 文档

环境需求

  • PHP >= 5.4

安装

使用 composer:

$ composer require xaboy/form-builder:~2.0

文档

文档

支持 UI

  • IView
  • ElementUI

功能介绍

  • 内置17种常用的表单组件
  • 支持表单验证
  • 支持生成任何 Vue 组件
  • 支持栅格布局
  • 可以配合 form-create 生成更复杂的表单

生成表单

以 ElementUI 为例,用法如下:

use  FormBuilder\Factory\Elm;

$action = '/save.php';
$method = 'POST';

$input = Elm::input('goods_name', '商品名称')->required();
$textarea = Elm::textarea('goods_info', '商品简介');
$switch = Elm::switches('is_open', '是否开启')->activeText('开启')->inactiveText('关闭');

//创建表单
$form = Elm::form($action)->setMethod($method);

//添加组件
$form->setRule([$input, $textarea]);
$form->append($switch);

//生成表单页面
echo $formHtml = $form->view();

表单验证

必填

所有内置组件都支持 required 验证

$input = Elm::input('goods_name','商品名称');
//必填
$input->required();

创建一个必填的验证规则

//input 组件值得类型为 string
$validate = Elm::validateStr();
$validate->required()->message('请填写商品名称');
$input->appendValidate($validate);
//$input->appendValidates([$validate]);
//$input->validate([$validate]) //这个会覆盖刚刚添加的必填规则

获取组件类型对应的验证规则

所有内置组件都支持通过 createValidate 方法获取组件的验证规则,注意:一个组件的验证规则可能有多个类型,要把组件所有的规则配置完后再获取

$start = date('Y-m-d', strtotime('- 10day'));
$end = date('Y-m-d', time());
$dateRange = Elm::dateRange('start_time','时间区间', $start, $end);
$validate = $dateRange->createValidate();

长度或值必须在这个范围内

$validate->range(1,10);

长度或值必须大于这个值

$validate->min(1);

长度或值必须小于这个值

$validate->max(10);

长度或值必须等于这个值

$validate->length(10);

值必须在 list 中

$list = [1,2,3,4];
$validate->enum($list);

正则验证

$validate->pattern('^[A-Z]+$');

验证未通过错误信息

$validate->message('输入有误');

创建规则

string类型

$validate = Elm::validateStr();
//email
$validate = Elm::validateEmail();
//url
$validate = Elm::validateUrl();

array类型

$validate = Elm::validateArr();

int类型

$validate = Elm::validateInt();

float类型

$validate = Elm::validateFloat();

float|int类型

$validate = Elm::validateNum();

Date类型

例如DatePicker,TimePicker

$validate = Elm::validateDate();

object类型

$validate = Elm::validateObject();

枚举类型

$validate = Elm::validateEnum()->enum(['1','2','3']);

hex类型

$validate = Elm::validateHex();

触发方式

change

值发生变化时触发验证,默认

blur

组件失去焦点时触发

submit

表单提交时触发

php
本作品采用《CC 协议》,转载必须注明作者和本文链接
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!