`

LiveValidation验证

    博客分类：
  • java
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);
分享到：
| Select Top在MySQL数据库中的使用方法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    LiveValidation很好用的js表单验证

    以下是一个简单的使用示例，展示了如何使用LiveValidation验证电子邮件输入： ```javascript var emailValidation = new LiveValidation('email', { validMessage: "邮箱格式正确" }); emailValidation.add...

    LiveValidation超好用的表单验证框架(包含中文帮助)

    LiveValidation是一款强大的JavaScript库，专为前端开发者设计，用于实现实时、动态的表单验证。这个框架的主要目的是在用户输入数据时立即检测其有效性，从而提供更好的用户体验，避免提交无效或错误的数据到服务器...

    超好用的表单验证插件(LiveValidation)

    看到她的宣传语你就会爱上她——LiveValidation - Validation as you type！ LiveValidation适合对JavaScript教熟悉的编程人员。它有standalone version 和基于prototype的prototype.js version两个版本，可能是作者...

    LiveValidation

    **LiveValidation：实时前端表单验证框架** 在Web开发中，表单验证是不可或缺的一环，确保用户输入的数据符合预设规则，防止无效数据的提交。`LiveValidation`是一款轻量级的JavaScript库，专为实现即时、客户端的...

    LiveValidation 友好性验证表单效果

    1. **实时验证**: LiveValidation 实现了在用户输入时立即验证的功能。例如，当用户在电子邮件字段中键入内容时，它可以即时检查格式是否符合电子邮件的标准，这样用户无需离开当前字段或提交表单就能得知错误。 2....

    LiveValidation 中文版

    3. **扩展验证规则**: 如果预设的验证规则不能满足需求，可以通过继承LiveValidation.prototype 添加自定义验证方法。 4. **响应式设计**: 结合响应式设计，确保在不同设备和屏幕尺寸上验证体验的一致性。 5. **...

    LiveValidation 中文修改版

    LiveValidation 是一个轻量级的JavaScript库，专为前端表单验证设计，旨在实时检查用户输入，无需提交表单即可提供即时反馈。这个"LiveValidation 中文修改版"是原始库的一个本地化版本，它将界面提示和错误消息翻译...

    动态验证表单 使用js插件

    6. **扩展与自定义**：LiveValidation库也支持扩展，允许开发者根据需求创建自定义验证方法，以适应更复杂的验证逻辑。 通过这样的方式，我们可以构建出具有强大验证功能的动态表单，确保用户输入的数据在提交之前...

    超级好用的ajax验证插件

    **Ajax验证插件——LiveValidation 中文修改版详解** 在Web开发中，用户输入验证是一项不可或缺的任务，它能确保用户提交的数据符合预期的格式和规则，从而提高网站数据的准确性和安全性。传统的验证方式通常在用户...

    强大的JS开源验证框架，拿过来直接用（注册登陆用）

    LiveValidation是一个实际存在的JavaScript验证库，它提供了实时的表单验证功能，即用户在输入时就能立即看到验证结果，增强了用户体验。 总的来说，这个开源JS验证框架是Web开发者处理注册和登录验证的理想工具，...

    jquery css 正则验证，漂亮提示

    文件名"LiveValidation 友好性验证表单效果"可能是指一个包含实例代码或演示的资源，它可能提供了更复杂的验证功能，如实时验证（在用户输入时立即给出反馈），以及更多样化的提示信息显示方式。实际应用中，还可以...

    Web通用的表单校验JS

    使用LiveValidation，我们可以定义各种验证规则，如非空检查、电子邮件格式检查、数字范围验证等。 以下是使用LiveValidation进行表单校验的基本步骤： 1. **引入库**：在HTML文件中，通过`&lt;script&gt;`标签引入...

    AJAX 验证框架13个

    - LiveValidation 提供了Prototype和标准两个版本，实现快速、强大的客户端验证。 - JSValidate 结合了Prototype和Scriptaculous，提供了简单的JavaScript表单验证。 - Field validation with Prototype 是一个...

    上班签到代码

    - 使用LiveValidation库对表单进行实时验证。 - **`field1`**：验证`reason_am`字段是否为空（必须填写），长度不超过500字符。 - **`field2`**：验证`reason_pm`字段是否为空（必须填写），长度不超过500字符。 ...

    Phpgrid 3.0 Beta （附中文文档）

    2009-11-14 重写了全部代码,去掉了ajax，导入导出功能,现在代码运行更稳定，...使用livevalidation做为前端验证 精简了HTML代码和CSS样式 高性能.使用测试工具：Loadruner进行了性能测试，能够承受大量用户同时访问

    40个轻量级JavaScript库[整理].pdf

    - **LiveValidation**：实时验证库，与Ruby on Rails的命名规则相似，有独立版和Prototype版。 - **yav**：强大且可扩展的验证库，支持多种验证规则，包括AJAX支持和对象级错误消息。 - **qForms**：提供验证规则...

    phpGrid3.0.doc中文用户手册

    - **前端验证集成**：利用LiveValidation进行前端数据验证，确保数据完整性。 - **代码优化**：精简HTML代码和CSS样式，提升加载速度和视觉体验。 - **性能保障**：经过LoadRunner测试，证实能够承受高并发用户访问...

    phpgrid3,0使用手册

    8. 使用了livevalidation作为前端验证工具，实现前端验证功能。 9. 精简了HTML代码和CSS样式，使得生成的前端代码更加高效和轻量级。 10. 经过性能测试，PHPGrid能够承受大量用户的并发访问。 PHPGrid主要由以下...

Magicbox
Global site tag (gtag.js) - Google Analytics