While Javascript form validation shouldn't be your only form of defense with regards to user input, it definitely improves the usability and efficiency of a site. It can also give your site a web 2.0 feel - which users seem to love.javascript
By default Magento uses a file called form.js (js/varien/form.js) to provide abstract Javascript functions for forms. The most useful application of this class - in my opinion - is the form validation. To achieve this validation, form.js uses the Validation class which is part of the Prototype Javascript library. It works by checking form inputs for certain class names. Each class name tells the validator to perform certain checks on the value inside the input.php
Adding Javascript validation to your own forms is extremely simple. First, you need to create a Form (form.js) object to represent your form.css
<script type="text/javascript"> //< ![CDATA[ var myForm= new VarienForm('formId', true); //]]> </script>
The first parameter, in this case formId, is the ID of your form. The second parameter defines whether or not the first input field in the form should steal the cursor focus. If set to true, the cursor will automatically be moved into the first input field and any user input will be entered into this field. You can disable this functionality by setting the second parameter to false.html
Now that you have created a Javascript object to represent your form you need to add some validation rules to your form inputs.java
<label for="name">Name *</label> <input type="text" id="name" name="name" value="" class="required-entry"/> <label for="email">Email Address *</label> <input type="text" id="email" name="email" value="" class="required-entry validate-email"/>
Notice the classes 'required-entry' and 'validate-email'? These both tell the classes to apply certain validation rules on the input fields. If any of the validation checks fail, the form will not be submitted and the user will be alerted to the errors.
For example, if you open the app/design/frontend/base/default/template/customer/form/register.phtml file and focus on the input fields and their 「class」 attributes you will see some of them named: 「required-entry」, 「validate-email」, 「validate-zip-international」, etc. All of these are tied to the Java Script validation rules defined under js/prototype/validation.js file.git
Validation.add('IsEmpty', '', function(v) { return (v == '' || (v == null) || (v.length == 0) || /^\s+$/.test(v)); // || /^\s+$/.test(v)); }); Validation.addAllThese([ ['validate-select', 'Please select an option.', function(v) { return ((v != "none") && (v != null) && (v.length != 0)); }], ['required-entry', 'This is a required field.', function(v) { return !Validation.get('IsEmpty').test(v); }], ['validate-number', 'Please enter a valid number in this field.', function(v) { return Validation.get('IsEmpty').test(v) || (!isNaN(parseNumber(v)) && !/^\s+$/.test(parseNumber(v))); }], ['validate-digits', 'Please use numbers only in this field. Please avoid spaces or other characters such as dots or commas.', function(v) { return Validation.get('IsEmpty').test(v) || !/[^\d]/.test(v); }], ['validate-digits-range', 'The value is not within the specified range.', function(v, elm) { var result = Validation.get('IsEmpty').test(v) || !/[^\d]/.test(v); var reRange = new RegExp(/^digits-range-[0-9]+-[0-9]+$/); $w(elm.className).each(function(name, index) { if (name.match(reRange) && result) { var min = parseInt(name.split('-')[2], 10); var max = parseInt(name.split('-')[3], 10); var val = parseInt(v, 10); result = (v >= min) && (v <= max); } }); return result; }], ['validate-alpha', 'Please use letters only (a-z or A-Z) in this field.', function (v) { return Validation.get('IsEmpty').test(v) || /^[a-zA-Z]+$/.test(v) }], ['validate-code', 'Please use only letters (a-z), numbers (0-9) or underscore(_) in this field, first character should be a letter.', function (v) { return Validation.get('IsEmpty').test(v) || /^[a-z]+[a-z0-9_]+$/.test(v) }], ['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.', function(v) { return Validation.get('IsEmpty').test(v) || /^[a-zA-Z0-9]+$/.test(v) /*!/\W/.test(v)*/ }], ['validate-street', 'Please use only letters (a-z or A-Z) or numbers (0-9) or spaces and # only in this field.', function(v) { return Validation.get('IsEmpty').test(v) || /^[ \w]{3,}([A-Za-z]\.)?([ \w]*\#\d+)?(\r\n| )[ \w]{3,}/.test(v) }], ['validate-phoneStrict', 'Please enter a valid phone number. For example (123) 456-7890 or 123-456-7890.', function(v) { return Validation.get('IsEmpty').test(v) || /^(\()?\d{3}(\))?(-|\s)?\d{3}(-|\s)\d{4}$/.test(v); }], ['validate-phoneLax', 'Please enter a valid phone number. For example (123) 456-7890 or 123-456-7890.', function(v) { return Validation.get('IsEmpty').test(v) || /^((\d[-. ]?)?((\(\d{3}\))|\d{3}))?[-. ]?\d{3}[-. ]?\d{4}$/.test(v); }], ['validate-fax', 'Please enter a valid fax number. For example (123) 456-7890 or 123-456-7890.', function(v) { return Validation.get('IsEmpty').test(v) || /^(\()?\d{3}(\))?(-|\s)?\d{3}(-|\s)\d{4}$/.test(v); }], ['validate-date', 'Please enter a valid date.', function(v) { var test = new Date(v); return Validation.get('IsEmpty').test(v) || !isNaN(test); }], ['validate-email', 'Please enter a valid email address. For example johndoe@domain.com.', function (v) { //return Validation.get('IsEmpty').test(v) || /\w{1,}[@][\w\-]{1,}([.]([\w\-]{1,})){1,3}$/.test(v) //return Validation.get('IsEmpty').test(v) || /^[\!\#$%\*/?|\^\{\}`~&\'\+\-=_a-z0-9][\!\#$%\*/?|\^\{\}`~&\'\+\-=_a-z0-9\.]{1,30}[\!\#$%\*/?|\^\{\}`~&\'\+\-=_a-z0-9]@([a-z0-9_-]{1,30}\.){1,5}[a-z]{2,4}$/i.test(v) return Validation.get('IsEmpty').test(v) || /^([a-z0-9,!\#\$%&'\*\+\/=\?\^_`\{\|\}~-]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z0-9,!\#\$%&'\*\+\/=\?\^_`\{\|\}~-]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*@([a-z0-9-]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z0-9-]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*\.(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]){2,})$/i.test(v) }], ['validate-emailSender', 'Please use only visible characters and spaces.', function (v) { return Validation.get('IsEmpty').test(v) || /^[\S ]+$/.test(v) }], ['validate-password', 'Please enter 6 or more characters. Leading or trailing spaces will be ignored.', function(v) { var pass=v.strip(); /*strip leading and trailing spaces*/ return !(pass.length>0 && pass.length < 6); }], ['validate-admin-password', 'Please enter 7 or more characters. Password should contain both numeric and alphabetic characters.', function(v) { var pass=v.strip(); if (0 == pass.length) { return true; } if (!(/[a-z]/i.test(v)) || !(/[0-9]/.test(v))) { return false; } return !(pass.length < 7); }], ['validate-cpassword', 'Please make sure your passwords match.', function(v) { var conf = $('confirmation') ? $('confirmation') : $$('.validate-cpassword')[0]; var pass = false; if ($('password')) { pass = $('password'); } var passwordElements = $$('.validate-password'); for (var i = 0; i < passwordElements.size(); i++) { var passwordElement = passwordElements[i]; if (passwordElement.up('form').id == conf.up('form').id) { pass = passwordElement; } } if ($$('.validate-admin-password').size()) { pass = $$('.validate-admin-password')[0]; } return (pass.value == conf.value); }], ['validate-url', 'Please enter a valid URL. Protocol is required (http://, https:// or ftp://)', function (v) { v = (v || '').replace(/^\s+/, '').replace(/\s+$/, ''); return Validation.get('IsEmpty').test(v) || /^(http|https|ftp):\/\/(([A-Z0-9]([A-Z0-9_-]*[A-Z0-9]|))(\.[A-Z0-9]([A-Z0-9_-]*[A-Z0-9]|))*)(:(\d+))?(\/[A-Z0-9~](([A-Z0-9_~-]|\.)*[A-Z0-9~]|))*\/?$/i.test(v) }], ['validate-clean-url', 'Please enter a valid URL. For example http://www.example.com or www.example.com', function (v) { return Validation.get('IsEmpty').test(v) || /^(http|https|ftp):\/\/(([A-Z0-9][A-Z0-9_-]*)(\.[A-Z0-9][A-Z0-9_-]*)+.(com|org|net|dk|at|us|tv|info|uk|co.uk|biz|se)$)(:(\d+))?\/?/i.test(v) || /^(www)((\.[A-Z0-9][A-Z0-9_-]*)+.(com|org|net|dk|at|us|tv|info|uk|co.uk|biz|se)$)(:(\d+))?\/?/i.test(v) }], ['validate-identifier', 'Please enter a valid URL Key. For example "example-page", "example-page.html" or "anotherlevel/example-page".', function (v) { return Validation.get('IsEmpty').test(v) || /^[a-z0-9][a-z0-9_\/-]+(\.[a-z0-9_-]+)?$/.test(v) }], ['validate-xml-identifier', 'Please enter a valid XML-identifier. For example something_1, block5, id-4.', function (v) { return Validation.get('IsEmpty').test(v) || /^[A-Z][A-Z0-9_\/-]*$/i.test(v) }], ['validate-ssn', 'Please enter a valid social security number. For example 123-45-6789.', function(v) { return Validation.get('IsEmpty').test(v) || /^\d{3}-?\d{2}-?\d{4}$/.test(v); }], ['validate-zip', 'Please enter a valid zip code. For example 90602 or 90602-1234.', function(v) { return Validation.get('IsEmpty').test(v) || /(^\d{5}$)|(^\d{5}-\d{4}$)/.test(v); }], ['validate-zip-international', 'Please enter a valid zip code.', function(v) { //return Validation.get('IsEmpty').test(v) || /(^[A-z0-9]{2,10}([\s]{0,1}|[\-]{0,1})[A-z0-9]{2,10}$)/.test(v); return true; }], ['validate-date-au', 'Please use this date format: dd/mm/yyyy. For example 17/03/2006 for the 17th of March, 2006.', function(v) { if(Validation.get('IsEmpty').test(v)) return true; var regex = /^(\d{2})\/(\d{2})\/(\d{4})$/; if(!regex.test(v)) return false; var d = new Date(v.replace(regex, '$2/$1/$3')); return ( parseInt(RegExp.$2, 10) == (1+d.getMonth()) ) && (parseInt(RegExp.$1, 10) == d.getDate()) && (parseInt(RegExp.$3, 10) == d.getFullYear() ); }], ['validate-currency-dollar', 'Please enter a valid $ amount. For example $100.00.', function(v) { // [$]1[##][,###]+[.##] // [$]1###+[.##] // [$]0.## // [$].## return Validation.get('IsEmpty').test(v) || /^\$?\-?([1-9]{1}[0-9]{0,2}(\,[0-9]{3})*(\.[0-9]{0,2})?|[1-9]{1}\d*(\.[0-9]{0,2})?|0(\.[0-9]{0,2})?|(\.[0-9]{1,2})?)$/.test(v) }], ['validate-one-required', 'Please select one of the above options.', function (v,elm) { var p = elm.parentNode; var options = p.getElementsByTagName('INPUT'); return $A(options).any(function(elm) { return $F(elm); }); }], ['validate-one-required-by-name', 'Please select one of the options.', function (v,elm) { var inputs = $$('input[name="' + elm.name.replace(/([\\"])/g, '\\$1') + '"]'); var error = 1; for(var i=0;i<inputs.length;i++) { if((inputs[i].type == 'checkbox' || inputs[i].type == 'radio') && inputs[i].checked == true) { error = 0; } if(Validation.isOnChange && (inputs[i].type == 'checkbox' || inputs[i].type == 'radio')) { Validation.reset(inputs[i]); } } if( error == 0 ) { return true; } else { return false; } }], ['validate-not-negative-number', 'Please enter a valid number in this field.', function(v) { v = parseNumber(v); return (!isNaN(v) && v>=0); }], ['validate-state', 'Please select State/Province.', function(v) { return (v!=0 || v == ''); }], ['validate-new-password', 'Please enter 6 or more characters. Leading or trailing spaces will be ignored.', function(v) { if (!Validation.get('validate-password').test(v)) return false; if (Validation.get('IsEmpty').test(v) && v != '') return false; return true; }], ['validate-greater-than-zero', 'Please enter a number greater than 0 in this field.', function(v) { if(v.length) return parseFloat(v) > 0; else return true; }], ['validate-zero-or-greater', 'Please enter a number 0 or greater in this field.', function(v) { if(v.length) return parseFloat(v) >= 0; else return true; }], ['validate-cc-number', 'Please enter a valid credit card number.', function(v, elm) { // remove non-numerics var ccTypeContainer = $(elm.id.substr(0,elm.id.indexOf('_cc_number')) + '_cc_type'); if (ccTypeContainer && typeof Validation.creditCartTypes.get(ccTypeContainer.value) != 'undefined' && Validation.creditCartTypes.get(ccTypeContainer.value)[2] == false) { if (!Validation.get('IsEmpty').test(v) && Validation.get('validate-digits').test(v)) { return true; } else { return false; } } return validateCreditCard(v); }], ['validate-cc-type', 'Credit card number does not match credit card type.', function(v, elm) { // remove credit card number delimiters such as "-" and space elm.value = removeDelimiters(elm.value); v = removeDelimiters(v); var ccTypeContainer = $(elm.id.substr(0,elm.id.indexOf('_cc_number')) + '_cc_type'); if (!ccTypeContainer) { return true; } var ccType = ccTypeContainer.value; if (typeof Validation.creditCartTypes.get(ccType) == 'undefined') { return false; } // Other card type or switch or solo card if (Validation.creditCartTypes.get(ccType)[0]==false) { return true; } // Matched credit card type var ccMatchedType = ''; Validation.creditCartTypes.each(function (pair) { if (pair.value[0] && v.match(pair.value[0])) { ccMatchedType = pair.key; throw $break; } }); if(ccMatchedType != ccType) { return false; } if (ccTypeContainer.hasClassName('validation-failed') && Validation.isOnChange) { Validation.validate(ccTypeContainer); } return true; }], ['validate-cc-type-select', 'Card type does not match credit card number.', function(v, elm) { var ccNumberContainer = $(elm.id.substr(0,elm.id.indexOf('_cc_type')) + '_cc_number'); if (Validation.isOnChange && Validation.get('IsEmpty').test(ccNumberContainer.value)) { return true; } if (Validation.get('validate-cc-type').test(ccNumberContainer.value, ccNumberContainer)) { Validation.validate(ccNumberContainer); } return Validation.get('validate-cc-type').test(ccNumberContainer.value, ccNumberContainer); }], ['validate-cc-exp', 'Incorrect credit card expiration date.', function(v, elm) { var ccExpMonth = v; var ccExpYear = $(elm.id.substr(0,elm.id.indexOf('_expiration')) + '_expiration_yr').value; var currentTime = new Date(); var currentMonth = currentTime.getMonth() + 1; var currentYear = currentTime.getFullYear(); if (ccExpMonth < currentMonth && ccExpYear == currentYear) { return false; } return true; }], ['validate-cc-cvn', 'Please enter a valid credit card verification number.', function(v, elm) { var ccTypeContainer = $(elm.id.substr(0,elm.id.indexOf('_cc_cid')) + '_cc_type'); if (!ccTypeContainer) { return true; } var ccType = ccTypeContainer.value; if (typeof Validation.creditCartTypes.get(ccType) == 'undefined') { return false; } var re = Validation.creditCartTypes.get(ccType)[1]; if (v.match(re)) { return true; } return false; }], ['validate-ajax', '', function(v, elm) { return true; }], ['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.', function (v) { if(v != '' && v) { return /^[A-Za-z]+[A-Za-z0-9_]+$/.test(v); } return true; }], ['validate-css-length', 'Please input a valid CSS-length. For example 100px or 77pt or 20em or .5ex or 50%.', function (v) { if (v != '' && v) { return /^[0-9\.]+(px|pt|em|ex|%)?$/.test(v) && (!(/\..*\./.test(v))) && !(/\.$/.test(v)); } return true; }], ['validate-length', 'Text length does not satisfy specified text range.', function (v, elm) { var reMax = new RegExp(/^maximum-length-[0-9]+$/); var reMin = new RegExp(/^minimum-length-[0-9]+$/); var result = true; $w(elm.className).each(function(name, index) { if (name.match(reMax) && result) { var length = name.split('-')[2]; result = (v.length <= length); } if (name.match(reMin) && result && !Validation.get('IsEmpty').test(v)) { var length = name.split('-')[2]; result = (v.length >= length); } }); return result; }], ['validate-percents', 'Please enter a number lower than 100.', {max:100}], ['required-file', 'Please select a file', function(v, elm) { var result = !Validation.get('IsEmpty').test(v); if (result === false) { ovId = elm.id + '_value'; if ($(ovId)) { result = !Validation.get('IsEmpty').test($(ovId).value); } } return result; }], ['validate-cc-ukss', 'Please enter issue number or start date for switch/solo card type.', function(v,elm) { var endposition; if (elm.id.match(/(.)+_cc_issue$/)) { endposition = elm.id.indexOf('_cc_issue'); } else if (elm.id.match(/(.)+_start_month$/)) { endposition = elm.id.indexOf('_start_month'); } else { endposition = elm.id.indexOf('_start_year'); } var prefix = elm.id.substr(0,endposition); var ccTypeContainer = $(prefix + '_cc_type'); if (!ccTypeContainer) { return true; } var ccType = ccTypeContainer.value; if(['SS','SM','SO'].indexOf(ccType) == -1){ return true; } $(prefix + '_cc_issue').advaiceContainer = $(prefix + '_start_month').advaiceContainer = $(prefix + '_start_year').advaiceContainer = $(prefix + '_cc_type_ss_div').down('ul li.adv-container'); var ccIssue = $(prefix + '_cc_issue').value; var ccSMonth = $(prefix + '_start_month').value; var ccSYear = $(prefix + '_start_year').value; var ccStartDatePresent = (ccSMonth && ccSYear) ? true : false; if (!ccStartDatePresent && !ccIssue){ return false; } return true; }] ]);
There are many more validation classes you can assign and I list them here as a reference. For more information on this please use Google, experiment with the code or contact me via my email or the contact form.web
Please select an optionajax
This is a required fieldapp
Please enter a valid number in this fieldfrontend
Please use numbers only in this field. please avoid spaces or other characters such as dots or commas
Please use letters only (a-z or A-Z) in this field.
Please use only letters (a-z), numbers (0-9) or underscore(_) in this field, first character should be a letter.
Please use only letters (a-z or A-Z) or numbers (0-9) only in this field. No spaces or other characters are allowed
Please use only letters (a-z or A-Z) or numbers (0-9) or spaces and # only in this field
Please enter a valid phone number. For example (123) 456-7890 or 123-456-7890
Please enter a valid phone number. For example (123) 456-7890 or 123-456-7890
Please enter a valid fax number. For example (123) 456-7890 or 123-456-7890
Please enter a valid date
Please enter a valid email address. For example johndoe@domain.com.
Please use only letters (a-z or A-Z), numbers (0-9) , underscore(_) or spaces in this field.
Please enter 6 or more characters. Leading or trailing spaces will be ignored
Please enter 7 or more characters. Password should contain both numeric and alphabetic characters
Please make sure your passwords match
Please enter a valid URL. http:// is required
Please enter a valid URL. For example http://www.example.com or www.example.com
Please enter a valid Identifier. For example example-page, example-page.html or anotherlevel/example-page
Please enter a valid XML-identifier. For example something_1, block5, id-4
Please enter a valid social security number. For example 123-45-6789
Please enter a valid zip code. For example 90602 or 90602-1234
Please enter a valid zip code
Please use this date format: dd/mm/yyyy. For example 17/03/2006 for the 17th of March, 2006
Please enter a valid $ amount. For example $100.00
Please select one of the above options.
Please select one of the options.
Please enter a valid number in this field
Please select State/Province
Please enter 6 or more characters. Leading or trailing spaces will be ignored
Please enter a number greater than 0 in this field
Please enter a number 0 or greater in this field
Please enter a valid credit card number.
Credit card number doesn't match credit card type
Card type doesn't match credit card number
Incorrect credit card expiration date
Please enter a valid credit card verification number.
Please use only letters (a-z or A-Z), numbers (0-9) or underscore(_) in this field, first character should be a letter.
Please input a valid CSS-length. For example 100px or 77pt or 20em or .5ex or 50%
Maximum length exceeded
示例一:如何控制輸入值的長度
經過查找到 /app/code/local/Amasty/Orderattr/Block/Adminhtml/Order/Attribute/Edit/Tab/Main.php
$fieldset->addField('frontend_class', 'select', array( 'name' => 'frontend_class', 'label' => Mage::helper('catalog')->__('Input Validation'), 'title' => Mage::helper('catalog')->__('Input Validation'), 'values'=> array( array( 'value' => '', 'label' => Mage::helper('catalog')->__('None') ), array( 'value' => 'validate-number', 'label' => Mage::helper('catalog')->__('Decimal Number') ), array( 'value' => 'validate-digits', 'label' => Mage::helper('catalog')->__('Integer Number') ), array( 'value' => 'validate-email', 'label' => Mage::helper('catalog')->__('Email') ), array( 'value' => 'validate-url', 'label' => Mage::helper('catalog')->__('Url') ), array( 'value' => 'validate-alpha', 'label' => Mage::helper('catalog')->__('Letters') ), array( 'value' => 'validate-alphanum', 'label' => Mage::helper('catalog')->__('Letters(a-zA-Z) or Numbers(0-9)') ), /** * Added my own here: */ array( 'value' => 'validate-length minimum-length-0 maximum-length-5', 'label' => Mage::helper('catalog')->__('Length - Max 5') ), ) ));
發現驗證長度的樣式寫法爲
validate-length minimum-length-0 maximum-length-5