什麼是表單驗證 ?

表單驗證，簡單來說就是針對網頁上的 <Form> 進行檢查格式的動作，今天主要是介紹怎麼樣在Magento 2 Form 加上 Validation，並且進一步的客製化 Validation Rule。

新增 Form validation

Step 1.  在需要的模組中創建 requirejs-config.js

路徑：app/code/CustomVendor/CustomModule/view/frontend/

var config = {
   map: {
       "*": {
           customMethod:CustomVendor_CustomModule/js/validationRule"
       }
   }
};

Step 2. 新增 validationRule.js

路徑：app/code/CustomVendor/CustomModule/view/frontend/web/js/

define([
    'jquery',
    'jquery/ui',
    'jquery/validate',
    'mage/translate'
    ], function($){
        'use strict';
        return function() {
            $.validator.addMethod(
                "custom-validation-rule",
                function(value, element) {
                    //Perform your operation here and return the result true/false.
                    return true/false;
                },
                $.mage.__("Your validation message.")
            );
    }
});

Step 3.  將下面的程式碼放入 .phtml 中

<script type="text/x-magento-init">
   {
       "*": {
           "customMethod": {}
       }
   }
</script>

Step 4.  將新的 validation rule 置入需要驗證的 form field

data-validate="{required:true, 'custom-validation-rule':true}"

依照上述步驟後，新的表單驗證就完成了！Magento 2 本身也提供非常多的表單驗證方法，以下我們整理成一張表供大家參考。

Validation Classes 列表

jQuery rules:

required	This is a required field
remote	Please fix this field
email	Please enter a valid email address
url	Please enter a valid URL
date	Please enter a valid date
dateISO	Please enter a valid date (ISO)
number	Please enter a valid number
digits	Please enter only digits
creditcard	Please enter a valid credit card number
equalTo	Please enter the same value again
maxlength	Please enter no more than {0} characters.
minlength	Please enter at least {0} characters.
rangelength	Please enter a value between {0} and {1} characters long.
range	Please enter a value between {0} and {1}.
max	Please enter a value less than or equal to {0}.
min	Please enter a value greater than or equal to {0}.

Magento rules:

max-words	Please enter {0} words or less
min-words	Please enter at least {0} words
range-words	Please enter between {0} and {1} words
letters-with-basic-punc	Letters or punctuation only please
alphanumeric	Letters, numbers, spaces or underscores only please
letters-only	Letters only please
no-whitespace	No white space please
zip-range	Your ZIP-code must be in the range 902xx-xxxx to 905-xx-xxxx
integer	A positive or negative non-decimal number please
vinUS	The specified vehicle identification number (VIN) is invalid
dateITA	Please enter a correct date
dateNL	Vul hier een geldige datum in
time	Please enter a valid time, between 00:00 and 23:59
time12h	Please enter a valid time, between 00:00 am and 12:00 pm
phoneUS	Please specify a valid phone number
phoneUK	Please specify a valid phone number
mobileUK	Please specify a valid mobile number
stripped-min-length	Please enter at least {0} characters
validate-no-utf8mb4-characters	Please remove invalid characters: {0}
credit-card-types	Please enter a valid credit card number
ipv4	Please enter a valid IP v4 address
ipv6	Please enter a valid IP v6 address
pattern	Invalid format
allow-container-className	bool
validate-no-html-tags	HTML tags are not allowed
validate-select	Please select an option
validate-no-empty	Empty Value
validate-alphanum-with-spaces	Please use only letters (a-z or A-Z), numbers (0-9) or spaces only in this field
validate-data	Please use only letters (a-z or A-Z), numbers (0-9) or underscore (_) in this field, and the first character should be a letter
validate-street	Please use only letters (a-z or A-Z), numbers (0-9), spaces and “#” in this field
validate-phoneStrict	Please enter a valid phone number. For example (123) 456-7890 or 123-456-7890
validate-phoneLax	Please enter a valid phone number. For example (123) 456-7890 or 123-456-7890
validate-fax	Please enter a valid fax number (Ex: 123-456-7890)
validate-email	Please enter a valid email address (Ex: [email protected])
validate-emailSender	Please enter a valid email address (Ex: [email protected])
validate-password	Please enter 6 or more characters. Leading and trailing spaces will be ignored
validate-admin-password	Please enter 7 or more characters, using both numeric and alphabetic
validate-customer-password	Minimum length of this field must be equal or greater than %1 symbols. Leading and trailing spaces will be ignored.Minimum of different classes of characters in password is %1. Classes of characters: Lower Case, Upper Case, Digits, Special Characters
validate-url	Please enter a valid URL. Protocol is required (http://, https:// or ftp://)
validate-clean-url	Please enter a valid URL. For example http://www.example.com or www.example.com
validate-xml-identifier	Please enter a valid XML-identifier (Ex: something_1, block5, id-4)
validate-ssn	Please enter a valid social security number (Ex: 123-45-6789)
validate-zip-us	Please enter a valid zip code (Ex: 90602 or 90602-1234)
validate-date-au	Please use this date format: dd/mm/yyyy. For example 17/03/2006 for the 17th of March, 2006
validate-currency-dollar	Please enter a valid $ amount. For example $100.00
validate-not-negative-number	Please enter a number 0 or greater in this field
validate-zero-or-greater	Please enter a number 0 or greater in this field
validate-greater-than-zero	Please enter a number greater than 0 in this field
validate-css-length	Please input a valid CSS-length (Ex: 100px, 77pt, 20em, .5ex or 50%)
validate-number	Please enter a valid number in this field
required-number	Please enter a valid number in this field
validate-number-range	The value is not within the specified range
validate-digits	Please enter a valid number in this field
validate-digits-range	The value is not within the specified range
validate-range	The value is not within the specified range
validate-alpha	Please use letters only (a-z or A-Z) in this field
validate-code	Please use only letters (a-z), numbers (0-9) or underscore (_) in this field, and the first character should be a letter
validate-alphanum	Please use only letters (a-z or A-Z) or numbers (0-9) in this field. No spaces or other characters are allowed
validate-date	Please enter a valid date
validate-date-range	Make sure the To Date is later than or the same as the From Date
validate-cpassword	Please make sure your passwords match
validate-identifier	Please enter a valid URL Key (Ex: “example-page”, “example-page.html” or “anotherlevel/example-page”)
validate-zip-international	Please enter a valid zip code
validate-one-required	Please select one of the options above
validate-state	Please select State/Province
required-file	Please select a file
validate-ajax-error	bool
validate-optional-datetime	The field isn’t complete
validate-required-datetime	This is a required field
validate-one-required-by-name	Please select one of the options
less-than-equals-to	Please enter a value less than or equal to %s
greater-than-equals-to	Please enter a value greater than or equal to %s
validate-emails	Please enter valid email addresses, separated by commas. For example, [email protected], [email protected]
validate-cc-type-select	Card type does not match credit card number
validate-cc-number	Please enter a valid credit card number
validate-cc-type	Credit card number does not match credit card type
validate-cc-exp	Incorrect credit card expiration date
validate-cc-cvn	Please enter a valid credit card verification number
validate-cc-ukss	Please enter issue number or start date for switch/solo card type
validate-length	Please enter less or equal than %1 symbols..replace(‘%1’, length);Please enter more or equal than %1 symbols..replace(‘%1’, length)
required-entry	This is a required field
not-negative-amount	Please enter positive number in this field
validate-per-page-value-list	Please enter a valid value, ex: 10,20,30
validate-per-page-value	Please enter a valid value from list
validate-new-password	Please enter 6 or more characters. Leading and trailing spaces will be ignored
required-if-not-specified	This is a required field
required-if-all-sku-empty-and-file-not-loaded	Please enter valid SKU key
required-if-specified	This is a required field
required-number-if-specified	Please enter a valid number
datetime-validation	This is required field
required-text-swatch-entry	Admin is a required field in each row
required-visual-swatch-entry	Admin is a required field in each row
required-dropdown-attribute-entry	Admin is a required field in each row
validate-item-quantity	Please enter a quantity greater than 0;The fewest you may purchase is %1; The maximum you may purchase is %1; You can buy this product only in quantities of %1 at a time
password-not-equal-to-user-name	password-not-equal-to-user-name

 

以上就是本次的分享。喜歡歐斯瑞文章的讀者們，記得追蹤我們的粉絲專頁、Instagram，以及訂閱我們的電子報，就不會錯過最新文章囉！