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

表單提交時觸發

效果圖