<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FileSet.aspx.cs" Inherits="Lighters.Msg.test.FileSet" %>
<!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>
<style type="text/css">
.header
{
background-color: #CCCCCC;
color: White;
font-size: x-large;
}
.content
{
background-color: White;
font-weight: lighter;
font-size: small;
}
.content td
{
text-align: left;
}
.mandatory
{
color: Red;
}
.errorContainer
{
display: none;
margin-bottom: 20px;
}
.alertMsg
{
margin-left: 20px;
color: #660000;
}
.input-highlight
{
background-color: #CCCCCC;
}
</style>
<script src="../js/jquery-1.6.min.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>
<script src="../js/jquery.form.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
// 在這裏設置默認的操作行爲
$.validator.setDefaults({
highlight: function(input) {
$(input).addClass("input-highlight");
},
unhighlight: function(input) {
$(input).removeClass("input-highlight");
}
});
// 然後調用函數validate()開始對form校驗
$("#form1").validate({
rules: { txtName: "required",
// 驗證郵件格式是否正確，設置email屬性爲true
txtEmail: { required: true, email: true },
txtPassword: { required: true, minlength: 8 },
// 在這裏equalTo屬性的作用是驗證確認密碼必須和之前輸入的密碼相等
txtConfirmPwd: { required: true, minlength: 8, equalTo: "#txtPassword" },
// 驗證日期格式是否正確，設置date屬性爲true;
txtDOB: { required: true, date: true },
// 通過屬性maxlength設置文本最大長度
txtAddress1: { required: true, maxlength: 200 },
txtAddress2: { maxlength: 200 },
// digits屬性設置輸入的內容必須爲數字
txtPostal: { required: true, digits: true },
// url屬性驗證是否輸入爲合法的網址
txtWebsite: { url: true },
chkTandC: "required"
},
messages: { txtName: "請輸入您的姓名",
txtEmail: { required: "請輸入您的Email",
email: "請輸入一個合法的email地址"
},
txtPassword: { required: "請輸入您的密碼",
minlength: "密碼長度必須大於8"
},
txtConfirmPwd: { required: "請輸入您的確認密碼",
minlength: "確認的密碼長度必須大於8",
equalTo: "請保證輸入的密碼和確認的密碼要一樣"
},
txtDOB: { required: "請輸入您的生日",
date: "您輸入的生日日期格式不對"
},
txtAddress1: { required: "請輸入您的地址1",
maxlength: "您輸入的地址1長度不能超過200"
},
txtAddress2: { maxlength: "您輸入的地址1長度不能超過200" },
txtPostal: { required: "請輸入您的郵政編號",
digits: "您輸入的郵政編號必須都爲數字"
},
txtWebsite: { url: "請輸入一個合法的網址" },
chkTandC: { required: "請接受相關法律條款" }
},
wrapper: "li",
errorContainer: $("div.errorContainer"),
errorLabelContainer: $("#form1 p.alertMsg")
});
$("#btnReset").click(function(e) {
e.preventDefault();
// 這裏使用了插件form的resetForm()函數，恢復到第一次加載頁面的狀態
$("#form1").resetForm();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div align="center">
<div align="center" class="errorContainer">
<fieldset style="width: 550px;">
<p align="left" class="alertMsg">
這裏有一些錯誤註冊提示信息，根據提示請覈實您註冊信息格式是否正確：
</p>
</fieldset>
</div>
<fieldset style="width: 350px; height: 400px">
<table cellpadding="3" cellspacing="3" border="0" class="content">
<tr>
<td colspan="2" class="header" style="text-align: center;">
註冊用戶
</td>
</tr>
<tr>
<td>
用戶名<span class="mandatory">*</span>
</td>
<td>
<asp:TextBox ID="txtName" runat="server" width="130px"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Email<span class="mandatory">*</span>
</td>
<td>
<asp:TextBox ID="txtEmail" runat="server" width="130px"></asp:TextBox>
</td>
</tr>
<tr>
<td>
密碼<span class="mandatory">*</span>
</td>
<td>
<asp:TextBox ID="txtPassword" runat="server" TextMode="Password" width="130px"></asp:TextBox>
</td>
</tr>
<tr>
<td>
確認密碼<span class="mandatory">*</span>
</td>
<td>
<asp:TextBox ID="txtConfirmPwd" runat="server" TextMode="Password" width="130px"></asp:TextBox>
</td>
</tr>
<tr>
<td>
生日<span class="mandatory">*</span>
</td>
<td>
<asp:TextBox ID="txtDOB" runat="server" width="130px"></asp:TextBox>
</td>
</tr>
<tr>
<td>
地址1<span class="mandatory">*</span>
</td>
<td>
<asp:TextBox ID="txtAddress1" runat="server" width="130px"></asp:TextBox>
</td>
</tr>
<tr>
<td>
地址2
</td>
<td>
<asp:TextBox ID="txtAddress2" runat="server" width="130px"></asp:TextBox>
</td>
</tr>
<tr>
<td>
郵政編號<span class="mandatory">*</span>
</td>
<td>
<asp:TextBox ID="txtPostal" runat="server" width="130px"></asp:TextBox>
</td>
</tr>
<tr>
<td>
網站
</td>
<td>
<asp:TextBox ID="txtWebsite" runat="server" width="130px"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="2">
<asp:CheckBox ID="chkTandC" runat="server" />我接受相關法律條款
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<asp:Button ID="btnSubmit" Text="提交" runat="server" />
<asp:Button ID="btnReset" Text="重置" runat="server" />
</td>
</tr>
</table>
</fieldset>
</div>
</form>
</body>
</html>
jquery 表單驗證
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章