可以生成 Vue 自定義元件的 PHP 表單生成器,支援 IView 和 ElementUI

xaboy發表於2019-09-14
Vue元件PHPViewUI

FormBuilder 是一個開源的PHP表單生成器,可以快速生成現代化的form表單。還可以配合開源專案 xaboy/form-create 生成任何 Vue 元件

環境需求

  • 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

表單提交時觸發

相關文章