介绍(Introduction) 入门(Getting Started) 应用结构(Application Structure) 请求处理(Handling Requests) 关键概念(Key Concepts) 配合数据库工作(Working with Databases) 接收用户数据(Getting Data from Users) 显示数据(Displaying Data) 安全(Security) 缓存(Caching) RESTful Web 服务(RESTful Web Services) 开发工具(Development Tools) 测试(Testing) 高级专题(Special Topics) 小部件(Widgets) 助手类(Helpers)

在客户端扩展 ActiveForm

社区推荐:掘金是一个面向程序员的技术社区,从后端到架构,从 PHP 最佳实践到一线大厂经验分享,无论入门还是进阶,来掘金你不会错过后端开发的任何一个技术干货。

yii\widgets\ActiveForm 小部件附带一组用于客户端验证的 JavaScript 方法。 它的实现非常灵活,可以让你以不同的方式扩展它。 下面我们来看描述。

ActiveForm 事件

ActiveForm 触发一系列专用事件。使用类似以下的代码,您可以订阅这些代码 事件并处理它们:

$('#contact-form').on('beforeSubmit', function (e) {
	if (!confirm("Everything is correct. Submit?")) {
		return false;
	}
	return true;
});

在下文中,我们将查看可用的事件。

beforeValidate

beforeValidate 是在验证整个表单之前触发的。

事件处理程序的签名应该是:

function (event, messages, deferreds)

其中

  • event: 一个 Event 对象。
  • messages: 一个关联数组,其中键是属性ID, 值是相应属性的错误消息数组。
  • deferreds: 一个 Deferred 对象数组。你可以使用 deferreds.add(callback) 来添加一个新的延迟验证。

如果处理程序返回一个布尔型 false,它将在此事件后停止进一步的表单验证。 结果 afterValidate 事件将不会被触发。

afterValidate

afterValidate 是在验证整个表单后触发的。

事件处理程序的签名应该是:

function (event, messages, errorAttributes)

其中

  • event: 一个 Event 对象。
  • messages: 一个关联数组,其中键是属性ID, 值是相应属性的错误消息数组。
  • errorAttributes: 一个具有验证错误的属性数组。有关此参数的结构, 请参阅 attributeDefaults

beforeValidateAttribute

beforeValidateAttribute 事件是在验证属性之前触发的。 事件处理程序的签名应该是:

function (event, attribute, messages, deferreds)

其中

  • event: 一个 Event 对象。
  • attribute: 要验证的属性。 请参阅这个参数的 attributeDefaults 结构。
  • messages: 可以为其添加指定属性的验证错误消息的数组。
  • deferreds: 一个 Deferred 对象数组。你可以使用 deferreds.add(callback) 来添加一个新的延迟验证。

如果处理程序返回布尔型 false,它将停止进一步验证指定的属性。 结果,afterValidateAttribute 事件将不会被触发。

afterValidateAttribute

afterValidateAttribute 事件在验证整个表单和每个属性后触发的。

事件处理程序的签名应该是:

function (event, attribute, messages)

其中

  • event: 一个 Event 对象。
  • attribute: 该属性会被验证。有关此参数的结构, 请参阅 attributeDefaults
  • messages: 可以为其添加指定属性的其他验证错误消息的 数组。

beforeSubmit

beforeSubmit 是在所有验证通过后且提交表单之前触发的。

事件处理程序的签名应该是:

function (event)

其中 event 是一个 Event 对象。

如果处理返回布尔型“false”,它将停止表单提交。

ajaxBeforeSend

ajaxBeforeSend 事件是在发送用于基于AJAX的验证的AJAX请求之前触发的。

事件处理程序的签名应该是:

function (event, jqXHR, settings)

其中

  • event: 一个 Event 对象。
  • jqXHR: 一个 jqXHR 对象
  • settings: AJAX 请求的设置

ajaxComplete

ajaxComplete 事件是在完成基于 AJAX 验证的 AJAX 请求后触发的。

事件处理程序的签名应该是:

function (event, jqXHR, textStatus)

where

  • event: 一个 Event 对象。
  • jqXHR: 一个 jqXHR 对象
  • textStatus: 请求的状态 ("success", "notmodified", "error", "timeout", "abort", or "parsererror")。

通过 AJAX 提交表单

虽然可以在客户端或通过 AJAX 请求进行验证,但作为默认的正常请求 表单提交本身已完成。如果你想通过 AJAX 提交表单,你可以 通过以下方式处理表单的 beforeSubmit 事件做到这一点:

var $form = $('#formId');
$form.on('beforeSubmit', function() {
    var data = $form.serialize();
    $.ajax({
        url: $form.attr('action'),
        type: 'POST',
        data: data,
        success: function (data) {
            // 执行成功
        },
        error: function(jqXHR, errMsg) {
            alert(errMsg);
        }
     });
     return false; // 防止默认提交
});

要了解更多关于 jQuery ajax() 函数的信息,请参阅 jQuery 文档

动态添加字段

在现代 Web 应用程序中,您经常需要在向用户显示表单后更改表单。 这可以例如在点击“加号”图标之后添加新的字段。 要为这些字段启用客户端验证,他们必须注册 ActiveForm JavaScript 插件。

您必须自行添加一个字段,然后将其添加到验证列表中:

$('#contact-form').yiiActiveForm('add', {
    id: 'address',
    name: 'address',
    container: '.field-address',
    input: '#address',
    error: '.help-block',
    validate:  function (attribute, value, messages, deferred, $form) {
        yii.validation.required(value, messages, {message: "Validation Message Here"});
    }
});

要从验证列表中删除一个字段,使它不被验证,您可以执行以下操作:

$('#contact-form').yiiActiveForm('remove', 'address');
TPshop
发现错别字或您认为此页面需要改进?
点此进入 Github 编辑