首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

LiveValidation应验

2012-09-09 
LiveValidation验证1、http://livevalidation.com/download下载livevalidation_standalone.js2、目录结构:We

LiveValidation验证
1、http://livevalidation.com/download下载livevalidation_standalone.js

2、目录结构:
       WebRoot
          javascript
              livevalidation_standalone.js
              registerform_validation.js

          styles
              validation.css
          user
              regist.jsp

3、jsp页面

<html>       <head>              <link href="styles/validation.css" rel="stylesheet" type="text/css" />              <script type="text/javascript"                     src="javascript/livevalidation_standalone.js"></script>       </head>        <body>              <s:form action="register">                     <table>                            <tr>                                   <td width="32%">                                          User Name                                          <font color="#FF0000">*</font>                                   </td>                                   <td>                                          <s:textfield name="user.username" id="username" />                                   </td>                            </tr>                            <tr>                                   <td>                                          Password                                          <font color="#FF0000">*</font>                                   </td>                                   <td>                                          <s:password name="user.password" id="password" />                                   </td>                            </tr>                            <tr>                                   <td>                                          Confirm Password                                          <font color="#FF0000">*</font>                                   </td>                                   <td>                                          <s:password name="user.confirmpassword" id="repassword" />                                   </td>                            </tr>                            <tr>                                   <td>                                          Telephone                                   </td>                                   <td>                                          <s:textfield name="user.phone" id="phone" />                                   </td>                            </tr>                            <tr>                                   <td>                                          Email                                   </td>                                   <td>                                          <s:textfield name="user.email" id="email" />                                   </td>                            </tr>                            <tr>                                   <td>                                          Address                                   </td>                                   <td>                                          <s:textfield name="user.address" id="address" />                                   </td>                            </tr>                            <tr>                                   <td>                                          Post Code                                   </td>                                   <td>                                          <s:textfield name="user.postcode" id="postcode" />                                   </td>                            </tr>                            <tr>                                   <td align="center" colspan="2">                                          <s:submit value="Submit" />                                          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;                                          <s:reset value=" Reset " />                                   </td>                            </tr>                     </table>              </s:form>               <script type="text/javascript" src="javascript/registerform_validation.js"></script>       </body></html>



4、validation.css内容

.LV_validation_message{    font-size: x-small;    font-weight:bold;    margin:0 0 0 5px;} .LV_valid {    color:#00CC00;}    .LV_invalid {    color:#CC0000;}    .LV_valid_field,input.LV_valid_field:hover, input.LV_valid_field:active,textarea.LV_valid_field:hover, textarea.LV_valid_field:active {    border: 1px solid #00CC00;}   .LV_invalid_field, input.LV_invalid_field:hover, input.LV_invalid_field:active,textarea.LV_invalid_field:hover, textarea.LV_invalid_field:active {    border: 1px solid #CC0000;}



4、registerform_validation.js内容
var username = new LiveValidation('username');username.add(Validate.Presence);var password = new LiveValidation('password');password.add(Validate.Presence);var repassword = new LiveValidation('repassword');repassword.add(Validate.Presence);repassword.add(Validate.Confirmation, {match: 'password'}); var email = new LiveValidation('email');email.add(Validate.Email);

热点排行