`
kalllx
  • 浏览: 62992 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论
阅读更多
<!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"  >
    <title>jQuery PlugIn - 表单验证插件实例 Validate </title>
<meta http-equiv="content-type" content="text/http;charset=utf-8">
 
    <script type="text/javascript" src="../js/jquery-min-lastest.js"></script>
 
    <script type="text/javascript" src="../js/plugin/validate/jquery.validate.pack.js"></script>
    <script type="text/javascript" src="../js/messages_cn.js"></script>
<script>
$(document).ready(function(){

$("#login").validate({
    rules: {
       username: {
        required: true,
  remote: {
   url: "exist_User.php",     //后台处理程序
   type: "post",               //数据发送方式
   dataType: "json",           //接受数据格式   
   data: {                     //要传递的数据
    username:function(){
     return $("#username").val();
    }
   }
  }

       },
       email: {
        required: true,
        email: true
       },
       password: {
        required: true,
        minlength: 6
       },
       confirm_password: {
        required: true,
        minlength: 6,
        equalTo: "#password"
       }
      },
    messages: {
       username: {
        required: "<span style='color:red'>  请输入用户名</span>",
        minlength: jQuery.format("<span style='color:red'>  用户名不正确,应该在2个汉字或四个字符以上</span>")
       },
       email: {
        required: "<span style='color:red''>请输入Email地址</span>",
        email: "<span style='color:red'>  请输入正确的email地址</span>"
       },
       password: {
        required: "<span style='color:red'>  请输入密码</span>",
        minlength: jQuery.format("<span style='color:red'>  您输入的密码不正确,应该在6位或6位字符以上</span>")
       },
       confirm_password: {
        required: "<span style='color:red'>请输入确认密码</span>",
        minlength: jQuery.format("<span style='color:red'>  您输入的密码不正确,应该在6位或6位字符以上</span>"),
        equalTo: "<span class='fred'>两次输入密码不一致</span>"
       }
      }
    });


})
</script>
</head>

<body>
<form action="" method="post" id="login" name="login">
        <label>用户名:</label><input name="username" id="username" type="text" />
        <hr>
        <label>邮件地址:</label><input name="email" type="text" />
        <hr>
        <label>密   码:</label><input  id="password" name="password" type="password"  />
        <hr>
        <label>确认密码:</label><input name="confirm_password" type="password" />
        <hr>
        <input name="userinfosub" type="submit" value="提交" />
    </form>

</body>
</html>       


</body>
</html>




<!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"  >
    <title>jQuery PlugIn - 表单验证插件实例 Validate </title>
<meta http-equiv="content-type" content="text/http;charset=utf-8">
    <link rel="stylesheet" type="text/css" href="../CSS/redmond/jquery-ui-1.7.1.custom.css" />
    <script type="text/javascript" src="../js/jquery-min-lastest.js"></script>
    <script type="text/javascript" src="../js/jquery-ui-all-min-lastest.js"></script>
    <script type="text/javascript" src="../js/plugin/validate/jquery.validate.pack.js"></script>
    <script type="text/javascript" src="../js/messages_cn.js"></script>
    <script type="text/javascript" src="../js/jquery.metadata.js"></script>


       

    </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>
<!--
在iput对象中书写class样式指定验证规则或属性验证规则:
-->
            <input id="cname" name="name" size="25" class="required" minlength="2" />
      
        <p>
<label for="cemail" class="slabel"><em class="textred">*</em> E-Mail:</label>
            <input id="cemail" name="email" size="25" class="required email"/>
       
        <p><label for="curl" class="slabel">网址:</label>           
            <input id="curl" name="url" size="25" class="required" value="" />
     
        <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><label for="ccomment" class="slabel"><em class="textred">*</em>mytest:</label>
       
<input type=”text” name="mytest" class="required telphoneValid"/>



 
    
    <p>
            <input class="submit" type="submit" value="提交" class="cancel" />
        </p>
    </fieldset>
    </form>
    <script type="text/javascript">
       /*==========用户自定义方法==========*/


       /*==========事件绑定==========*/
       $(function()
       {
jQuery.validator.addMethod("telphoneValid", function(value, element) {
    var tel = /^(130|131|132|133|134|135|136|137|138|139|150|153|157|158|159|180|187|188|189)\d{8}$/;
    return tel.test(value) || this.optional(element);
}, "请输入正确的手机号码");       });

       /*==========加载时执行的语句==========*/
       $(function()
       {
           $("#commentForm").validate(
   {
rules:
{
mytest:{email:true}
} ,
messages:
{
mytest:{required: "<span style='color:red'>  请输入密码</span>",
email:"电子邮件啊"
}
}
});
        });       
    </script>
</body>
</html>
  • 大小: 231 KB
分享到:
评论

相关推荐

    jquery validate 信息气泡提示

    在网页开发中,jQuery Validate 是一个非常常用的验证插件,用于对用户输入的数据进行校验,确保数据的有效性和完整性。这个插件可以帮助开发者创建复杂的表单验证规则,提高用户体验,减少服务器端的压力。结合 ...

    mysql 安装密码校验插件validate_password.docx

    以下是安装validate_password插件的详细步骤,以及相关的配置和使用方法。 1. **修改配置文件** 首先,你需要编辑MySQL的配置文件,通常位于`/etc/my.cnf`(根据你的操作系统和安装路径可能有所不同)。使用命令`...

    jquery validate默认错误提示显示位置修改

    ### 修改jQuery Validate默认错误提示显示位置 在网页开发过程中,表单验证是非常重要的一个环节,它不仅能够提高用户体验,还能确保数据的有效性和安全性。jQuery Validate插件是实现表单验证功能的一个强大工具,...

    jquery.validate使用攻略

    1. **引入库**:首先需要在页面中引入 jQuery 和 jQuery Validate 的库文件,通常是 `jquery.js` 和 `jquery.validate.js`。 2. **初始化插件**:在文档加载完成后,通过 `$("#formId").validate()` 来启用验证功能...

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

    `jquery.validate.js` 和 `jquery.validate.min.js` 就是这个插件的源码和压缩版。这个插件提供了一套强大的规则引擎,可以轻松地为表单元素添加验证规则,例如必填、邮箱格式、数字范围等,极大地提高了用户输入...

    jquery validate 使用详解

    ### jQuery Validate 插件使用详解 #### 一、概述 jQuery Validate 是一款强大的表单验证插件,基于 jQuery 框架开发而成。它能够帮助开发者轻松实现客户端表单验证功能,大大提高了用户体验并减少了服务器端的...

    validate方法

    标题中的"validate方法"通常指的是在编程中用于验证数据或对象的方法。这可能是为了确保输入的数据符合特定的格式、规则或者限制,以防止错误、安全问题或者数据不一致。在不同的编程语言和框架中,validate方法可能...

    jquery.validate 版本大全

    jquery.validate.1.9.0.min.js jquery.validate.1.12.0.min.js jquery.validate.1.13.1.min.js jquery.validate.1.16.0.min.js jquery.validate.1.14.0.min.js jquery.validate.1.15.1.min.js jquery.validate....

    jQueryValidate.rar

    《jQuery Validate插件详解及其应用》 在Web开发中,表单验证是不可或缺的一部分,它确保用户输入的数据符合预设的规则,提高了用户体验并减少了服务器端的负担。jQuery Validate插件是实现这一功能的强大工具,它...

    vue中使用vee-validate

    Vee-validate 是一个流行的 Vue.js 库,用于表单验证和字段验证。它提供了一种简洁的方式来处理用户输入的数据验证,使得在 Vue 应用中实现表单验证变得更加容易。以下是如何在 Vue 项目中引入并使用 vee-validate,...

    开源项目-lyft-protoc-gen-validate.zip

    【开源项目-lyft-protoc-gen-validate】是一个在IT领域中非常有价值的工具,尤其对于那些使用Protocol Buffers(简称protobuf)进行数据序列化的开发者来说。protobuf是由Google开发的一种高效的数据序列化协议,...

    jquery.validate.js 1.8.1 + 实例

    `jQuery Validate` 插件1.8.1版本提供了丰富的功能,包括基本的验证规则、自定义验证规则以及错误消息定制。 ### jQuery Validate 插件基础 `jQuery Validate` 的核心功能是验证表单字段,它通过添加额外的属性到 ...

    Python库 | validate_email_wt-1.4.5-py2.py3-none-any.whl

    在这个场景中,我们关注的是一个名为`validate_email_wt`的Python库,版本为1.4.5,它是一个`.whl`格式的文件。`.whl`文件是Python的预编译轮子包,用于简化安装过程,特别是对于那些不支持`pip`自动编译源码的环境...

    jquery validate 表单验证

    jQuery Validate插件是jQuery库的一个扩展,专门用于实现这样的功能。这个插件提供了一种简便的方式来对HTML表单进行验证,避免了服务器端不必要的负载。接下来,我们将深入探讨jQuery Validate的使用方法、核心概念...

    ajax验证用户名是否存在 与 rapid validate 的使用

    使用Rapid Validate可以帮助开发者在早期发现并修复问题,提升代码质量。 安装Rapid Validate通常通过npm(Node.js包管理器)进行: ```bash npm install -g rapid-validate ``` 使用时,在命令行中运行: ```...

    jq.validate文件

    `jquery.validate.js`是这个插件的核心文件,包含了所有验证功能的实现。 在网页开发中,数据验证是一个至关重要的环节,可以防止用户提交无效或不完整的数据。`jQuery Validate` 插件通过添加自定义的验证规则和...

    jquery.validate.js下载

    jquery.validate.js jquery.validate.js

    vue表单验证validate.min.js使用例子,formdata 文件上传表单提交

    `validate.min.js`是一个强大的表单验证库,它可以让我们自定义验证规则并提供中文错误提示,使得开发更加便捷。 首先,`validate.min.js`的使用通常涉及到以下步骤: 1. 引入`validate.min.js`库:在HTML文件中...

    jQuery Validate 1.1.2

    jQuery Validate 是一个强大的JavaScript库,专门用于前端表单验证,由jQuery团队开发并维护。它极大地简化了在网页上创建高效、用户友好的验证规则的过程,避免了开发者编写大量重复的验证代码。jQuery Validate ...

    jquery validate例子

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

Global site tag (gtag.js) - Google Analytics