跨境电商
经验交流分享

Magento表单验证(一):客户端Prototype验证

在开发Magento产品问答插件(Ruiwant_Consult)的过程中需要处理用户输入的内容,在该插件中,需要用户填写的内容包含邮件、电话、邮编。等。WEB开发中有个很重要的原则,就是永远不要相信用户提交的内容。这个说的有些严重,但是不无道理。太多的机器人让网络已经脏乱不堪。所以我们需要对用户输入的内容进行验证,来确保所填写的信息是我们所需要的。

表单验证一般分为两个部分,一是客户端验证,即通过JS来识别用户输入内容是否符合要求。二是服务器端验证,在用户提交表单之后,我们需要对客户提交的信息再次进行验证。双保险对于非恶意的用户信息填写来说就足够用了。本文是Magento表单验证的第一篇,主要介绍下通过Prototype来对客户输入进行验证。Magento团队编写了一个非常好用的类form.js (js/varien/form.js) ,让客户端表单验证变得相当容易。

首先,在一个id值为ruiwant的表单中,添加如下JS代码。

[html]
<form id="ruiwant"  method="post" action="consult/question/submit">

</form>
[/html]
[javascript]
<script type="text/javascript">
//< ![CDATA[
var ruiwantForm= new VarienForm(‘ruiwant’, true);
//]]>
</script>
[/javascript]

通过如上方式,我们就生成了一个新的VarienForm对象。通过在需要进行验证的表单元素上添加相应的class值,即可完成表单验证功能。在class中写required-entry,则该字段就必须为填写的字段,而validate-email代表的意思是该表单填写的值必须为email地址,否则无法通过验证。

[html]
<label for="name">Name *</label>
<input type="text" id="name" name="name" class="required-entry"/>
<label for="email">Email *</label>
<input type="text" id="email" name="email" class="required-entry validate-email"/>
[/html]

添加了如上方式进行表单验证的表单,当用户填写出现错误的时候,就会出现如下样式的提示信息。以下截图来自Magento的默认登录页面。

magento客户端表单验证

magento客户端表单验证

更多的验证类型如下,更为详细的信息,可以在上面提到的form.js文件中找到。

validate-select
Please select an option
required-entry
This is a required field
validate-number
Please enter a valid number in this field
validate-digits
Please use numbers only in this field. please avoid spaces or other characters such as dots or commas
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-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-email
Please enter a valid email address. For example johndoe@domain.com.
validate-emailSender
Please use only letters (a-z or A-Z), numbers (0-9) , underscore(_) or spaces in this field.
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-cpassword
Please make sure your passwords match
validate-url
Please enter a valid URL. http:// is required
validate-clean-url
Please enter a valid URL. For example http://www.example.com or www.example.com
validate-identifier
Please enter a valid Identifier. 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 valid number 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-greater-than-zero
Please enter a number greater than 0 in this field
validate-zero-or-greater
Please enter a number 0 or greater in this field
validate-cc-number
Please enter a valid credit card number.
validate-cc-type
Credit card number doesn’t match credit card type
validate-cc-type-select
Card type doesn’t match credit card number
validate-cc-exp
Incorrect credit card expiration date
validate-cc-cvn
Please enter a valid credit card verification number.
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
Maximum length exceeded

赞(0)
未经允许不得转载:锐想 » Magento表单验证(一):客户端Prototype验证
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

锐想电商 - 跨境电商经验交流分享

锐想无限