jQuery验证validate插件

灰常好用

jquery.validate.js

当然还是用插件....

别忘记引用JQuery 自带类库

-------------------------------------------

使用前介绍下label属性

当用label标签把一段文本和一个控件绑定之后，用户点击文本，相关的控件就会获得焦点。

隐式绑定不需使用for属性，直接把文本和控件嵌入在<label>标签中就行了。如：

<label>姓名：<input type="text" /></label>
显式绑定：

显式绑定下，文本嵌入在<label>标签中，控件定义在<label>标签外，用for属性把两者绑定起来。如：

记：是for它的ID
另外 JQuery代码 rules:{ password:(这里指name 强烈建议将id 和 name 都写并且都一致)}
---------------------------------------------

Login验证

------------------------------------------------

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title></title>
    <script src="jquery-min-lastest.js" type="text/javascript"></script>
    <script src="jquery.validate.js" type="text/javascript"></script>

    <script type="text/javascript" language="javascript">
        $(document).ready(function() {
            $("#form1").validate({
                rules: {
                    password: {
                        required: true,
                        minlength: 5
                    },
                    pwdagain: {
                        required: true,
                        minlength: 5,
                        equalTo: "#password"
                    },
                    email: {
                        required: true,
                        email: true,
                        remote: "emails.php"
                    }
                },
                messages: {
                    password: {
                    required: "Provide a password",
                        minlength:jQuery.format("最少5个字符"),
                        rangelength: jQuery.format("sdf")
                    },
                    email: {
                        required: "请输入有效Email地址"
                    },
                    pwdagain: {
                        required: "重复你的密码",
                        minlength: jQuery.format("最少5个"),
                        equalTo: "请保持一致"
                    }
                },
                success: function(label) {
                    label.html(" ").addClass("checked");
                }
            })
        })

    </script>
    <style type="text/css">

    #form1 .label {
padding-top: 2px;
padding-right: 8px;
vertical-align: top;
text-align: right;
width: 25px;
white-space: nowrap;
}
#form1 label.error {
background:url("images/unchecked.gif") no-repeat 0px 0px;
padding-left: 16px;
padding-bottom: 2px;
font-weight: bold;
color: #EA5200;
}
#form1 label.checked
{
background-image:url(images/checked.gif) ;
background-repeat:no-repeat;
}

</style>

</head>
<body>
    <form id="form1" runat="server">
    <div>
    <label >密码: <input type="text" id="password" maxlength="50" runat="server" /></label>
<br />
    重复密码:<input type="text" id="pwdagain" name="pwdagain" maxlength="50" /><br />

    <br />
   电话: <input type="text" id="tel" name="telephone" />
   <br />
    <asp:Button ID="btn" runat="server" Text="Test" οnclick="btn_Click" />
    </div>
    </form>
</body>
</html>

----------------------------------------------------------------------

转载于:https://www.cnblogs.com/sanpi/archive/2010/01/22/1654408.html

jQuery验证validate插件相关推荐

jQuery的Validate插件
Validate插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求. 该插件捆绑了一套有用的验证方法,包括URL和电子邮件验证,同时提供了一个 ...
Jquery中使用Validate插件使表单验证更加简单
场景效果介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 UR ...
jquery的validate表单验证表单注册插件
这款插件非常好用! 首先导入插件: <script src="js/jquery.validate.min.js" type="text/javascript&qu ...
jQuery之validate验证表单
访问jQuery validate官网下载最新插件 https://jqueryvalidation.org/ validate是用来验证表单的以前我们都是用js手动验证现在可以通过这个插件直接调 ...
ajax 阻止默认提交,jQuery验证插件：在对ajax调用servlet时，submitHandler不会阻止默认提交-返回false无效...
我有一个使用jquery和servlet的简单表单.jQuery对Servlet进行Ajax调用,然后Servlet进行一些服务器端计算,然后通过jQuery在同一页面上显示结果.我不希望表单进行默认 ...
jQuery验证插件
jQuery验证插件原文:jQuery验证插件学习要点: 1.使用 validate.js 插件 2.默认验证规则 3.validate()方法和选项 4.validate.js 其他功能验证插 ...
jQuery验证表单插件——jquery-validation
jQuery验证表单插件--jquery-validation The jQuery Validation Plugin provides drop-in validation for your ex ...
jQuery validate插件submitHandler提交导致死循环解决方法
作者:海底苍鹰地址:http://blog.51yip.com/jsjquery/1511.html dom对像的提交form.submit();和jquery对像的提交$('').submit() ...
Jquery插件入门之Validate插件的简单使用
目录一.jQuery插件 1.jQuery插件概述 2.Validate插件一.jQuery插件 1.jQuery插件概述 jQuery插件机制概述 jQuery插件的机制很简单,就是利用jQue ...

jQuery验证validate插件

jQuery验证validate插件相关推荐

最新文章

热门文章