`
ninnd
  • 浏览: 21955 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

jQuery.validate插件 使用例子

阅读更多
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>

        <title>jQuery.validate</title>
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0">
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="This is my page">
        <script src="/demo/js/jquery-1.4.4.js">
</script>
        <script type="text/javascript" src="/demo/js/jquery.validate.js">
</script>
        <script type="text/javascript">
<!--
    $(document).ready(function(){
        $("#test").validate({
            rules:{//定义验证规则
                pwd:{
                    required:true,
                    minlength:5,
                    maxlength:12
                }
            },
            messages:{//验证显示信息
                name:"名字不能为空!",
                email:{
                    required:"邮箱地址必须填!",
                    email:"邮箱地址格式不正确!"
                },
                pwd:{
                    required:"密码不能为空!",
                    minlength:jQuery.format("密码最少{0}位!"),
                    maxlength:jQuery.format("密码最多{0}位!")
                }
            }
        });
    });
//-->
</script>
<style type="text/css">
    body {
    font-size: 12px;
}
</style>
    </head>

    <body>
        <form action="" id="test" method="post">
            <fieldset
                style="border: 1px solid black; background-color: #AED0EA; -moz-border-radius: 6px 6px 6px 6px; width: 550px;margin: 0px;">
                <legend
                    style="font-size:14px;border: 1px solid black; background-color: #AED0EA; -moz-border-radius: 3px 3px 3px 3px; font-weight: bold; color: black;">
                    jQuery.validate Demo
                </legend>
                <table>
                    <tr>
                        <td align="right">
                            <label>
                                name:
                            </label>
                        </td>
                        <td>
                            <input
                                style="border: 1px solid black; background-color: #AED0EA; -moz-border-radius: 3px 3px 3px 3px; font-weight: bold; color: black;width: 150px;"
                                class="required" name="name">
                        </td>
                    </tr>
                    <tr>
                        <td align="right">
                            <label>
                                email:
                            </label>
                        </td>
                        <td>
                            <input
                                style="border: 1px solid black; background-color: #AED0EA; -moz-border-radius: 3px 3px 3px 3px; font-weight: bold; color: black;width: 150px;"
                                class="email required" name="email">
                        </td>
                    </tr>
                    <tr>
                        <td align="right">
                            <label>
                                password:
                            </label>
                        </td>
                        <td>
                            <input type="password"
                                style="border: 1px solid black; background-color: #AED0EA; -moz-border-radius: 3px 3px 3px 3px; font-weight: bold; color: black;width: 150px;"
                                class="required" name="pwd">
                        </td>
                    </tr>
                    <tr>
                        <td align="right">
                            &nbsp;
                        </td>
                        <td>
                            <input
                                style="border: 1px solid black; background-color: #AED0EA; -moz-border-radius: 3px 3px 3px 3px; font-weight: bold; color: black;"
                                class="submit" type="submit" value="submit">
                        </td>
                    </tr>
                </table>
            </fieldset>
        </form>
    </body>
</html>
分享到:
评论

相关推荐

    jQuery.validate插件(附代码实例)

    在使用jQuery.validate插件前,首先需要引入jQuery库和jQuery.validate插件的JavaScript文件。在这个案例中,我们有两个文件:`jquery.js`和`jquery.validate.js`。`jquery.js`是jQuery的核心库,负责提供DOM操作、...

    jquery.validate 使用

    在`jqueryvalidate验证demo`中,包含了多个实例,演示了基本验证、自定义规则、验证组等常见功能的应用。通过查看和运行这些示例,可以更深入地理解和掌握jQuery Validate的使用。 总结,jQuery Validate插件以其...

    jquery.validate表单验证密码完整例子(带密码强度显示)

    2. **初始化验证**:使用`jQuery`选择器找到需要验证的表单元素,并调用`.validate()`方法,配置相应的验证规则。例如,对于密码字段,可能有`required`(必填)、`minlength`(最小长度)和自定义的正则表达式规则...

    jQuery.validate实例

    jQuery库中的validate插件为开发者提供了一种简单、高效的表单验证解决方案。本文将深入探讨jQuery.validate的实际应用,结合“jQuery.validate使用手册”进行详尽的解析。 首先,我们需要了解jQuery.validate的...

    Struts2+jquery.validate框架实现用户名是否存在

    #### jQuery.validate插件 jQuery.validate是一个基于jQuery的表单验证插件,它可以简化前端表单的验证过程,提供丰富的验证规则和自定义错误消息。通过jQuery.validate,开发者可以轻松地实现诸如必填项检查、格式...

    jquery.validate表单验证插件使用方法解析

    jquery.validate是jQuery的一个表单验证插件...综上所述,jquery.validate插件通过其灵活的使用方式、简洁的配置,能够帮助开发者在前端完成大量常规的表单验证工作,减少后端验证的压力,提高用户体验和数据的准确性。

    jquery.validate.js jquery.metadata.js

    jQuery Validate插件是用于前端表单验证的强大工具,它可以轻松地对用户输入的数据进行实时检查,确保用户在提交表单之前满足特定的规则。这个插件提供了一系列内置的验证方法,如`required`(必填)、`email`(电子...

    jquery.validate例子

    `jQuery Validate`插件需要`jQuery`才能运行,因此在这个例子中,它被引入到页面中以支持验证功能。 3. `jquery.validate.js`:这是`jQuery Validate`的核心文件,包含了所有验证规则、错误消息和验证逻辑。通过...

    jquery.validate知识要点

    `jQuery.validate`插件是一种基于jQuery的表单验证工具,它可以帮助开发者快速实现客户端数据校验功能,提高用户体验的同时减少服务器端的压力。该插件支持多种内置验证规则,并且可以方便地扩展自定义规则。 #### ...

    jquery validate例子

    《jQuery Validate插件详解与实例应用》 在Web开发中,表单验证是不可或缺的一环,它能够确保用户输入的数据符合预设的规则,提高数据的准确性和安全性。jQuery Validate是一个强大的JavaScript库,专为jQuery设计...

    jquery.validate.js表单验证[借鉴].pdf

    要在项目中使用 `jQuery.validate.js`,首先需要引入 jQuery 库,然后引入 validate 插件,如下所示: ```html &lt;script src="../js/jquery.js" type="text/javascript"&gt; &lt;script src="../js/jquery.validate.js" ...

    jquery.validate 使用说明文档

    在本文中,我们将深入探讨如何使用 jQuery Validate,包括基本的使用方法、可选参数以及常见的验证规则。 首先,要使用 jQuery Validate,你需要在页面中引入 jQuery 库和 jQuery Validate 的脚本文件。如以下代码...

    JQuery Validate插件的验证规则和例子,合成AJAX

    在项目中使用jQuery Validate插件,首先需要下载并引入jQuery库和jQuery Validate插件的JavaScript文件。通常,它们会包含在`validate.js`或`jquery.validate.min.js`这样的文件中。在HTML文件中,通过`&lt;script&gt;`...

    jquery.validate_Validation

    在使用jQuery Validate之前,首先需要引入JQuery库和jQuery Validate插件的JavaScript文件。确保JQuery版本至少为1.2.6,兼容1.3.2。以下是最基础的引入方式: ```html &lt;script src="jquery.js" type="text/...

    JQuery+validate校验+messages_zh中文的js库

    总的来说,这个压缩包提供了实现中文表单验证所需的全部资源,包括jQuery库、jQuery Validate插件以及中文错误消息文件,使得开发者能够方便地为网页表单添加功能强大且易于理解的验证机制,提高用户体验。

    jquery.validate.js表单验证.pdf

    在使用jQuery Validate时,首先需要在HTML文档中引入jQuery库和jQuery Validate插件的JavaScript文件,如下所示: ```html &lt;script src="test/jquery.js" type="text/javascript"&gt; &lt;script src="test/jquery....

    jquery.validate表单验证插件使用详解

    在本文中,我们将深入探讨jQuery Validate插件的使用方法,这是一个强大的JavaScript库,用于实现高效且用户友好的表单验证。jQuery Validate插件简化了在HTML表单中添加验证规则的过程,无需编写复杂的正则表达式,...

    jquery-validate

    8. **demo**:演示示例,通常用于展示如何配置和使用`jQuery Validate`插件,开发者可以通过查看和运行这些例子来学习如何应用验证规则。 使用`jQuery Validate`时,你需要在HTML中指定验证规则,这通常通过添加...

    jquery.validate_框架详解

    jQuery Validate 是一个强大的客户端表单验证插件,用于在用户提交数据之前检查其有效性。它提供了丰富的验证规则和自定义选项,确保用户输入的数据符合预设的要求。在本文中,我们将深入探讨 `jQuery Validate` ...

    jQuery.Validate表单验证插件的使用示例详解

    总结来说,jQuery.Validate插件通过提供丰富的验证规则和自定义选项,简化了客户端表单验证的过程。它可以轻松处理各种验证场景,如必填字段、数据格式验证、自定义验证等。通过结合使用错误消息本地化和自定义样式...

Global site tag (gtag.js) - Google Analytics