1. Create a js folder under the WebRoot path.
2. Copy the validation-config.xml and validation-framework.js files in Validation to it.
3. Change the 21st rows add path in the validation-framework.js file, for example:
Var ValidationRoot = "/lesson4/js /";
4.
(1) Remove 14 to 41 lines in the validation-config.xml file, for example:
<Form id = "form2" show-error = "errorDiv" onfail = "" show-type = "first">
<Field name = "username" display-name = "too many variables? Onfail = "">
<Depend name = "required"/>
<Depend name = "commonChar"/>
</Field>
<Field name = "password" display-name = "too many characters">
<Depend name = "required"/>
<Depend name = "commonChar"/>
</Field>
<Field name = "confirm" display-name = "zookeeper">
<Depend name = "effecsfield" param0 = "password"/>
</Field>
<Field name = "gender" display-name = "zookeeper">
<Depend name = "required"/>
</Field>
<Field name = "interest" display-name = "">
<Depend name = "required"/>
</Field>
<Field name = "email" display-name = "Email">
<Depend name = "email"/>
</Field>
<Field name = "age" display-name = "">
<Depend name = "integerRange" param0 = "15" param1 = "60"/>
</Field>
<Field name = "cname" display-name = "">
<Depend name = "chineseChar"/>
</Field>
</Form>
(2) modify the name value of rows 4th to 13th, for example:
<Form id = "form1" show-error = "alert" show-type = "all">
<Field name = "username" display-name = "too many variables? Onfail = "">
<Depend name = "required"/>
<Depend name = "commonChar"/>
</Field>
<Field name = "password" display-name = "too many characters">
<Depend name = "required"/>
<Depend name = "commonChar"/>
</Field>
</Form> www.2cto.com
① Change id = "form1" to id = "login" Remarks: The name is the same as the name in form in login1.html.
② Change name = "username" to name = "userName" Remarks: The name is the same as the name in the input form in login1.html.
③ Change name = "password" to name = "userPassword" Remarks: The name is the same as the name in the input form in login1.html.
5. Added javascript file function calls.
(1)add a line of code in the first line of <body> </body> In login1.html. The Code is as follows:
<Script language = "javascript" src = "/lesson4/js/validation-framework.js"> </script>
(2mit add (submit) The submit code to the <form> content in login1.html and modify it as follows:
Original:
<Form method = "post" action = "/lesson4/servlet/login" name = "login">
After adding a submit:
<Form method = "post" action = "/lesson4/servlet/login" name = "login" onsubmit = "return doValidate (this)">
6. Solve the garbled problem (save the file again ):
Open the validation-framework.js file under the path with EditPlus and choose the format of Encoding to replace the UTF-8 for saving.
7. The error message is displayed on the page rather than in the pop-up dialog box. The setting method of the error message is as follows:
(1)add a line of code below <script> line <form> On the login1.html page. The Code is as follows:
<Div id = "error" style = "color: red; font-weight: bold"> <div>
Note: id value, error indicates an error prompt; style, font red bold.
(2) modify the show-error value in the <form> form in the validation-config.xml file and change "alert" to "error"
Original:
<Form id = "form1" show-error = "alert" show-type = "all">
Changed:
<Form id = "form1" show-error = "error" show-type = "all">