PHP表單生成器,支持表單驗證

FormBuilder

FormBuilder 是一個開源的PHP表單生成器,能夠快速生成現代化的form表單。還能夠配合開源項目 xaboy/form-create 生成任何 Vue 組件php

github | 文檔git

環境需求

  • PHP >= 5.4

安裝

使用 composer:github

$ composer require xaboy/form-builder:~2.0
複製代碼

文檔

文檔bash

支持 UI

  • IView
  • ElementUI

功能介紹

  • 內置17種經常使用的表單組件
  • 支持表單驗證
  • 支持生成任何 Vue 組件
  • 支持柵格佈局
  • 能夠配合 form-create 生成更復雜的表單

生成表單

以 ElementUI 爲例,用法以下:markdown

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 驗證app

$input = Elm::input('goods_name','商品名稱');
//必填
$input->required();
複製代碼

建立一個必填的驗證規則composer

//input 組件值得類型爲 string
$validate = Elm::validateStr();
$validate->required()->message('請填寫商品名稱');
$input->appendValidate($validate);
//$input->appendValidates([$validate]);
//$input->validate([$validate]) //這個會覆蓋剛剛添加的必填規則
複製代碼

獲取組件類型對應的驗證規則

全部內置組件都支持經過 createValidate 方法獲取組件的驗證規則,注意:一個組件的驗證規則可能有多個類型,要把組件全部的規則配置完後再獲取oop

$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

值發生變化時觸發驗證,默認ui

blur

組件失去焦點時觸發

submit

表單提交時觸發

效果圖

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/9/17/16d3e566f1b86c1d~tplv-t2oaga2asx-image.image
相關文章
相關標籤/搜索