[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
[email protected] ( [email protected] )
[email protected] ( [email protected] )
[email protected] ( [email protected] )
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:
<script language="Javascript">
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>
<form name=frmQuery method="post" onsubmit="return ttsValidateForm(this)">
<tr class="content_body">
<td width="150" class="content_field">As At Date/Time*</td>
<td class="content_field_v">
<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="asAtDateYear" class="inputYear" dateFormat="year" size=4 maxlength="4" alt="blank" >
<input name="asAtTimeHour" class="inputDate" dateFormat="hour" size=2 maxlength="2" alt="blank"> :
<input name="asAtTimeMinute" dateFormat="minute" class="inputDate" size=2 maxlength="2" alt="blank">
</td>
</tr>
<tr class="content_body">
<td width="150" class="content_field" >Located Date</td>
<td class="content_field_v" >
<input name="locatedDay" class="inputMonth" dateFormat="day" size=2 maxlength="2" displayName="Located Date">
/
<input name="locatedMonth" class="inputDate" dateFormat="month" size=2 maxlength="2" >
/
<input name="locatedYear" class="inputYear" dateFormat="year" size=4 maxlength="4" >
<input name="locatedHour" class="inputDate" dateFormat="hour" maxlength="2">
:
<input name="locatedMinute" class="inputDate" dateFormat="minute" maxlength="2">
</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:
<input name="registrationMark" alt="length|1|6" msg="Registration Mark is invalid!">
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.
本文地址：http://com.8s8s.com/it/it31070.htm