`
longgangbai
  • 浏览: 7325739 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

JQuery 插件Validate框架的学习总结(二)

阅读更多

在页面导入相应的jquery和Validation的插件并导入并使用Validation框架

 

常用的限制使用如下:

 

相应的HTML中form中信息如下:

 

<form id="myform">
  <label for="field">Required, only .xls and .csv files allowed</label>
 
   FIle:<input  id="file" name="file"  type="file" />
   PWD:<input  id="pwd" name="pwd" type="text" />
   PWD_AGAIN:<input  id="pwd_again" name ="pwd_again" type="text" />
   Birth:<input  name="mydate"  id="mydate" type="text" />
   Age:<input  name="age"  id="age" type="text" />
   Email:<input  name ="myemail"  id="myemail" type="text" />
   URL  :<input name="myurl"  id="myurl" type="text" />
  <input type="submit" value="Validate!" />
</form>
在js中绑定的代码如下:

 <script type="text/javascript">
       jQuery(function($) {
         $("#myform").validate(rules:{
           file:{
             required:true,  //表示必填的项
             accept:"xls|csv"  //可以使用
           },
           pwd:{
             required:true,
             creditcard:true,  //表示必须为密码格式
             rangeLength:[6,10]  //表示密码的长度限制
           },
           pwd_again:{ //两次输入的密码的信息一致
             required:true,
             equalTo:"#pwd" //表示匹配的的字段
           }
           mydate:{
              required:true,
              date:true  //输入的必须为时间类型
           },
           age:{
             required:true,
             digits:true,  //表示输入的必须为数字
             maxLength:2,  //表示输入的必须为2个字符的长度
             rangeValue:[1,100] //表示输入的数据的value的范围
           },
           myemail:{
             require:true,
             email:true  //表示必须电子邮件的格式
           },
           myurl:{
              required:true,
              url:true //表示输入的必须为url的限制
           }
          
         });
           });

     </script>

 

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>jQuery PlugIn - 表单验证插件实例 Validate </title>
    <!--black-tie,blitzer,blitzer,dot-luv,excite-bike,hot-sneaks,humanity,mint-choc,redmond,smoothness,south-street,start,swanky-purse,trontastic,ui-darkness,ui-lightness,vader-->
    <link rel="stylesheet" type="text/css" href="/JsLib/jquery/themes/redmond/style.css"%>" />
    <script type="text/javascript" src="JsLib/jquery/jquery-min-lastest.js"></script>
    <script type="text/javascript" src="JsLib/jquery/ui/jquery-ui-all-min-lastest.js"></script>
    <script type="text/javascript" src="JsLib/jquery/plugin/jquery.validate/jquery.validate.min.js"></script>
    <script type="text/javascript"src="/JsLib/jquery/plugin/jquery.validate/localization/messages_cn.js"></script>
       
    <% if (false)
       {%><script src="js/jquery-vsdoc-lastest.js" type="text/javascript"></script>
    <% }%>
    <script type="text/javascript">
        /*========== 必须放在头部加载的语句块. 尽量避免使用 ==========*/
    </script>
    <style type="text/css">
        body
        {
            font-size:12px;
        }
        /* form中显示文字的label */
        .slabel
        {
            width:100px;
            display: -moz-inline-box;
            line-height: 1.8;
            display: inline-block;
            text-align:right;
        }
        /* 出错样式 */
        input.error, textarea.error
        {
            border: solid 1px #CD0A0A;
        }
        label.error
        {
            color:#CD0A0A;
            margin-left:5px;
        }
        /* 深红色文字 */
        .textred
        {
            color:#CD0A0A;
        }
    </style>
</head>
<body>
    <form id="commentForm" method="get" action="">
    <fieldset style="width:500px;"><legend>表单验证</legend>
        <p><label for="cname" class="slabel"><em class="textred">*</em> 姓名:</label>
            <input id="cname" name="name" size="25" class="required" minlength="2" />
        </p>
        <p><label for="cemail" class="slabel"><em class="textred">*</em> E-Mail:</label>
            <input id="cemail" name="email" size="25"/>
        </p>
        <p><label for="curl" class="slabel">网址:</label>           
            <input id="curl" name="url" size="25" class="url" value="" />
        </p>
        <p><label for="ccomment" class="slabel"><em class="textred">*</em> 内容:</label>
            <textarea rows="2" id="ccomment" name="comment" cols="20" class="required" style="height:80px;"></textarea>
        </p>
        <p style="text-align:center;">
            <input class="submit" type="submit" value="提交" />
        </p>
    </fieldset>
    </form>
    <script type="text/javascript">
       /*==========用户自定义方法==========*/


       /*==========事件绑定==========*/
       $(function()
       {

       });

       /*==========加载时执行的语句==========*/
       $(function()
       {
           $("#commentForm").validate(
           {
               errorClass: "error",
               submitHandler: function(form)
               {
                   //如果想提交表单, 需要使用form.submit()而不要使用$(form).submit()
                   alert("submitted!");
               },
               rules: {
                   //为name为email的控件添加两个验证方法:required()和email()
                   email: { required: true, email: true }
               },
               messages: {
                   //为name为email的控件的required()和email()验证方法设置验证失败的消息内容
                   email: {required:"需要输入电子邮箱", email:"电子邮箱格式不正确"}
               }

           });
       });       
    </script>
</body>
</html>

分享到:
评论

相关推荐

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

    ### Struts2与jQuery.validate框架简介 #### Struts2框架 Struts2是Apache软件基金会的一个开源项目,它是Struts1的升级版,提供了一个用于构建企业级Java Web应用的强大MVC框架。Struts2的核心组件包括拦截器、...

    jquery-validate验证框架使用详解及JS文件

    jQuery Validate框架极大地简化了客户端表单验证,它提供了丰富的预设规则和自定义功能,可以灵活地处理各种验证需求。通过学习和实践,开发者可以快速地在项目中应用这个强大的验证工具,提升用户体验,减少无效...

    jquery表单验证框架:jquery.validate.zip

    本篇文章将详细介绍jQuery.validate框架及其核心功能。 一、jQuery.validate简介 jQuery.validate插件是由Jörn Zaefferer开发的,它的主要目标是简化和标准化HTML表单的验证过程。通过使用该插件,开发者可以轻松...

    jQuery.validate 用法

    总结来说,jQuery.validate是一个强大且灵活的表单验证插件,它提供丰富的验证规则和高度可定制的错误处理。通过源码阅读,我们可以更深入地理解其工作原理,并根据实际需求进行扩展和优化。对于任何涉及用户输入...

    jQuery.validate.js

    jQuery.validate.js是一款强大的JavaScript插件,专为jQuery框架设计,用于实现前端表单验证,提供了丰富的验证规则和自定义选项,使得开发者能够轻松地构建具有高效验证功能的网页。 一、jQuery.validate.js的核心...

    jquery.validate Validation .js验证框架 帮助 手册 文档 chm

    jquery.validate Validation .js验证框架 帮助 手册 文档.chm 版本 方面查询 (一)、可选项( options ) 1 (二)插件方法 (jQuery validation) 6 (三、四)选择器及实用工具 (jQuery validation) 7 四、实用工具...

    jquery-validate验证框架使用详解

    在jQuery Validate框架中,主要包含以下几个核心知识点: 1. **安装与引入**:首先,你需要在项目中引入jQuery库和jQuery Validate插件的JavaScript文件。通常,这两个文件可以从CDN(内容分发网络)获取,或者下载...

    jQuery的validate插件使用整理

    jQuery.validate是jQuery库的一个插件,它是一个功能强大的表单验证框架,使用它可以非常方便地实现前端表单验证。通过使用jQuery.validate,开发者可以定义表单元素的验证规则,并在表单提交之前执行这些规则,以...

    jQuery validate框架的个性化验证

    jQuery Validate 是一个强大的客户端验证插件,用于在用户提交表单前进行实时验证。这个框架大大简化了HTML表单的验证过程,提供了丰富的内置验证规则和可扩展的自定义验证功能,使得表单验证更加人性化和高效。 1....

    jquery-validate前台验证框架,带详细使用方法

    通过上述方法,你可以灵活地使用jQuery Validate框架实现丰富的前端验证功能。无论是简单的表单还是复杂的业务场景,都能找到合适的解决方案。在实际开发中,记得根据项目需求合理选择和组合这些特性,以提供最佳的...

    jquery_validate之学习

    jQuery Validate是一个强大的JavaScript库,它为jQuery框架提供了简单易用的表单验证功能。这个插件以其灵活性和丰富的定制选项,深受开发者喜爱。本文将深入探讨jQuery Validate的使用方法、核心功能和常见应用场景...

    JQuery的validate验证框架.rar

    然后,通过在页面中引入jQuery库和validate插件的JavaScript文件,你可以初始化验证行为。例如: ```html &lt;script src="jquery.js"&gt; &lt;script src="jquery.validate.js"&gt; $(document).ready(function() { $("#...

    jquery.validate.js jquery.metadata.js

    而jQuery Validate和jQuery Metadata是两个插件,它们分别提供了表单验证和元数据功能,大大增强了jQuery在前端验证和数据处理的能力。 **jQuery Validate插件** jQuery Validate插件是用于前端表单验证的强大工具...

    jquery validate依赖包及其帮助文档.rar

    《jQuery Validate插件详解与应用指南》 在Web开发领域,表单验证是不可或缺的一环,它能够确保用户输入的数据符合预设的规则,从而提高数据的准确性和系统的稳定性。jQuery Validate是一个强大的JavaScript库,专...

    最新实用的Validate通用表单验证Jquery插件

    【最新实用的Validate通用表单验证Jquery插件】是一个高效、灵活的前端验证工具,专为使用Jquery框架的Web开发人员设计。这个插件极大地简化了表单验证的过程,使得用户输入的数据在提交前就能得到有效的检查,从而...

    jquery.validate_框架详解

    总结来说,`jQuery Validate` 框架为客户端表单验证提供了强大而灵活的解决方案,包括多种内置规则、自定义规则、错误处理回调、忽略选项以及元数据支持。通过这些特性,你可以轻松地实现对用户输入的有效性检查,...

    jquery_validate验证框架

    8. **插件扩展**:jQuery Validate可以与其他jQuery插件(如表单序列化插件)配合使用,以实现更复杂的表单操作。 **使用步骤:** 1. **引入库**:首先需要在HTML文档中引入jQuery库和jQuery Validate插件的脚本...

    jQuery验证框架内置验证方法validate

    ### jQuery验证框架内置验证方法validate #### 一、概述 jQuery验证框架,即`jquery.validate.js`,是一款非常实用的JavaScript库,它为Web开发者提供了简单而强大的客户端表单验证功能。通过使用此插件,可以轻松...

Global site tag (gtag.js) - Google Analytics