阅读 799

PHP表单生成器,支持表单验证

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

表单提交时触发

效果图

https://user-gold-cdn.xitu.io/2019/9/17/16d3e566f1b86c1d?w=1425&h=2267&f=png&s=118343

关注下面的标签,发现更多相似文章
评论