文章彙整

Magento 2 使用表單驗證 Form validation

Astral WebBy Astral Web 1 year agoNo Comments
首頁  /  Magento  /  Magento2 開源版  /  Magento 2 使用表單驗證 Form validation

什麼是表單驗證 ?

表單驗證,簡單來說就是針對網頁上的 <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:

requiredThis is a required field
remotePlease fix this field
emailPlease enter a valid email address
urlPlease enter a valid URL
datePlease enter a valid date
dateISOPlease enter a valid date (ISO)
numberPlease enter a valid number
digitsPlease enter only digits
creditcardPlease enter a valid credit card number
equalToPlease enter the same value again
maxlengthPlease enter no more than {0} characters.
minlengthPlease enter at least {0} characters.
rangelengthPlease enter a value between {0} and {1} characters long.
rangePlease enter a value between {0} and {1}.
maxPlease enter a value less than or equal to {0}.
minPlease enter a value greater than or equal to {0}.

Magento rules:

max-wordsPlease enter {0} words or less
min-wordsPlease enter at least {0} words
range-wordsPlease enter between {0} and {1} words
letters-with-basic-puncLetters or punctuation only please
alphanumericLetters, numbers, spaces or underscores only please
letters-onlyLetters only please
no-whitespaceNo white space please
zip-rangeYour ZIP-code must be in the range 902xx-xxxx to 905-xx-xxxx
integerA positive or negative non-decimal number please
vinUSThe specified vehicle identification number (VIN) is invalid
dateITAPlease enter a correct date
dateNLVul hier een geldige datum in
timePlease enter a valid time, between 00:00 and 23:59
time12hPlease enter a valid time, between 00:00 am and 12:00 pm
phoneUSPlease specify a valid phone number
phoneUKPlease specify a valid phone number
mobileUKPlease specify a valid mobile number
stripped-min-lengthPlease enter at least {0} characters
validate-no-utf8mb4-charactersPlease remove invalid characters: {0}
credit-card-typesPlease enter a valid credit card number
ipv4Please enter a valid IP v4 address
ipv6Please enter a valid IP v6 address
patternInvalid format
allow-container-classNamebool
validate-no-html-tagsHTML tags are not allowed
validate-selectPlease select an option
validate-no-emptyEmpty Value
validate-alphanum-with-spacesPlease use only letters (a-z or A-Z), numbers (0-9) or spaces only in this field
validate-dataPlease 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-streetPlease use only letters (a-z or A-Z), numbers (0-9), spaces and “#” in this field
validate-phoneStrictPlease enter a valid phone number. For example (123) 456-7890 or 123-456-7890
validate-phoneLaxPlease enter a valid phone number. For example (123) 456-7890 or 123-456-7890
validate-faxPlease enter a valid fax number (Ex: 123-456-7890)
validate-emailPlease enter a valid email address (Ex: [email protected])
validate-emailSenderPlease enter a valid email address (Ex: [email protected])
validate-passwordPlease enter 6 or more characters. Leading and trailing spaces will be ignored
validate-admin-passwordPlease enter 7 or more characters, using both numeric and alphabetic
validate-customer-passwordMinimum 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-urlPlease enter a valid URL. Protocol is required (http://, https:// or ftp://)
validate-clean-urlPlease enter a valid URL. For example http://www.example.com or www.example.com
validate-xml-identifierPlease enter a valid XML-identifier (Ex: something_1, block5, id-4)
validate-ssnPlease enter a valid social security number (Ex: 123-45-6789)
validate-zip-usPlease enter a valid zip code (Ex: 90602 or 90602-1234)
validate-date-auPlease use this date format: dd/mm/yyyy. For example 17/03/2006 for the 17th of March, 2006
validate-currency-dollarPlease enter a valid $ amount. For example $100.00
validate-not-negative-numberPlease enter a number 0 or greater in this field
validate-zero-or-greaterPlease enter a number 0 or greater in this field
validate-greater-than-zeroPlease enter a number greater than 0 in this field
validate-css-lengthPlease input a valid CSS-length (Ex: 100px, 77pt, 20em, .5ex or 50%)
validate-numberPlease enter a valid number in this field
required-numberPlease enter a valid number in this field
validate-number-rangeThe value is not within the specified range
validate-digitsPlease enter a valid number in this field
validate-digits-rangeThe value is not within the specified range
validate-rangeThe value is not within the specified range
validate-alphaPlease use letters only (a-z or A-Z) in this field
validate-codePlease use only letters (a-z), numbers (0-9) or underscore (_) in this field, and the first character should be a letter
validate-alphanumPlease use only letters (a-z or A-Z) or numbers (0-9) in this field. No spaces or other characters are allowed
validate-datePlease enter a valid date
validate-date-rangeMake sure the To Date is later than or the same as the From Date
validate-cpasswordPlease make sure your passwords match
validate-identifierPlease enter a valid URL Key (Ex: “example-page”, “example-page.html” or “anotherlevel/example-page”)
validate-zip-internationalPlease enter a valid zip code
validate-one-requiredPlease select one of the options above
validate-statePlease select State/Province
required-filePlease select a file
validate-ajax-errorbool
validate-optional-datetimeThe field isn’t complete
validate-required-datetimeThis is a required field
validate-one-required-by-namePlease select one of the options
less-than-equals-toPlease enter a value less than or equal to %s
greater-than-equals-toPlease enter a value greater than or equal to %s
validate-emailsPlease enter valid email addresses, separated by commas. For example, [email protected], [email protected]
validate-cc-type-selectCard type does not match credit card number
validate-cc-numberPlease enter a valid credit card number
validate-cc-typeCredit card number does not match credit card type
validate-cc-expIncorrect credit card expiration date
validate-cc-cvnPlease enter a valid credit card verification number
validate-cc-ukssPlease enter issue number or start date for switch/solo card type
validate-lengthPlease enter less or equal than %1 symbols..replace(‘%1’, length);Please enter more or equal than %1 symbols..replace(‘%1’, length)
required-entryThis is a required field
not-negative-amountPlease enter positive number in this field
validate-per-page-value-listPlease enter a valid value, ex: 10,20,30
validate-per-page-valuePlease 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-specifiedThis is a required field
required-if-all-sku-empty-and-file-not-loadedPlease enter valid SKU key
required-if-specifiedThis is a required field
required-number-if-specifiedPlease enter a valid number
datetime-validationThis is required field
required-text-swatch-entryAdmin is a required field in each row
required-visual-swatch-entryAdmin is a required field in each row
required-dropdown-attribute-entryAdmin is a required field in each row
validate-item-quantityPlease 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-namepassword-not-equal-to-user-name

 

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

 000

歐斯瑞

歐斯瑞 - 一個對網路世界充滿熱情的團隊

歐斯瑞提供免費電商知識,並協助各大類型之企業 電商諮詢建置MagentoShopify 相關的電商專案。

立即聯繫我們

推薦文章

Categories:
  Magento2 開源版MagentoMagento2 商業版前端開發網站技術與設計

留下回應

你的電子郵件地址不會被公開.