README

此组件旨在在前端验证Symfony表单，而无需重复代码或验证工作。此插件还完全支持错误消息和提示文本的翻译。

安装

需要composer包

composer require josephjbrewer/form-utils

启用组件

// app/AppKernel.php
public function registerBundles()
{
    return array(
        // ...
        new JJB\FormUtilsBundle\JJBFormUtilsBundle(),
    );
}

设置默认表单主题

编辑app/config.yml并设置form-utils组件提供的默认表单模板。

twig:
    form:
        resources:
            - 'JJBFormUtilsBundle:Form:form_theme.html.twig'

使用

资源

添加此组件提供的资源。建议使用assetic。

{% javascripts 
'@JJBFormUtilsBundle/Resources/assets/js/jquery.validator.js' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}

{% stylesheets
'@JJBFormUtilsBundle/Resources/assets/css/style.scss' filter='compass' %}
<link rel="stylesheet" href="{{ asset_url }}"/>
{% endstylesheets %}

覆盖表单主题

默认情况下，提供的表单模板使用由Symfony提供的bootstrap主题。这可以通过创建自己的表单主题并扩展此组件提供的内容来轻松更改。

以下示例使用Symfony的默认表单主题。

<!-- AppBundle/Resources/views/form-template.html.twig -->
{% extends 'form_div_layout.html.twig' %}
{% use 'JJBFormUtilsBundle:Form:form_blocks.html.twig' %}

渲染表单

为了使表单元素渲染验证所需的数据属性，您需要使用twig渲染表单字段。

{{ form_start(form) }}
{{ form_errors(form) }}

{{ form_row(form.username) }}
{{ form_row(form.password) }}
{{ form_row(form.submit) }}

{{ form_end(form) }}

数据建议

数据建议用于向用户提供有关表单字段的详细信息。例如，如果表单关注密码字段，显示用户可以在密码中使用的字符可能很有帮助。为此，您必须向表单字段添加一个名为 data-suggest 的属性。这可以通过两种方式之一完成。

使用表单类

此方法使用表单构建器的 "attr" 选项。

public function buildForm(FormBuilderInterface $builder, array $options)
{
    $builder->add(
        'password',
        'password', [
            'attr' => [
                'data-suggest' => 'Must contain ...'
            ]
        ]
    );
}

使用twig属性

此方法直接将属性添加到表单字段。

{{ form_row(form.password.second, { 'attr' : {
    'data-suggest' : 'Must contain ...'
}}) }}

将验证器绑定到表单

将验证器绑定到表单会在表单及其所有元素上设置监听器。当表单元素的blur事件被触发时，插件将对其进行验证。当表单的submit事件被触发时，插件将验证所有表单元素。如果验证失败，事件传播将停止，表单将不会提交。

var form = $('#myForm');
    
// Enable validation (optional configuration)
$(form).validator(options);

在某些情况下，事件传播将在验证监听器触发之前停止。如果其他javascript插件也在表单的submit事件上监听，则可能会发生这种情况。如果发生这种情况，您将需要手动在表单上触发验证器。为此，只需使用以下语法即可

if ($(form).validator('validate'[, options])) {
    // Do something
}

处理AJAX错误

开发此组件的一个原因是为了帮助将服务器端发生的错误绑定到前端表单元素。当服务器端验证失败时，将创建一个错误对象。要处理前端AJAX错误，返回序列化的错误对象，插件将完成其余工作。

$(form).validator('handleErrors', response[, options]);

格式化错误和数据建议

格式化错误和数据建议就像提供内联模板一样简单。使用 messageTemplate 键用于错误，使用 suggestTemplate 键用于数据建议。

$(document).ready(function() {
    $('#myForm').validator({
        messageTemplate: '<i class="fa fa-exclamation-triangle"></i> {{message}}'
    });
});

验证器选项

高级使用

支持YAML/XML/Annotation约束

在许多情况下，开发人员会使用注解或yaml/xml文件向模型添加约束。当在Symfony中验证表单时，这些约束会与添加到表单的任何约束一起验证。

如果您使用MetaDataConstraintService实例化扩展AbstractBaseForm的表单，则表单将在构建表单视图时将yaml/xml/annotation约束添加到表单对象中。

创建表单类

<?php

namespace ApiBundle\Form\Type;

use JJB\FormUtilsBundle\Form\Type\AbstractBaseForm;

class ExampleType extends AbstractBaseForm
{
   // ...
}

使用元数据约束服务实例化表单

<?php

namespace AppBundle\Controller;

class DefaultController
{
    public function someAction()
    {
        $service = $this->get('jjb.form_utils.service.meta_data_constraint');
        $form    = $this->createForm(new ExampleType($service));
         
        return $this->render('...', [
            'form' => $form->createView()
        ]);
    }
}

josephjbrewer / form-utils

维护者

详细信息