Wizhi CMS 文档

Formmanager

Nette Form 属于 Nette Framework 的一部分,也可以直接单独拿来用。Nette Form 功能非常全面,可以支持前后端同步验证。Nette Form 非常灵活,可以很方便的添加自定义控件类型。为我们创建表单提供了很大的便利,可以为我们节省不少时间,提高效率,减少人为的失误发生。

我们通过扩展Nette Form 的方式,把平时开发中常用的表单控件都写成了组件,只要安装了Wizhi CMS 插件,就可以直接使用。

开始使用

use Wizhi\Forms\Form;

$form = new Form;

// 格式化表单组件为 Bootstrap 样式
wizhi_form( $form, 'horizontal' );

$form->setMethod( 'POST' );

通用方法

Nette Form 默认控件

文本

$form->addText('zip', '邮编:')
    ->setRequired('邮编为必填项')
    ->addRule(Form::PATTERN, '邮编必须为5位数', '([0-9]\s*){5}');

默认的的验证规则

Form::MIN_LENGTH    最小字符长度    int $minLength
Form::MAX_LENGTH    最大字符长度    int $maxLength
Form::LENGTH        必须长度    [int $min, int $max] or int $length
Form::EMAIL            是否为Email?     
Form::URL            是否为 URL?     
Form::PATTERN        对正则表达式的整个值进行测试,有点像是在^和a $里面      string $pattern
Form::INTEGER        是否为整数is value integer?     
Form::NUMERIC        Form::INTEGER 的别名 
Form::FLOAT            是否为浮点数?     
Form::MIN            最小的整数值        int|float $minimum
Form::MAX            最大值为整数值       int|float $maximum
Form::RANGE            是否在范围内?    [int $min, int $max]

密码

$form->addPassword('password', 'Password:')
    ->setRequired()
    ->addRule(Form::MIN_LENGTH, 'Password has to be at least %d characters long', 3)
    ->addRule(Form::PATTERN, 'Password must contain a number', '.*[0-9].*');

文本

$form->addTextArea('note', 'Note:')
    ->setRequired(false) // optional
    ->addRule(Form::MAX_LENGTH, 'Your note is way too long', 10000);

电子邮件

$form->addEmail('email', 'Email:');

整数

$form->addInteger('level', 'Level:')
    ->setDefaultValue(0)
    ->addRule($form::RANGE, [0, 100]);

文件上传

$form->addUpload('thumbnail', 'Thumbnail:')
    ->setRequired(false) // optional
    ->addRule(Form::IMAGE, 'Thumbnail must be JPEG, PNG or GIF')
    ->addRule(Form::MAX_FILE_SIZE, 'Maximum file size is 64 kB.', 64 * 1024 /* size in Bytes */);

多文件上传

$form->addMultiUpload('files', 'Files');

隐藏字段

$form->addHidden('userid');

复选框

$form->addCheckbox('agree', 'I agree with terms')
    ->setRequired('You must agree with our terms');

单选列表

$sex = [
    'm' => 'male',
    'f' => 'female',
];
$form->addRadioList('gender', 'Gender:', $sex);

// to list options within 1 line
$form->addRadioList('gender', 'Gender:', $sex)
    ->getSeparatorPrototype()->setName(null);

复选框

$form = new Form;
$form->addCheckboxList('colors', 'Colors:', [
    'r' => 'red',
    'g' => 'green',
    'b' => 'blue',
]);

下拉选择

$countries = [
    'Europe' => [
        'CZ' => 'Czech republic',
        'SK' => 'Slovakia',
        'GB' => 'United Kingdom',
    ],
    'CA' => 'Canada',
    'US' => 'USA',
    '?'  => 'other',
];
$form->addSelect('country', 'Country:', $countries)
    ->setPrompt('Pick a country');

下拉多选

$form->addMultiSelect('options', 'Pick many:', $options);

提交按钮

$form->addSubmit('submit', 'Register');

按钮

$form->addButton('raise', 'Raise salary')
    ->setHtmlAttribute('onclick', 'raiseSalary()');

图片按钮

$form->addImage('submit', '/path/to/image');

Wizhi Form 扩展控件

WordPress 随机数验证

$form->addCsrf( 'user_register', '随机数验证失败。' );

Ajax 上传

$form->addAjaxUpload( 'logo', 'Logo', false )
             ->setAttribute( 'placeholder', 'Uploading Logo' )
             ->setAttribute( 'data-url', home_url( 'helper/ajax/upload' ) )
             ->setRequired( 'Please Upload a logo image' )
             ->setDefaultValue( $defaults->logo );

获取短信验证码

$form->addSms( 'validate_code', '短信验证码' )->setRequired( '请输入短信验证码。' )
     ->setAttribute( 'data-url', home_url('helper/get/sms/') )
     ->setAttribute( 'nette-ajax-validate-href', home_url('helper/sms/') );

图形验证码

$form->addCaptcha( 'captacha', '图形验证码' )
     ->setRequired( '请输入图形验证码。' )
     ->setAttribute( 'data-url', home_url('helper/get/captcha/register') );

Slider 输入

$form->addSlider( 'quote', ' 邮箱', [ 'type' => 'double', 'min' => 0, 'max' => 1000, 'grid' => 'true' ] );

颜色选择

$form->addColorpicker( 'event_box_color_m', 'Mobile Event Box Color', [] )
             ->setOption( 'class', 'col-md-6' )
             ->setDefaultValue( $defaults->event_box_color_m );

模拟下拉选择

$form->addDropdownSelect( 'catalog', 'Catalog', taxonomy_option( 'catalog' ) )
             ->setAttribute( 'placeholder', 'Select Catalog' )
             ->setRequired( 'Please Select A Catalog' )
             ->setDefaultValue( wp_get_post_terms( $pid, 'catalog' )[ 0 ]->term_id );

WordPress 可视化编辑器

$form->addEditor( 'description', 'Description & more' )
             ->setRequired( 'Please input the Description' )
             ->setDefaultValue( $post->content );

日期选择

$form->addDatepicker( 'available_from', 'Available from', [] )
     ->setDefaultValue( $post->meta->available_from );