由 searchadmin 于 周二, 10/16/2007 - 06:44 提交。
真正簡單的基于prototype的表單驗(yàn)證
tag:prototype 數(shù)據(jù)驗(yàn)證 表單驗(yàn)證 validator js javascript
Really easy field validation
官方地址：http://tetlaw.id.au/view/javascript/really-easy-field-validation
Here's a form validation script that is very easy to use.
Current Version: 1.5.4.1 - 06 Jan 2007 - Demo / Download

真正簡單的表單驗(yàn)證
在這里我們提供一個(gè)使表單驗(yàn)證不再頭疼的一個(gè)驗(yàn)證腳本
當(dāng)前版本：1.5.4.1-06 Jan 2007 - 演示/下載

Instructions

The basic method is to attach to the form's onsubmit event, read out all the form elements' classes and perform validation if required. If a field fails validation, reveal field validation advice and prevent the form from submitting.

Include the javascript libraries:

用法說明:
使用的基本方法是綁定到表單的onsubmit事件，從所有表單項(xiàng)的class中讀取相應(yīng)的規(guī)則并且做驗(yàn)證，如果表單中的某一項(xiàng)驗(yàn)證失敗，將會(huì)顯示我們自定義的幫助信息并且阻止表單提交。
網(wǎng)頁包含兩個(gè)javascript的腳本庫：





You write elements like this:
你可以按照下面的html格式書寫你的表單：



passing the validation requirements in the class attribute.

You then activate validation by passing the form or form's id attribute like this:

通過在表單項(xiàng)的class屬性中添加requirements驗(yàn)證，我們就可以像下面這樣通過指定表單的id來激活驗(yàn)證：



new Validation('form-id'); // OR new Validation(document.forms[0]);


It has a number of tests built-in but is extensible to include your custom validation checks.
The validator also avoids validating fields that are hidden or children of elements hidden by the CSS property display:none. This way you can give a field the class of 'required' but it's only validated if it is visible on the form. The demo illustrates what I am talking about

有很多內(nèi)置的表單驗(yàn)證項(xiàng)并且我們可以對(duì)客戶端的驗(yàn)證進(jìn)行擴(kuò)展，該驗(yàn)證應(yīng)盡量避免被設(shè)置為hidden的表單項(xiàng)和被添加在display被設(shè)為none層中的表單。這種方式你可以設(shè)置一個(gè)表單的class為'required'，但是他盡在表單上可視的元素起作用。演示文檔說明了這一點(diǎn)。


Options

Here's the list of classes available to add to your field elements:
選項(xiàng):
這里給出了表單驗(yàn)證器內(nèi)置的驗(yàn)證規(guī)則
* required (not blank)
--表單項(xiàng)不能為空
* validate-number (a valid number)
--驗(yàn)證數(shù)字
* validate-digits (digits only)
--驗(yàn)證兩位數(shù)
* validate-alpha (letters only)
--驗(yàn)證字母
* validate-alphanum (only letters and numbers)
--驗(yàn)證字母或數(shù)字
* validate-date (a valid date value)
--驗(yàn)證日期
* validate-email (a valid email address)
--驗(yàn)證email郵件地址
* validate-url (a valid URL)
--驗(yàn)證網(wǎng)址格式
* validate-date-au (a date formatted as; dd/mm/yyyy)
--驗(yàn)證dd/mm/yyyy格式的日期
* validate-currency-dollar (a valid dollar value)
* validate-selection (first option e.g. 'Select one...' is not selected option)
* validate-one-required (At least one textbox/radio element must be selected in a group - see below*)
*To use the validate-one-required validator you must first add the class name to only one checkbox/radio button in the group (last one is probably best) and then place all the input elements within a parent element, for example a div element. That way the library can find all the checkboxes/radio buttons to check and place the validation advice element at the bottom of the parent element to make it appear after the group of checkboxes/radio buttons.

使用validate-one-required驗(yàn)證規(guī)則，你必須首先添加class項(xiàng)到單選按鈕或者多選框組中的一個(gè)(建議在最后一個(gè)添加)然后在父級(jí)元素中放置其他的input元素，比如一個(gè)層元素。這樣我們的驗(yàn)證庫可以找到所有需要驗(yàn)證的多選框和單選按鈕對(duì)其驗(yàn)證并且在容器的底部表單項(xiàng)的后面顯示出錯(cuò)幫助。

When the validation object is initialised you can pass the option {stopOnFirst : true} to enable the stop on first validation failure behaiour. The demo above has this set to false which is the default. If set to true only the first validation failure advice will be displayed when the form is submitted instead of all at once.

當(dāng)驗(yàn)證對(duì)象初始化實(shí)例的時(shí)候你可以通過設(shè)置選項(xiàng){stopOnFirst:true}來使第一個(gè)驗(yàn)證出錯(cuò)的時(shí)候就不再驗(yàn)證后面的選項(xiàng)。上面的演示設(shè)置了默認(rèn)選項(xiàng)false。如果設(shè)置為true。那么出錯(cuò)的時(shí)候?qū)⒅伙@示第一個(gè)出錯(cuò)的信息而不是所有的出錯(cuò)提示。


new Validation('form-id',{stopOnFirst:true});

You can also pass the option {immediate : true} to enable field valiation when leaving each field. That is on the onblur event for all the form elements.

同樣你可以設(shè)置選項(xiàng){immediate : true}來使在每一表單項(xiàng)失去焦點(diǎn)時(shí)驗(yàn)證，同表單元素的onblur事件
。

By default the library will add an event listener to the form's onsubmit event and stop the event if the validation fails. If you pass the option {onSubmit : false} it wont do that. This way you can call the validate function manually within your own javascript.

默認(rèn)驗(yàn)證器會(huì)添加一個(gè)表單的onsubmit事件監(jiān)聽并且阻止表單的submit事件如果表單驗(yàn)證失敗的話。如果你添加了{(lán)onSubmit : false}選項(xiàng)的話，這一切將不會(huì)發(fā)生。使用這種方式就可以在form onsubmit的時(shí)候調(diào)用自定義的javascript函數(shù)

By default the library will focus on the first field that contains an error. If you pass the option {focusOnError : false} it wont do that.

默認(rèn)情況下驗(yàn)證失敗選項(xiàng)會(huì)自動(dòng)獲得輸入焦點(diǎn)focus。通過設(shè)置選項(xiàng){focusOnError : false}禁用此功能。

You can also pass the option {useTitles : true} to make the field validators use the form elements' title attribute value as the error advice message.

你也可以設(shè)置option {useTitles : true}來使用表單項(xiàng)的標(biāo)題title屬性值來用作出錯(cuò)提示。

You can set callbacks by using the options {onFormValidate : yourFunction, onElementValidate : yourFunction}.

可以通過選項(xiàng){onFormValidate : yourFunction, onElementValidate : yourFunction}來使用自定義函數(shù)。

onFormValidate is called after form validation takes place and takes two arguments: the validation result (true or false) and a reference to the form. OnElementValidate is called after each form element is validated and also takes 2 arguments: the validation result (true or false) and a reference to the form element.

onFormValidate 在表單驗(yàn)證后發(fā)生并且?guī)蓚€(gè)參數(shù)--表單驗(yàn)證結(jié)果（true or false）和 reference to the form,onElementValidate 在每一個(gè)表單項(xiàng)被驗(yàn)證后發(fā)生帶兩個(gè)參數(shù)--表單項(xiàng)驗(yàn)證結(jié)果（true or false）和 reference to the form element.

Instead of using the error message in the validator you can create your own validation advice page element. Now when the script is creating the advice element it first looks for an element with an id matching 'advice-' + validation-class-name + '-' + element.id and if not found then one matching 'advice-' + element.id . If your form element does not have an id attribute then match the name attribute. If it finds an element it will make that one appear. See the 'Donation' field in the demo for an example. If you make a custom validation advice element make sure you set the style to display : none .

你可以自定義驗(yàn)證出錯(cuò)信息而不使用默認(rèn)通過設(shè)置表單項(xiàng)。現(xiàn)在驗(yàn)證器將會(huì)首先從id為'advice-' + validation-class-name + '-' + element.id 的元素如果沒有則從'advice-' + element.id 匹配，如果表單元素沒有id屬性，將會(huì)匹配表單的name屬性。如果發(fā)現(xiàn)元素則使其出現(xiàn)。演示文檔中的'Donation'項(xiàng)說明了這個(gè)問題。使用自定義advice message 要確保顯示容器的display為none;

Also if you reference the effects.js file from Scriptaculous in your page head, it'll use a fade-in effect for the validation advice.

你可以引用scriptaculous框架中的effect.js文件，來實(shí)現(xiàn)出錯(cuò)建議信息的顯示特效：


CSS Hooks

As well as the validation css classes above, the validation library uses CSS classes to indicate validation status:
同上面的驗(yàn)證css定義。驗(yàn)證器使用樣式表定義規(guī)則來標(biāo)識(shí)驗(yàn)證狀態(tài)。
validation-failed and validation-passed

The validation advice element has a class of validation-advice and an id matching the following pattern
驗(yàn)證建議信息使用validation-advice類 并且 其id格式如下：
'advice-' + validation-class-name + '-' + element.id

so if the field ' birthdate' uses the ' validate-date' validation class then the validation advice element will have an id of ' advice-validate-date-birthdate'.
因此 表單項(xiàng)'birthdate'使用'validate-date'驗(yàn)證類。那么他的建議信息容器的id應(yīng)該為：'advice-validate-date-birthdate'.

Javascript API

By default the class attaches an event observer to the form's onsubmit event. If you prefer to do the form submit via javascript yourself you can still validate the form like this:

Javascript 接口

默認(rèn)的驗(yàn)證類綁定表單的onsubmit事件。如果你打算觸發(fā)自己的表單提交事件可以按以下格式書寫：


var valid = new Validation('form-id', {onSubmit:false});
var result = valid.validate();

The instance method, validate(), will return true or false.

The class has an instance function which resets all the field validation:

實(shí)例函數(shù)validate()將返回true 或者 false

驗(yàn)證器有一個(gè)重置所有驗(yàn)證的方法：


var valid = new Validation('form-id');
valid.reset();

Note that it doesn't reset the form, just the validation.

The Validation class also has some static methods that can be used independantly.
要注意的是上面的reset()僅僅重置驗(yàn)證，而不像表單的reset一樣重置表單內(nèi)容
驗(yàn)證類還有很多可以獨(dú)立調(diào)用的靜態(tài)方法

Validation.validate([element OR element id] [, options])

This validates the field (or field with that id), using all validation classes present. You can also pass the option {useTitle : true} to make the field validator use the form element's title attribute value as the error advice message.

You can run a specific validation test on a field or field value by doing this:

我們可以通過前面的驗(yàn)證類設(shè)置表單驗(yàn)證，同樣的 你也可以通過選項(xiàng){useTitle : true}來使用表單項(xiàng)的title屬性值作為出錯(cuò)信息提示.

你可以像下面這樣運(yùn)行一個(gè)屬于某個(gè)表單項(xiàng)的驗(yàn)證測(cè)試或者對(duì)某個(gè)特定值進(jìn)行測(cè)試。

Validation.get('validator-name').test(value [, element]);

To add your own validator do this:
像下面這樣添加你自己的驗(yàn)證規(guī)則：

Validation.add('class-name', 'Error message text', function(value [, element]) {
return /* do validation here */
}, options);

or this:
或者這樣：
Validation.add('class-name', 'Error message text', options);

The first example above includes a function as the third argument. The function enables you to write your own custom validation. The options argument is optional. The second example the third argument has become the options argument. Validator options can be used to perform common validation options without the need to write them into a function. Multiple options can be combined to create a complex validator and they can also enhance your custom validation function. Here are the available options and example usage below:

上面的第一個(gè)例子包含一個(gè)帶三個(gè)參數(shù)的函數(shù)定義，這個(gè)函數(shù)使你可以書寫自己的驗(yàn)證規(guī)則。參數(shù)options是可選的。第二個(gè)例子的第三個(gè)參數(shù)變成了options，驗(yàn)證選項(xiàng)可以被用來使用驗(yàn)證規(guī)則而不用書寫第一個(gè)例子中的function。一個(gè)復(fù)合選項(xiàng)可以定義一組驗(yàn)證規(guī)則組成的驗(yàn)證。這樣可以增強(qiáng)你的驗(yàn)證函數(shù)。下面是兩個(gè)實(shí)例：

Validation.add('class-name', 'Error message text', {
pattern : new RegExp("^[a-zA-Z]+$","gi"), // only letter allowed
minLength : 6, // value must be at least 6 characters
maxLength : 13, // value must be no longer than 13 characters
min : 5, // value is not less than this number
max : 100, // value is not more than this number
notOneOf : ['password', 'PASSWORD'], // value does not equal anything in this array
oneOf : ['fish','chicken','beef'], // value must equal one of the values in this array
is : '5', // value is equal to this string
isNot : 'turnip', //value is not equal to this string
equalToField : 'password', // value is equal to the form element with this ID
notEqualToField : 'username', // value is not equal to the form element with this ID
include : ['validate-alphanum'] // also tests each validator included in this array of validator keys (there are no sanity checks so beware infinite loops!)
});

For example here's one of the in-built ones:

Validation.add('validate-alpha', 'Please use letters only (a-z) in this field.', function (v) {
return Validation.get('IsEmpty').test(v) || /^[a-zA-Z]+$/.test(v)
});

And here's a custom one using options:

Validation.addAllThese('validate-password', 'Your password must be more than 6 characters and not be 'password' or the same as your name', {
minLength : 7,
notOneOf : ['password','PASSWORD','1234567','0123456'],
notEqualToField : 'username'
});

If you supply a custom function and a combination of options they are all tested and if all are true the field validates.

When you add a new validator it is added to a static group of validation methods with the class name as key. You then must use the class in the form elements to use your custom validation function.

To make adding mupltiple custom validators easier you can use Validation.addAllThese() like this:
如果你提供一個(gè)自定義函數(shù) 和 一組選項(xiàng) ，其中所有的選項(xiàng)均通過驗(yàn)證時(shí)才能通過驗(yàn)證。
新增一個(gè)驗(yàn)后你必須在表單驗(yàn)證中使用該驗(yàn)證類

Validation.addAllThese([
['required', 'This is a required field.', function(v) {
return !Validation.get('IsEmpty').test(v);
}],
['validate-number', 'Please use numbers only in this field.', function(v) {
return Validation.get('IsEmpty').test(v) || !isNaN(v);
}],
['validate-digits', 'Please use numbers only in this field.', function(v) {
return Validation.get('IsEmpty').test(v) || !/[^d]/.test(v);
}]
]);

You pass an array, where each element of the array is an array with 3 or 4 elements: [className, error, function, options] or [className, error, options]

總結(jié)

以上是生活随笔為你收集整理的真正简单的基于prototype的表单验证的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。