jstl页面校验的用法

How to use validation JavaScript Framework

[Summary:]

1. JavaScript Validation Framework includes three files:

validate.js : used to store the main validation rules

validateConfig.js : used to store the properties of validation framework

commonValidation.js : used to store self defined validation rules;

2. Framework provides the validation to single field except date format checking. The covered validation rules are:

1) Not blank;

2) Length within specified bounds;

3) Minimum length;

4) Maximum length;

5) Number;

6) Number with minimum length;

7) Integer with specified numerical value bounds;

8) Decimal with fixed number of digits;

9) Decimal with a ranged number of digits;

10) Email format;

11) Selected item of index past 0;

12) Minimum and maximum of multiple selections;

13) Radio button groups;

14) Date Format;

15) Money Format;

16) Phone Format;

17) Custom pattern;

1. Check to see if the field is blank

Syntax

alt="blank"

Errors if

Field is left blank -OR- only white space characters are present in it's value

Notes

White space characters include Space, Tab, Carriage Return, New line, Formfeed

Object compatibility

INPUT type=text, INPUT type=password, TEXTAREA

2. Check for a minimum length within specified bounds

Syntax

alt="length|min|max"

minInteger. Sets minimum value accepted.

maxInteger. Sets maximum value accepted.

Errors if

Field contains characters number is outiside of specified bounds -OR- field is left blank*

Notes

he number following the 'min' in the alt will be the minimum required length, he number following the 'max' in the alt will be the maximum required length. Do not add spaces or underscores.

Object compatibility

INPUT type=text, INPUT type=password, TEXTAREA

3. Check for a minimum length

Syntax

alt="lengthl|min"

minInteger. Sets minimum length

Errors if

Field does not have at lest min characters in it's value -OR- field is left blank*

Notes

he number following the 'lengthl' in the alt will be the minimum required length. Do not add spaces or underscores.

Object compatibility

INPUT type=text, INPUT type=password, TEXTAREA

4. Check for a maximum length

Syntax

alt="lengthr|max"

maxInteger. Sets maximum length

Errors if

Field is out the liimited ofmax characters in it's value -OR- field is left blank*

Notes

he number following the 'lengthr' in the alt will be the maximum required length. Do not add spaces or underscores.

Object compatibility

INPUT type=text, INPUT type=password, TEXTAREA

5. Check for only numbers

Syntax

alt="number"

Errors if

Field contains any non-digit characters -OR- field is left blank*

Object compatibility

INPUT type=text, INPUT type=password, TEXTAREA

6. Check for only numbers with a minimum length

Syntax

alt="numberl|min"

minInteger. Sets minimum length

Errors if

Field contains any non-digit characters -OR- field is left blank*

Object compatibility

INPUT type=text, INPUT type=password, TEXTAREA

7. Check for only integers within specified bounds

Syntax

alt="numberr|min|max"

minInteger. Sets minimum value accepted. Enter 'none' for no minimum.

maxInteger. Sets maximum value accepted. Enter 'none' for no maximum

Errors if

Field contains any non-integer characters -OR- integer is outiside of specified bounds -OR- field is left blank*

Object compatibility

INPUT type=text, INPUT type=password, TEXTAREA

8. Check for valid decimal with fixed number of digits

Syntax

alt="decimal|leftDigits|rightdigits"

leftDigitsInteger. Sets exact number of digits that must appear to the left of the decimal

rightDigitsInteger. Sets exact number of digits that must appear to the right of the decimal

Errors if

Field data does not match decimal format specified -OR- is left blank*

Notes

Wildcards (*) can be used for either parameter, specifying any number of digits for that side

Examples

decimal|*|2 will match '1234.12' -OR- '.34' -OR- '1234567890.00'

decimal|3|* will match '100.1' -OR- 123.987 -OR- '987.12345678'

Object compatibility

INPUT type=text, INPUT type=password, TEXTAREA

9. Check for valid decimal with a ranged number of digits

Syntax

alt="decimalr|leftDigitsMin|leftDigitsMax|rightDigitsMin|rightDigitsMax"

leftDigitsMin Integer. Sets minimum number of digits that must appear to the left of the decimal

leftDigitsMax Integer. Sets maximum number of digits that must appear to the left of the decimal

rightDigitsMin Integer. Sets minimum number of digits that must appear to the right of the decimal

rightDigitsMax Integer. Sets maximum number of digits that must appear to the right of the decimal

Errors if

Field data does not match decimal format specified -OR- is left blank*

Notes

Wildcards (*) can be used for any parameter, specifying any number of digits for that value

Examples

decimalr3|*|2|3 ( '123.12' -OR- '12345678.12' -OR- '9876.123' )

decimalr0|2|1|* ( '.1' -OR- '23.123456789' -OR- '1.98' )

Object compatibility

INPUT type=text, INPUT type=password, TEXTAREA

10. Check for valid email format

Syntax

alt="email"

Errors if

Field data does not match a valid email format -OR- is left blank*

Formats

user@domain.suffix ( john@internet.com )

user.sub@domain.suffix ( john.doe@internet.com )

user.sub@domain.subd.suffix ( john.doe@email.internet.com )

user@ip ( john@[192.168.1.1] )

And several combinations of the above formats

Object compatibility

INPUT type=text, INPUT type=password, TEXTAREA

11. Check for selected index past 0

Syntax

alt="select"

Errors if

Initial index (0) of the SELECT object is selected (indicating no change made)

Object compatibility

SELECT multiple=false

12. Check for min/max of multiple selections

Syntax

alt="selectm|minS|maxS"

minSInteger. Sets minimum allowed selections. 0 for no minimum.

maxSInteger. Sets maximum allowed selections. Enter 999 or * for no maximum.

Errors if

Number of selected options does not fall within specified min/max values

Object compatibility

SELECT multiple=true

13. Radio-button groups

Syntax

alt="radio"

Errors if

None of the buttons in the radio-button group are checked

Notes

Only put the validator attribute on the first button in the group

Object compatiblity

INPUT type=radio

14. Date format

Syntax

dateFormat = "day" in first textbox;

dateFormat = "month" in second textbox;

dateFormat = "year" in third textbox;

dateFormat = "hour" in four textbox and

dateFormat = "minute" in fifth textbox

if these two textbox exist.

Errors if

Field data does not match valid date format. For example,

31/02/2004 is invalid.

Notes

If you want to make these date fields are mandatory, please

add the alt = “blank” in every textbox.

Set “displayName” property which is used to display when field

data is invalid.

15. Money Format

Syntax

alt="money"

Errors if

Field data does not match the money format

Notes

Object compatiblity

INPUT type=text,

16. Phone Format

Syntax

alt="phone"

Errors if

Field data does not match the phone format

Notes

Object compatiblity

INPUT type=text,

17. Specify Custom Pattern

Syntax

alt="custom" pattern="pattern"

patternAny valid PCRE pattern

Errors if

Field data does not validate against set pattern -OR- is left blank

Notes

Unlike most of the other fValidate validators, this requires the separare, custom HTML attribute 'pattern' for the specification of the pattern. Use of custom error message recommended.

Object compatiblity

INPUT type=text, INPUT type=password, TEXTAREA

3. If you want to validate the relationship between two fields, you should provide the methods by yourself. The validate.js will provide the method to define the error message and some methods to help you do that, such as constructDate, commonValidateNumberR. If self defined validation is used in several JSPs, you can put these validations into commonValidation.js file. Here is the method lists:

Methods used to process error:

1) errorProcess(errorField, errorMessage)

Description: Write the errorMessage in the specified division by yourself and tell user which field data is invalid;

Parameters: errorField — the name of error elements, you can pass one element name, or a array of element name;

errorMessage — the displayed message;

Return: void;

Example: Show as below;

2) checkError(form)

Description: Check the array which contains the error fields, if the array is empty,

return true, else return false;

Parameters: form — the name of form;

Return: true or false;

Example:Show as below;

Methods used to help you apply self defined validation rules:

1) commonValidateNumberR(field,lb,ub)

Description: valid integers within specified bounds;

Parameters: field — the data you wanna validate

lb — the minimum number

ub — the maximum number;

Return: true or false;

Example: commonValidateNumberR(hour,0,23), if hour < 0 or hour > 23, return false, else return ture;

2) constructDate(dayObj,monthObj,yearObj)

Description: construct the date obj according the input field data;

Parameters: dayObj — day field;

monthObj — month field;

yearObj — year field;

Return: Date Object;

Here is a sample:

function ttsValidateForm(Frm)

{

if(validateForm(Frm)&& checkBailAmount(Frm)&& checkRelativeDate(Frm))

return true;

else

{

// Because no matter validateForm method returns true or false, the self defined methods are still invoked.

checkBailAmount(Frm);

checkRelativeDate(Frm);

return false;

}

function checkBailAmount(Frm)

{

if(Frm.conductCode.value == '*' && !commonValidateBlank(Frm.bailAmount.value))

{

errorProcess("bailAmount","The bailAmout is missing!");

return checkError(Frm);

}

return true;

}

function checkRelativeDate(Frm)

{

if(commonValidateBlank(Frm.locatedDay.value) &&

commonValidateBlank(Frm.locatedMonth.value) &&

commonValidateBlank(Frm.locatedYear.value))

{

var locDayObj = Frm.locatedDay;

var locMonthObj = Frm.locatedMonth;

var locYearObj = Frm.locatedYear;

var asAtDayObj = Frm.asAtDateDay;

var asAtMonthObj = Frm.asAtDateMonth;

var asAtYearObj = Frm.asAtDateYear;

if(constructDate(locDayObj,locMonthObj,locYearObj) > constructDate(asAtDayObj,asAtMonthObj,asAtYearObj))

{

var errorField = new Array();

errorField.push(locDayObj.name);

errorField.push(locMonthObj.name);

errorField.push(locYearObj.name);

errorProcess(errorField,"As At Date must later than Located Date!");

return checkError(Frm);

}

return true;

}

</script>

<input name="asAtDateDay" class="inputMonth" dateFormat="day" size=2 maxlength="2" alt="blank" displayName="As At Date/Time"> /

<input name="asAtDateMonth" class="inputDate" dateFormat="month" size=2 maxlength="2" alt="blank" > /

<input name="asAtTimeHour" class="inputDate" dateFormat="hour" size=2 maxlength="2" alt="blank"> :

</td>

</tr>

<td width="150" class="content_field" >Located Date</td>

</td>

</tr>

</form>

[Some Tips:]

1. The validation about date format: the thing you will do just is setting the "dateFormat" property of the three or five date fields as “day”, “month”, “year”, “hour” and “minute”. Just like this: dateFormat="day", dateFormat="month". And the alt isn't required any more. If you expect the date fields are mandatory, you should use alt="blank" for each fields.

2. You should define the error message by yourself except the checking blank. Add new property “msg” in you Html Tag, just like this:

3. When you apply self defined validation, please pay attention to applying the constraint. Just like this showing in the sample:

If (commonValidateBlank(Frm.locatedDay.value) &&

commonValidateBlank(Frm.locatedMonth.value) &&

commonValidateBlank(Frm.locatedYear.value))

You must know that there is no priority difference in validation process. The validation which framework provides and self defined validation have the same priority.

4. When you apply self defined validation, you must apply one specified validation method, just like ttsValidateForm method in the sample. And in the form Html Tag, you set onsubmit = “ttsValidateForm(this)”.If you have any self defined method applying, set onsubmit = “validateForm(this)”.

5. If the field is optional, you can set the “bok” into the “alt” property, just like this: alt = “number|bok”. If you set this pattern, validation will be applied only when user input data in this field.