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