Magento 2 frontend create a new validation rule 新建前端認證規則

Magento 2 如何新建一個VALIDATION RULE

比如輸入框中 手機號驗證

 

新建模塊  

pestle generate_module Mageplaza HelloWorld 0.0.1
pestle generate_route Mageplaza_HelloWorld frontend helloworld
pestle  generate_view Mageplaza_HelloWorld frontend helloworld_index_index Main content.phtml

通過URL $DOMAIN/helloworld 進行訪問

app/code/Mageplaza/HelloWorld

1. 新建 view/frontend/requirejs-config.js 

var config = {
    map: {
        "*": {
            telephoneCheckRule: "Mageplaza_HelloWorld/js/telephoneCheckRule"
        }
    }
};

2. 在 view/frontend/templates/content.phtml 裏面添加內容

<form class="form contact"
      action="<?php /* @escapeNotVerified */ echo $block->getFormAction(); ?>"
      id="contact-form"
      method="post"
      data-hasrequired="<?php /* @escapeNotVerified */ echo __('* Required Fields') ?>"
      data-mage-init='{
   "validation":{},
    "telephoneCheckRule":{}
}'>


    <!-- form content -->

    <div class="field name required">
        <label class="label" for="field5"><span>Field 5 (inchoo)</span></label>
        <div class="control">
            <input name="field5" id="field5" title="Field 5" value="" class="input-text required telephonecheck" type="text"/>
        </div>
    </div>

    <!-- form content -->

<input type="submit" name="submit" value="submit">
</form>

3. 新建 view/frontend/web/js/telephoneCheckRule.js

define([
    'jquery',
    'jquery/ui',
    'jquery/validate',
    'mage/translate'
], function($){
    'use strict';

    return function() {
        $.validator.addMethod(
            "inchoo",
            function(value, element) {
                return this.optional(element) || /^Inchoo/.test(value);
            },
            $.mage.__("Type 'Inchoo' in this field")
        );
    }
});

代碼

https://github.com/davissuperman/Magento2Module/tree/master/Mageplaza/HelloWorld