jQuery验证validate插件

灰常好用

jquery.validate.js

当然还是用插件....

别忘记引用JQuery 自带类库

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

使用前介绍下label属性

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

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

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

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

<label for="t1">姓名：</label>
<input id="t1" type="text" />

记：是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>