ITPub博客
首页 博客 专栏 学院 社区 IT新媒体评选
发博

首页 > 移动开发 > 微信开发 > PHP快速生成表单，支持表单验证

PHP快速生成表单，支持表单验证

原创 微信开发 作者：阿里程序猿 时间：2019-03-22 11:30:28 0 删除 编辑

安装

composer require xaboy/form-builder

示例

https://user-gold-cdn.xitu.io/2018/11/16/1671adccfe8fb96a?w=1213&h=1377&f=jpeg&s=126177

演示地址

演示地址： CRMEB电商小程序系统演示地址：demo.crmeb.net    

账号： demo  密码：crmeb.com

下载前端演示地址： http://github.crmeb.net/u/ruanjKF

例子 (TP框架)

版本1 编辑权限 

$form = Form::create(Url::build('update',array('id'=>$id)),[
            Form::input('menu_name','按钮名称',$menu['menu_name']),
            Form::select('pid','父级id',(string)$menu->getData('pid'))->setOptions(function()use($id){
                $list = (Util::sortListTier(MenusModel::where('id','<>',$id)->select()->toArray(),'顶级','pid','menu_name'));
                $menus = [['value'=>0,'label'=>'顶级按钮']];
                foreach ($list as $menu){
                    $menus[] = ['value'=>$menu['id'],'label'=>$menu['html'].$menu['menu_name']];
                }
                return $menus;
            })->filterable(1),
            Form::select('module','模块名',$menu['module'])->options([['label'=>'总后台','value'=>'admin'],['label'=>'总后台1','value'=>'admin1']]),
            Form::input('controller','控制器名',$menu['controller']),
            Form::input('action','方法名',$menu['action']),
            Form::input('params','参数',MenusModel::paramStr($menu['params']))->placeholder('举例:a/123/b/234'),
            Form::frameInputOne('icon','图标',Url::build('admin/widget.widgets/icon',array('fodder'=>'icon')),$menu['icon'])->icon('ionic'),
            Form::number('sort','排序',$menu['sort']),
            Form::radio('is_show','是否菜单',$menu['is_show'])->options([['value'=>0,'label'=>'隐藏'],['value'=>1,'label'=>'显示(菜单只显示三级)']])
        ]);
$form->setMethod('post')->setTitle('编辑权限');
$this->assign(compact('form'));
return $this->fetch('public/form-builder');

效果

https://user-gold-cdn.xitu.io/2018/11/16/1671adccffba8992?w=748&h=677&f=jpeg&s=58238

版本2 添加产品 

$field = [
    Form::select('cate_id','产品分类')->setOptions(function(){
        $list = CategoryModel::getTierList();
        foreach ($list as $menu){
            $menus[] = ['value'=>$menu['id'],'label'=>$menu['html'].$menu['cate_name'],'disabled'=>$menu['pid']== 0];//,'disabled'=>$menu['pid']== 0];
        }
        return $menus;
    })->filterable(1)->multiple(1),
    Form::input('store_name','产品名称')->col(Form::col(8)),
    Form::input('store_info','产品简介')->type('textarea'),
    Form::input('keyword','产品关键字')->placeholder('多个用英文状态下的逗号隔开'),
    Form::input('unit_name','产品单位','件'),
    Form::frameImageOne('image','产品主图片(305*305px)',Url::build('admin/widget.images/index',array('fodder'=>'image')))->icon('image')->width('100%')->height('550px'),
    Form::frameImages('slider_image','产品轮播图(640*640px)',Url::build('admin/widget.images/index',array('fodder'=>'slider_image')))->maxLength(5)->icon('images')->width('100%')->height('550px')->spin(0),
    Form::number('price','产品售价')->min(0)->col(8),
    Form::number('ot_price','产品市场价')->min(0)->col(8),
    Form::number('give_integral','赠送积分')->min(0)->precision(0)->col(8),
    Form::number('postage','邮费')->min(0)->col(Form::col(8)),
    Form::number('sales','销量')->min(0)->precision(0)->col(8),
    Form::number('ficti','虚拟销量')->min(0)->precision(0)->col(8),
    Form::number('stock','库存')->min(0)->precision(0)->col(8),
    Form::number('cost','产品成本价')->min(0)->col(8),
    Form::number('sort','排序')->col(8),
    Form::radio('is_show','产品状态',0)->options([['label'=>'上架','value'=>1],['label'=>'下架','value'=>0]])->col(8),
    Form::radio('is_hot','热卖单品',0)->options([['label'=>'是','value'=>1],['label'=>'否','value'=>0]])->col(8),
    Form::radio('is_benefit','促销单品',0)->options([['label'=>'是','value'=>1],['label'=>'否','value'=>0]])->col(8),
    Form::radio('is_best','精品推荐',0)->options([['label'=>'是','value'=>1],['label'=>'否','value'=>0]])->col(8),
    Form::radio('is_new','首发新品',0)->options([['label'=>'是','value'=>1],['label'=>'否','value'=>0]])->col(8),
    Form::radio('is_postage','是否包邮',0)->options([['label'=>'是','value'=>1],['label'=>'否','value'=>0]])->col(8)
];
$form = Form::create(Url::build('save'));
$form->setMethod('post')->setTitle('添加产品')->components($field);
$this->assign(compact('form'));
return $this->fetch('public/form-builder');

效果

https://user-gold-cdn.xitu.io/2018/11/16/1671adcd00582aa5?w=890&h=826&f=jpeg&s=70382

版本3 编辑产品 

$product = ProductModel::get($id);
$form = Form::create(Url::build('update',array('id'=>$id)),[
    Form::select('cate_id','产品分类',explode(',',$product->getData('cate_id')))->setOptions(function(){
        $list = CategoryModel::getTierList();
        foreach ($list as $menu){
            $menus[] = ['value'=>$menu['id'],'label'=>$menu['html'].$menu['cate_name'],'disabled'=>$menu['pid']== 0];//,'disabled'=>$menu['pid']== 0];
        }
        return $menus;
    })->filterable(1)->multiple(1),
    Form::input('store_name','产品名称',$product->getData('store_name')),
    Form::input('store_info','产品简介',$product->getData('store_info'))->type('textarea'),
    Form::input('keyword','产品关键字',$product->getData('keyword'))->placeholder('多个用英文状态下的逗号隔开'),
    Form::input('unit_name','产品单位',$product->getData('unit_name')),
    Form::frameImageOne('image','产品主图片(305*305px)',Url::build('admin/widget.images/index',array('fodder'=>'image')),$product->getData('image'))->icon('image')->width('100%')->height('550px'),
    Form::frameImages('slider_image','产品轮播图(640*640px)',Url::build('admin/widget.images/index',array('fodder'=>'slider_image')),json_decode($product->getData('slider_image'),1))->maxLength(5)->icon('images'),
    Form::number('price','产品售价',$product->getData('price'))->min(0)->precision(2)->col(8),
    Form::number('ot_price','产品市场价',$product->getData('ot_price'))->min(0)->col(8),
    Form::number('give_integral','赠送积分',$product->getData('give_integral'))->min(0)->precision(0)->col(8),
    Form::number('postage','邮费',$product->getData('postage'))->min(0)->col(8),
    Form::number('sales','销量',$product->getData('sales'))->min(0)->precision(0)->col(8),
    Form::number('ficti','虚拟销量',$product->getData('ficti'))->min(0)->precision(0)->col(8),
    Form::number('stock','库存',ProductModel::getStock($id)>0?ProductModel::getStock($id):$product->getData('stock'))->min(0)->precision(0)->col(8),
    Form::number('cost','产品成本价',$product->getData('cost'))->min(0)->col(8),
    Form::number('sort','排序',$product->getData('sort'))->col(8),
    Form::radio('is_show','产品状态',$product->getData('is_show'))->options([['label'=>'上架','value'=>1],['label'=>'下架','value'=>0]])->col(8),
    Form::radio('is_hot','热卖单品',$product->getData('is_hot'))->options([['label'=>'是','value'=>1],['label'=>'否','value'=>0]])->col(8),
    Form::radio('is_benefit','促销单品',$product->getData('is_benefit'))->options([['label'=>'是','value'=>1],['label'=>'否','value'=>0]])->col(8),
    Form::radio('is_best','精品推荐',$product->getData('is_best'))->options([['label'=>'是','value'=>1],['label'=>'否','value'=>0]])->col(8),
    Form::radio('is_new','首发新品',$product->getData('is_new'))->options([['label'=>'是','value'=>1],['label'=>'否','value'=>0]])->col(8),
    Form::radio('is_postage','是否包邮',$product->getData('is_postage'))->options([['label'=>'是','value'=>1],['label'=>'否','value'=>0]])->col(8)
]);
$form->setMethod('post')->setTitle('编辑产品');
$this->assign(compact('form'));
return $this->fetch('public/form-builder');

效果

https://user-gold-cdn.xitu.io/2018/11/16/1671adcd014b9cff?w=764&h=926&f=jpeg&s=39519

当form提交成功后会调用 window.formCreate.formSuccess(res,$f,formData) 作为回调方法

代码 

namespace Test;
use FormBuilder\Form;
//input组件
$input = Form::input('goods_name','商品名称');
//日期区间选择组件
$dateRange = Form::dateRange(
    'limit_time',
    '区间日期',
    strtotime('- 10 day'),
    time()
);
//省市二级联动组件
$cityArea = Form::city('address','收货地址',[
    '陕西省','西安市'
]);
$checkbox = Form::checkbox('label','表单',[])->options([
    ['value'=>'1','label'=>'好用','disabled'=>true],
    ['value'=>'2','label'=>'方便','disabled'=>true]
])->col(Form::col(12));
$tree = Form::treeChecked('tree','权限',[])->data([
    Form::treeData(11,'leaf 1-1-1')->children([Form::treeData(13,'131313'),Form::treeData(14,'141414')]),
    Form::treeData(12,'leaf 1-1-2')
])->col(Form::col(12)->xs(12));
//创建form
$form = Form::create('/save.php',[
    $input,$dateRange,$cityArea,$checkbox,$tree
]);
$html = $form->formRow(Form::row(10))->setMethod('get')->setTitle('编辑商品')->view();
//输出form页面
echo $html;

AJAX请求返回

namespace \FormBuilder\Json

  • Json::succ(msg,data = []) 表单提交成功
  • Json::fail(errorMsg,data = []) 表单提交失败
  • Json::uploadSucc(filePath,msg) 文件/图片上传成功,上传成功后返回文件地址
  • Json::uploadFail(errorMsg) 文件/图片上传失败

Form 表单生成类

namespace \FormBuilder\Form

  • components(array $components = []) 批量添加组件
  • formRow(Row $row) 设置表单Row规则
  • formStyle(FormStyle $formStyle) 设置表单样式
  • setAction($action) 设置提交地址
  • getConfig($key='') 设置配置文件
  • setMethod($method) 设置提交方式
  • setMethod($method) 设置提交方式
  • append(FormComponentDriver $component) 追加组件
  • prepend(FormComponentDriver $component) 开头插入组件
  • getRules() 获得表单规则
  • view() 获取表单视图
  • script() 获取表单生成器所需全部js
  • formScript() 获取生成表单的js代码,可用js变量接受生成函数 create ,执行 create(el,callback) 即可生成表单
  • getScript() 获取表单生成器所需js
  • create( action, array components = []) 生成表单快捷方法
  • setTitle($title) 设置title

FormStyle表单样式

  • Form::style 

 * @method $this inline(Boolean $bool) 是否开启行内表单模式
 * @method $this labelPosition(String $labelPosition) 表单域标签的位置，可选值为 left、right、top
 * @method $this labelWidth(Number $labelWidth) 表单域标签的宽度，所有的 FormItem 都会继承 Form 组件的 label-width 的值
 * @method $this showMessage(Boolean $bool) 是否显示校验错误信息
 * @method $this autocomplete($bool = false) 原生的 autocomplete 属性，可选值为 true = off 或 false = on

Row栅格规则

  • Form::row 
 * @method $this gutter(Number $gutter) 栅格间距，单位 px，左右平分
 * @method $this type(String $type) 栅格的顺序，在flex布局模式下有效
 * @method $this align(String $align) flex 布局下的垂直对齐方式，可选值为top、middle、bottom
 * @method $this justify(String $justify) flex 布局下的水平排列方式，可选值为start、end、center、space-around、space-between
 * @method $this className(String $className) 自定义的class名称

Col栅格规则

  • Form::col 
 * @method $this span(Number $span) 栅格的占位格数，可选值为0~24的整数，为 0 时，相当于display:none
 * @method $this order(Number $order) 栅格的顺序，在flex布局模式下有效
 * @method $this offset(Number $offset) 栅格左侧的间隔格数，间隔内不可以有栅格
 * @method $this push(Number $push) 栅格向右移动格数
 * @method $this pull(Number $pull) 栅格向左移动格数
 * @method $this labelWidth(Number $labelWidth) 表单域标签的的宽度,默认150px
 * @method $this className(String $className) 自定义的class名称
 * @method $this xs(Number|Col $span) <768px 响应式栅格，可为栅格数或一个包含其他属性的对象
 * @method $this sm(Number|Col $span) ≥768px 响应式栅格，可为栅格数或一个包含其他属性的对象
 * @method $this md(Number|Col $span) ≥992px 响应式栅格，可为栅格数或一个包含其他属性的对象
 * @method $this lg(Number|Col $span) ≥1200px 响应式栅格，可为栅格数或一个包含其他属性的对象

select,checkbox,radio组件配置options专用方法

  • option( value, label, $disabled = false) 单独设置选项
  • options(array options, disabled = false) 批量设置选项
  • setOptions( options, disabled = false) 批量设置选项 支持匿名函数

以下组件公共方法

  • col($span) 配置col栅格规则,传入0-24的数字或 Col 类,默认为24
  • value($value) 设置组件的值
  • validateAs(array $validate) 添加验证规则
  • validate() 设置验证规则 规则说明

组件

namespace \FormBuilder\Form

多级联动组件

  • Form::cascader 多级联动组件,value为array类型
  • Form::city 省市二级联动,value为array类型
  • Form::cityArea 省市区三级联动,value为array类型 
    方法   返回值 方法名(参数)   注释
 * @method $this type(String $type) 数据类型, 支持 city_area(省市区三级联动), city (省市二级联动), other (自定义)
 * @method $this disabled(Boolean $bool) 是否禁用选择器
 * @method $this clearable(Boolean $bool) 是否支持清除
 * @method $this placeholder(String $placeholder) 占位文本
 * @method $this trigger(String $trigger) 次级菜单展开方式，可选值为 click 或 hover
 * @method $this changeOnSelect(Boolean $bool) 当此项为 true 时，点选每级菜单选项值都会发生变化, 默认为 false
 * @method $this size(String $size) 输入框大小，可选值为large和small或者不填
 * @method $this filterable(Boolean $bool) 是否支持搜索
 * @method $this notFoundText(String $text) 当搜索列表为空时显示的内容
 * @method $this transfer(Boolean $bool) /是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果
 * @method $this required($message = null, $trigger = 'change') 设为必选
 * @method $this data(array $data) 设置多级联动可选项的数据
 *  例如: {
 *    "value":"北京市", "label":"北京市", "children":[{
 *        "value":"东城区", "label":"东城区"
 *    }]
 *  }
 * @method $this jsData($var) 设置data为js变量
 * @method string getType($var) 获取组件类型

复选框组件

  • Form::checkbox 

 * @method $this size(String $size) 多选框组的尺寸，可选值为 large、small、default 或者不设置
 * @method $this required($message = null, $trigger = 'change') 设为必选

颜色选择组件

  • Form::color 
 * @method $this disabled(Boolean $bool) 是否禁用
 * @method $this alpha(Boolean $bool) 是否支持透明度选择, 默认为false
 * @method $this hue(Boolean $bool) 是否支持色彩选择, 默认为true
 * @method $this recommend(Boolean $bool) 是否显示推荐的颜色预设, 默认为false
 * @method $this size(String $size) 尺寸，可选值为large、small、default或者不设置
 * @method $this format(String $format) 颜色的格式，可选值为 hsl、hsv、hex、rgb    String    开启 alpha 时为 rgb，其它为 hex
 * @method $this required($message = null, $trigger = 'change') 设为必选
 * @method $this colors($colors) 自定义颜色预设

日期选择组件

  • Form::date 日期选择
  • Form::dateRange 日期区间选择,value为array类型
  • Form::dateTime 日期+时间选择
  • Form::dateTimeRange 日期+时间 区间选择,value为array类型
  • Form::year 年份选择
  • Form::month 月份选择 
 * @method $this type(String $type) 显示类型，可选值为 date、daterange、datetime、datetimerange、year、month
 * @method $this format(String $format) 展示的日期格式, 默认为yyyy-MM-dd HH:mm:ss
 * @method $this placement(String $placement) 日期选择器出现的位置，可选值为top, top-start, top-end, bottom, bottom-start, bottom-end, left, left-start, left-end, right, right-start, right-end, 默认为bottom-start
 * @method $this placeholder(String $placeholder) 占位文本
 * @method $this confirm(Boolean $bool) 是否显示底部控制栏，开启后，选择完日期，选择器不会主动关闭，需用户确认后才可关闭, 默认为false
 * @method $this size(String $size) 尺寸，可选值为large、small、default或者不设置
 * @method $this disabled(Boolean $bool) 是否禁用选择器
 * @method $this clearable(Boolean $bool) 是否显示清除按钮
 * @method $this readonly(Boolean $bool) 完全只读，开启后不会弹出选择器，只在没有设置 open 属性下生效
 * @method $this editable(Boolean $bool) 文本框是否可以输入, 默认为false
 * @method $this transfer(Boolean $bool) 是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果, 默认为false
 * @method $this splitPanels(Boolean $bool) 开启后，左右面板不联动，仅在 daterange 和 datetimerange 下可用。
 * @method $this showWeekNumbers(Boolean $bool) 开启后，可以显示星期数。

frame组件

  • Form::frame frame组件
  • Form::frameInputs frame组件,input类型,value为array类型
  • Form::frameFiles frame组件,file类型,value为array类型
  • Form::frameImages frame组件,image类型,value为array类型
  • Form::frameInputOne frame组件,input类型,value为string|number类型
  • Form::frameFileOne frame组件,file类型,value为string|number类型
  • Form::frameImageOne frame组件,image类型,value为string|number类型 
 * @method $this type(String $type) frame类型, 有input, file, image, 默认为input
 * @method $this src(String $src) iframe地址
 * @method $this maxLength(int $length) value的最大数量, 默认无限制
 * @method $this icon(String $icon) 打开弹出框的按钮图标
 * @method $this height(String $height) 弹出框高度
 * @method $this width(String $width) 弹出框宽度
 * @method $this spin(Boolean $bool) 是否显示加载动画, 默认为 true
 * @method $this frameTitle(String $title) 弹出框标题
 * @method $this handleIcon(Boolean $bool) 操作按钮的图标, 设置为false将不显示, 设置为true为默认的预览图标, 类型为file时默认为false, image类型默认为true
 * @method $this allowRemove(Boolean $bool) 是否可删除, 设置为false是不显示删除按钮

来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/69914086/viewspace-2639050/ ，如需转载，请注明出处，否则将追究法律责任。

1
0
上一篇： 没有了~
下一篇： CRMEB公众号小程序商城系统打通版
请登录后发表评论 登录
全部评论
阿里程序猿

注册时间：2019-03-22

  • 博文量
    4
  • 访问量
    5404

最新文章

支持我们 作者招募 用户协议 FAQ Contact Us

北京盛拓优讯信息技术有限公司. 版权所有  京ICP备16024965号-8 北京市公安局海淀分局网监中心备案编号：11010802021510 niuxiaotong@pcpop.com 17352615567 未成年人举报专区

广播电视节目制作经营许可证(京) 字第1234号 中国互联网协会会员

违法和不良信息举报电话:18101376593