magento2 前端表單驗證

添加一個驗證器

require([
    "jquery",
    "mage/validation",
    "mage/translate"
], function($){
    $.each({
        'validate-custom': [
            function (value, element, params) {
                var isVaild = false;
                return isVaild;
            },
            'message: hello world.'
        ]
    }, function (i, rule) {
        rule.unshift(i);
        $.validator.addMethod.apply($.validator, rule);
    });
});

元素調用

<form class="form" data-mage-init='{"validation":{}}'>
    <input type="text" data-validate="{required:true, 'validate-custom':true}"/>
</form>

ajax驗證器

<input type="text" data-validate="{required:true, remote:'ajax.php'}"/>

ajax.php要返回json的'true'表示驗證成功，不然返回提交信息。如下爲例：

echo \Zend_Json(true);
echo \Zend_Json('message');

應用於knockoutjs template

validation是jquery plugin，因此在knockoutjs template裏添加 data-mage-init='{"validation":{}}'> 不會有效，須要使用knockoutjs custom bingings方案，官方參考文檔：http://knockoutjs.com/documen...

form.js

define(
    ['ko', 'jquery', 'uiComponent', 'mage/validation'],
    function (ko, $, Component) {
        'use strict';

        ko.bindingHandlers.validation = {
            init: function(element, valueAccessor) {
                if(valueAccessor()) {
                    $(element).validation();
                }
            }
        };

        return Component.extend({
            defaults: {
                template: 'Vendor_Module/form',
                name: ''
            },
            /** Initialize observable properties */
            initObservable: function () {
                this._super()
                    .observe('name');
                return this;
            }
        });
    }
);

form.html

<form method="post" data-bind="validation: true">
    <div class="field required">
        <label class="label" for="name">
            <span>Name:</span>
        </label>

        <div class="control">
            <input id="name" type="text" class="input-text" data-validate="{required:true}" />
        </div>
    </div>

    <input type="submit" class="action primary black" value="Submit" />
</form>

提示信息位置

能夠編寫errorPlacement函數來肯定信息位置，mage有默認的errorPlacement，即input父級.addon元素的父級元素裏面顯示提示，如下爲例：

<div>
    <div class="addon">
      <input type="text" data-validate="{required:true, 'validate-custom':true}"/>
    </div>
    <!-- 將會在這裏提示 -->
</div>

要注意有沒有mixins，mage的一些mixins會重寫errorPlacement，讓以上位置失效。例如 Magento_CustomerCustomAttributes/error-placement 就會讓addon失效。

javascript觸發驗證

mage/validation 默認會捕抓form submit執行時進行表單驗證，但有些比較複雜的狀況，須要javascript自主觸發表單驗證，可用如下方式：

require([
    "jquery",
    "mage/validation"
], function($){
    var $form = $('#form-xxxx');
    $form.validation();
    if(!$form.valid()) {
        // 若是驗證失敗
    }
});

已知常見問題

• 每一個須要驗證的元素必須有name屬性，不然不會生效
• 每一個須要驗證的元素必須有獨立單一的外包圍層，而且不能與其它元素共用，不然出現的message可能沒法被隱藏並出現多行同樣的message

文檔參考

http://jqueryvalidation.org/d...