FormBuilder 是一個開源的PHP表單生成器,能夠快速生成現代化的form表單。還能夠配合開源項目 xaboy/form-create 生成任何 Vue 組件php
- PHP >= 5.4
使用 composer:github
$ composer require xaboy/form-builder:~2.0
複製代碼
文檔bash
- IView
- ElementUI
- 內置17種經常使用的表單組件
- 支持表單驗證
- 支持生成任何 Vue 組件
- 支持柵格佈局
- 能夠配合 form-create 生成更復雜的表單
以 ElementUI 爲例,用法以下:app
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 驗證composer
$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 方法獲取組件的驗證規則,注意:一個組件的驗證規則可能有多個類型,要把組件全部的規則配置完後再獲取ui
$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 = [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
url
$validate = Elm::validateDate();
複製代碼
object
類型$validate = Elm::validateObject();
複製代碼
$validate = Elm::validateEnum()->enum(['1','2','3']);
複製代碼
$validate = Elm::validateHex();
複製代碼
值發生變化時觸發驗證,默認spa
組件失去焦點時觸發
表單提交時觸發