代码改变世界

jQuery验证validate插件

2010-01-22 19:13  三皮开发时  阅读(427)  评论(0)  编辑  收藏  举报

灰常好用

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">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

    <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("&nbsp;").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" onclick="btn_Click" />
    </div>
    </form>
</body>
</html>

 

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