有关Jquery Validator的使用
<%@ 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: "用户名不可用" },
password: { required: "请输入密码", minlength: "密码长度不少于3个", maxlength: "密码长度不多于20" },
confirmPassword: { equalTo: "密码不匹配" }
},
submitHandler: function () {
alert("添加"); //提交到服务器
}
});
});
</script>
</head>
<body>
<form id="signupForm1" runat="server" >
<h1>验证框架Demo</h1>
<div>
<table class="style1">
<tr>
<td>
用户名</td>
<td>
<input id="uname" name="uname" type="text" /></td>
</tr>
<tr>
<td>
密码</td>
<td>
<input id="password" name="password" type="password" /></td>
</tr>
<tr>
<td>
确认密码</td>
<td>
<input id="confirmPassword" name="confirmPassword" type="password" /></td>
</tr>
<tr>
<td>
籍贯</td>
<td>
<select id="homeTown" name="homeTown">
<option value="请选择籍贯">请选择籍贯</option>
<option value="湖南">湖南</option>
<option value="湖北">湖北</option>
<option value="江西">江西</option>
</select></td>
</tr>
<tr>
<td>
Email</td>
<td>
<input id="email" type="email" name="email" /></td>
</tr>
<tr>
<td>
手机号码</td>
<td>
<input id="mobile" name="mobile" type="text"/></td>
</tr>
<tr>
<td>
</td>
<td>
<input type="submit" value="Submit"/>
</td>
</tr>
</table>
</div>
</form>
</body>
<!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: "用户名不可用" },
password: { required: "请输入密码", minlength: "密码长度不少于3个", maxlength: "密码长度不多于20" },
confirmPassword: { equalTo: "密码不匹配" }
},
submitHandler: function () {
alert("添加"); //提交到服务器
}
});
});
</script>
</head>
<body>
<form id="signupForm1" runat="server" >
<h1>验证框架Demo</h1>
<div>
<table class="style1">
<tr>
<td>
用户名</td>
<td>
<input id="uname" name="uname" type="text" /></td>
</tr>
<tr>
<td>
密码</td>
<td>
<input id="password" name="password" type="password" /></td>
</tr>
<tr>
<td>
确认密码</td>
<td>
<input id="confirmPassword" name="confirmPassword" type="password" /></td>
</tr>
<tr>
<td>
籍贯</td>
<td>
<select id="homeTown" name="homeTown">
<option value="请选择籍贯">请选择籍贯</option>
<option value="湖南">湖南</option>
<option value="湖北">湖北</option>
<option value="江西">江西</option>
</select></td>
</tr>
<tr>
<td>
Email</td>
<td>
<input id="email" type="email" name="email" /></td>
</tr>
<tr>
<td>
手机号码</td>
<td>
<input id="mobile" name="mobile" type="text"/></td>
</tr>
<tr>
<td>
</td>
<td>
<input type="submit" value="Submit"/>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
源代码不知道怎么上传，有需要的可以联系我：[email protected]