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">
<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(" ").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插件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ExtJs非Iframe框架加载页面实现
- 下一篇： 人人开源使用笔记