文章彙整

Magento1 表單驗證介紹

By Astral Web 9 months agoNo Comments
首頁  /  Magento  /  Magento開發  /  Magento1 表單驗證介紹

Magento 是用 Prototype JavaScript 去做表單驗證的,原生設計的驗證方式就非常的豐富和多樣,但在開發上一定還是會遇到特別驗證表單規則,也保留了客製化的空間讓開發者自己添加,筆者認為Magento表單驗證算是非常好用和簡單呢。

 

現有的Magento表單驗證方法你可以在js/prototype/validation.js裡的414行開始看到目前的class id對應的error message和驗證規則程式碼,筆者有找到已經整理好的清單。

 

'validate-no-html-tags'         => 'HTML tags are not allowed'
'validate-select'               => 'Please select an option.'
'required-entry'                => 'This is a required field.'
'validate-number'               => 'Please enter a valid number in this field.'
'validate-number-range'         => 'The value is not within the specified range.'
'validate-digits'               => 'Please use numbers only in this field. Please avoid spaces or other characters such as dots or commas.'
'validate-digits-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, first character should be a letter.'
'validate-alphanum'             => 'Please use only letters (a-z or A-Z) or numbers (0-9) only in this field. No spaces or other characters are allowed.'
'validate-alphanum-with-spaces' => 'Please use only letters (a-z or A-Z), numbers (0-9) or spaces only in this field.'
'validate-street'               => 'Please use only letters (a-z or A-Z) or numbers (0-9) or spaces and # only 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. For example (123) 456-7890 or 123-456-7890.'
'validate-date'                 => 'Please enter a valid date.'
'validate-date-range'           => 'The From Date value should be less than or equal to the To Date value.'
'validate-email'                => 'Please enter a valid email address. For example johndoe@domain.com.'
'validate-emailSender'          => 'Please use only visible characters and spaces.'
'validate-password'             => 'Please enter 6 or more characters. Leading or trailing spaces will be ignored.'
'validate-admin-password'       => 'Please enter 7 or more characters. Password should contain both numeric and alphabetic characters.'
'validate-both-passwords'       => 'Please make sure your passwords match.'
'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-identifier'           => 'Please enter a valid URL Key. For example "example-page", "example-page.html" or "anotherlevel/example-page".'
'validate-xml-identifier'       => 'Please enter a valid XML-identifier. For example something_1, block5, id-4.'
'validate-ssn'                  => 'Please enter a valid social security number. For example 123-45-6789.'
'validate-zip'                  => 'Please enter a valid zip code. For example 90602 or 90602-1234.'
'validate-zip-international'    => 'Please enter a valid zip code.'
'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-one-required'         => 'Please select one of the above options.'
'validate-one-required-by-name' => 'Please select one of the options.'
'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-state'                => 'Please select State/Province.'
'validate-new-password'         => 'Please enter 6 or more characters. Leading or trailing spaces will be ignored.'
'validate-cc-number'            => 'Please enter a valid credit card number.'
'validate-cc-type'              => 'Credit card number does not match credit card type.'
'validate-cc-type-select'       => 'Card type does not match credit card number.'
'validate-cc-exp'               => 'Incorrect credit card expiration date.'
'validate-cc-cvn'               => 'Please enter a valid credit card verification number.'
'validate-ajax'                 => ''
'validate-data'                 => 'Please use only letters (a-z or A-Z), numbers (0-9) or underscore(_) in this field, first character should be a letter.'
'validate-css-length'           => 'Please input a valid CSS-length. For example 100px or 77pt or 20em or .5ex or 50%.'
'validate-length'               => 'Text length does not satisfy specified text range.'
'validate-percents'             => 'Please enter a number lower than 100.'
'validate-cc-ukss'              => 'Please enter issue number or start date for switch/solo card type.'

 

有些光看class id 和error message就大概知道是驗證什麼,有些看出不來的請能請各位讀者試試看了。

 

至於該如何使用呢,非常的簡單,只要記得把Form表ID傳給VarienForm(),在將要驗證的欄位填入驗證的class ID,一個欄位可以填入多個驗證class ID,也就要滿足多個驗證條件,以下是sample code

 

<form name="sample_form" id="sample_form" action="" method="post">
   <label for="firstname"><?php echo $this->__('name’) ?><input id="firstname" name="firstname" class="input-text required-entry" />

<label for="firstname"><?php echo $this->__('age’) ?><input id="firstname" name="firstname" class="input-text required-entry validate-number" />

    <input type="submit" name="submit" value="<?php echo $this-/>__('Submit') ?>" />
</form>
<script type="text/javascript">
   //< ![CDATA[
       var customForm = new VarienForm('sample_form');
   //]]>
</script>

 

如果是用PHP Varien_Data_Form()建立表單,一樣把驗證class ID塞入class屬性就可以了,範例如下

 

$form = new Varien_Data_Form();

$this->setForm($form);

$fieldset->addField('travel_days', 'text', array(

           'label' => Mage::helper('coupon')->__('天數'),

           'name' => 'travel_days',

           'class' => 'required-entry digits-range-2-180'

));

 

接下介紹客製化的方式,就是必須先建立javascript檔案,再依照Validation.add功能去增加新的驗證規則,最後記得在頁面把客製化驗證js檔載入就可以了,範例如下

js/my_custom.js

 

Validation.add('class 名稱', 'error message', function() {

if('驗證條件通過') {

return true;

}else{

return false;

}

});

 

導入js檔的xml code

 

<default>
   <reference name="head">
       <action method="addJs"><script>my_custom.js</script></action>
   </reference>
</default>

想了解更多Magento請見Magento教學導覽

參考資料

http://inchoo.net/magento/out-of-the-box-form-validation-in-magento/

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Category:
  Magento開發

留下回應

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

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

每月發送電商戰略指南,只要填寫E-mail即可訂閱!

請到您的信箱確認,即可完成訂閱。