作者：未知 来源：月光软件站 加入时间：2005-2-28　月光软件站

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

2.      Check for a minimum length within specified bounds

3.      Check for a minimum length

4.      Check for a maximum length

5.      Check for only numbers

6.      Check for only numbers with a minimum length

7.      Check for only integers within specified bounds

8. Check for valid decimal with fixed number of digits

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

10. Check for valid email format

11. Check for selected index past 0

12. Check for min/max of multiple selections

13. Radio-button groups

14. Date format

15. Money Format

16. Phone Format

17. Specify Custom Pattern

   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.

相关软件：