<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="WebApplication1.index" %>
<!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>
<!--css,能夠修改的。依據從www.jquery.com上面下載下傳的插件修改的-->
<link href="css/screen.css" rel="stylesheet" type="text/css" />
<script src="lib/jquery.js" type="text/javascript"></script>
<script src="dist/jquery.validate.min.js" type="text/javascript"></script>
<!--資訊漢化-->
<script src="src/localization/messages_zh.js" type="text/javascript"></script>
<style type="text/css">
.style1
{
width: 50%; border:1px solid #cccccc; border-collapse:collapse; font-size:12px;
}
.style1 td{ border:1px solid #cccccc; height:25px; }
input{ border:1px solid #cccccc; height:20px;}
#Select1
height: 20px;
width: 150px;
.success {
background:url("images/checked.gif") no-repeat 0px 0px;
padding-left: 16px;
</style>
<script type="text/javascript">
//自己定義方法
//addMethod("驗證方法名")
$.validator.addMethod("checkHometown", function (value, element) {
return value == "請選擇籍貫" ?
false : true;
}, "請選擇籍貫");
//驗證手機号碼的自己定義方法
$.validator.addMethod("checkMobile", function (value, element) {
var myreg = /^(((13[0-9]{1})|159|153)+\d{8})$/; //手機号碼正則
if (myreg.test(value)) {
return true;
}
else {
return false;
}, "手機格式不正确");
$(function () {
$("#signupForm1").validate({
rules: {
uname: { required: true, minlength: 3, maxlength: 10,
remote: "check_user_exists.ashx" //調用ajax使用一般處理程式，做使用者驗證，參數自己幫你傳了，通常是參數名(控件名)=值
},
password: { required: true, minlength: 3, maxlength: 20 },
confirmPassword: { required: true, equalTo: "#password" },
homeTown: { checkHometown: true },
email: { required: true },
mobile: { required: true, checkMobile: true }//checkMobile是上面自定義的方法
},
success: function (label) {
label.text(" ").addClass("success"); //驗證成功
messages: {
uname: { remote: "username不可用" },
password: { required: "請輸入password", minlength: "password長度不少于3個", maxlength: "password長度不多于20" },
confirmPassword: { equalTo: "password不比對" }
submitHandler: function () {
alert("加入"); //送出到server
}
});
});
</script>
</head>
<body>
<form id="signupForm1" runat="server" >
<h1>驗證架構Demo</h1>
<div>
<table class="style1">
<tr>
<td>
username</td>
<input id="uname" name="uname" type="text" /></td>
</tr>
password</td>
<input id="password" name="password" type="password" /></td>
确認password</td>
<input id="confirmPassword" name="confirmPassword" type="password" /></td>
籍貫</td>
<select id="homeTown" name="homeTown">
<option value="請選擇籍貫">請選擇籍貫</option>
<option value="湖南">湖南</option>
<option value="湖北">湖北</option>
<option value="江西">江西</option>
</select></td>
Email</td>
<input id="email" type="email" name="email" /></td>
手機号碼</td>
<input id="mobile" name="mobile" type="text"/></td>
&nbsp;</td>
<input type="submit" value="Submit"/>
</td>
</table>
</div>
</form>
</body>
</html>
源我不知道如何上傳代碼，有需要的可以聯系我：[email protected]
版權聲明：本文部落客原創文章。部落格，未經同意不得轉載。
本文轉自mfrbuaa部落格園部落格，原文連結：http://www.cnblogs.com/mfrbuaa/p/4865972.html，如需轉載請自行聯系原作者
![JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明 三、函數的調用[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)