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