合理使用Magento自带的表单验证功能

Magento2以前使用Prototype库来实现表单验证功能。这让我们可以轻松的使用自带的js库来实现表单字段验证，在编辑自定义表单时如果需要对一个字段进行验证，我们要做的就是给该字段分配一个“有效”的类名，并将表单id传递给VarienForm对象。

我们首先一起来看下Magento常用的一些验证示例：

<form name="test-form" id="my-custom-form" action="" method="post">
    <label for="firstname"><?php echo $this->__('First name') ?> <span class="required">*</span></label><br />
    <input id="firstname" name="firstname" class="input-text required-entry" />
    <label for="lastname"><?php echo $this->__('Last name') ?> <span class="required">*</span></label><br />
    <input id="lastname" name="lastname" class="input-text required-entry" />
    <label for="useremail"><?php echo $this->__('Email') ?> <span class="required">*</span></label><br />
    <input type="text" name="useremail" id="useremail" class="input-text required-entry validate-email" />
    <input type="submit" name="submit" value="<?php echo $this-/>__('Submit') ?>" />
</form>
<script type="text/javascript">
    //< ![CDATA[
    var customForm = new VarienForm('my-custom-form');
    //]]>
</script>

我抽时间检索了一下Magento可用的一些验证规则和错误提示信息。你也可以自己去 js/prototype/validation.js 文件中查找，位置大概在 第414行。

'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.'

如果你想添加自定义验证规则，只需在Magento项目根目录下的js文件夹中创建一个您想要的javascript文件。 我将在下面说明如何实现这个步骤。
假如要重写现有的验证规则，那就创建一个同名的方法，并在原始方法之后加载它。 这样，当系统调用这个方法的时候将被重定向到新声明的方法而不是原始的。如果你采用这种重写规则，使用的时候需要小心，因为javascript只是客户端验证。 提交数据到服务器后，服务器也会按照规则对提交的数据进行验证，所以即使网站前台输入的值是按照你想要的方式输入，也可能导致一些错误。
所以，在规则写好后，一定要测试你的验证规则。
按照之前说的，我们来覆盖Magento的validate-email方法。 比如我们希望网站只接受以@magease.com结尾的电子邮件地址。
我们创建一个新的javascript文件并将其放在Magento项目根目录下的js文件夹中。

js/me-validation.js

    Validation.add('validate-email', 'Please enter a valid Magease address. For example david@magease.com.', function (v) {
        return Validation.get('IsEmpty').test(v) || /^([a-zA-Z0-9]+[a-zA-Z0-9._%-]*@magease\.com)$/i.test(v)
    })

现在需要做的就是在布局文件中使用Magento的addJs方法将我们写的js脚本导入系统。使用addJs方法将javascript文件添加到我们网站的头部。

<default>
 <reference name="head">
 <action method="addJs"><script>me-validation.js</script></action>
 </reference>
</default>

您可以从任何布局文件（最好是该js所属模块的布局文件）中完成此操作，Magento在默认在app/design/frontend/base/default/layout/page.xml中导入这些文件。