使用jQuery.Validate(2)
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Web.Ajax.Validate
{
public partial class AjaxLogin : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (Request["user"] != null && Request["password"] != null)
{
string rtn = "";
if (Request["user"] == "admin" && Request["password"] == "admin")
{
rtn = "Login success !";
}
else
{
rtn = "Your user or password is wrong (must be admin).";
}
Response.Clear();
Response.Write(rtn);
Response.End();
}
}
}
}
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Web.Ajax.Validate
{
public partial class AjaxLogin : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (Request["user"] != null && Request["password"] != null)
{
string rtn = "";
if (Request["user"] == "admin" && Request["password"] == "admin")
{
rtn = "Login success !";
}
else
{
rtn = "Your user or password is wrong (must be admin).";
}
Response.Clear();
Response.Write(rtn);
Response.End();
}
}
}
}
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxLogin.aspx.cs" Inherits="Web.Ajax.Validate.AjaxLogin" %>
<!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>
<title></title>
<style type="text/css">
body, div { font-family: 'lucida grande', helvetica, verdana, arial, sans-serif }
.warning { color: red; }
form{margin:0;padding:0;}
fieldset {padding:8px;width:688px;}
legend {padding:0;color:#000;}
input, textarea, select {margin:0;font-size:100%;font-family:inherit;width:168px;border:1px solid #A3C6D4;}
select { padding: 0; }
form.cmxform {width:370px;font-size:1.0em;color:#333;}
form.cmxform label.error, label.error {color: red;font-style: italic}
div.error { display: none; }
input:focus { border: 1px dotted black; }
input.error { border: 1px solid red; }
form.cmxform .gray * { color: gray; }
</style>
<script src="http://www.cnblogs.com/scripts/jquery.js" type="text/javascript"></script>
<script src="http://www.cnblogs.com/scripts/jquery.form.js" type="text/javascript"></script>
<script src="http://www.cnblogs.com/scripts/jquery.validate.js" type="text/javascript"></script>
<script src="http://www.cnblogs.com/scripts/cmxforms.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function() {
// show a simple loading indicator
var loader = jQuery('<div id="loader"><img src="http://www.cnblogs.com/images/loading.gif" alt="loading
" /></div>')
.css({ position: "relative", top: "1em", left: "25em" })
.appendTo("body")
.hide();
jQuery().ajaxStart(function() {
loader.show();
}).ajaxStop(function() {
loader.hide();
}).ajaxError(function(a, b, e) {
throw e;
});
var v = jQuery("#form").validate({
submitHandler: function(form) {
jQuery(form).ajaxSubmit({
target: "#result"
});
}
});
jQuery("#reset").click(function() {
v.resetForm();
});
});
</script>
</head>
<body>
<form method="post" class="cmxform" id="form" action="ajaxlogin.aspx">
<fieldset>
<legend>Login Form (Enter "admin" as password)</legend>
<p>
<label for="user">Username</label>
<input id="user" name="user" title="Please enter your username (at least 3 characters)" class="required" minlength="3" />
</p>
<p>
<label for="pass">Password</label>
<input type="password" name="password" id="password" class="required" minlength="5" />
</p>
<p>
<input class="submit" type="submit" value="Login"/>
</p>
</fieldset>
</form>
<div id="result">Please login!</div>
<br/>
<button id="reset">Programmatically reset above form!</button>
</body>
</html>
<!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>
<title></title>
<style type="text/css">
body, div { font-family: 'lucida grande', helvetica, verdana, arial, sans-serif }
.warning { color: red; }
form{margin:0;padding:0;}
fieldset {padding:8px;width:688px;}
legend {padding:0;color:#000;}
input, textarea, select {margin:0;font-size:100%;font-family:inherit;width:168px;border:1px solid #A3C6D4;}
select { padding: 0; }
form.cmxform {width:370px;font-size:1.0em;color:#333;}
form.cmxform label.error, label.error {color: red;font-style: italic}
div.error { display: none; }
input:focus { border: 1px dotted black; }
input.error { border: 1px solid red; }
form.cmxform .gray * { color: gray; }
</style>
<script src="http://www.cnblogs.com/scripts/jquery.js" type="text/javascript"></script>
<script src="http://www.cnblogs.com/scripts/jquery.form.js" type="text/javascript"></script>
<script src="http://www.cnblogs.com/scripts/jquery.validate.js" type="text/javascript"></script>
<script src="http://www.cnblogs.com/scripts/cmxforms.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function() {
// show a simple loading indicator
var loader = jQuery('<div id="loader"><img src="http://www.cnblogs.com/images/loading.gif" alt="loading
" /></div>').css({ position: "relative", top: "1em", left: "25em" })
.appendTo("body")
.hide();
jQuery().ajaxStart(function() {
loader.show();
}).ajaxStop(function() {
loader.hide();
}).ajaxError(function(a, b, e) {
throw e;
});
var v = jQuery("#form").validate({
submitHandler: function(form) {
jQuery(form).ajaxSubmit({
target: "#result"
});
}
});
jQuery("#reset").click(function() {
v.resetForm();
});
});
</script>
</head>
<body>
<form method="post" class="cmxform" id="form" action="ajaxlogin.aspx">
<fieldset>
<legend>Login Form (Enter "admin" as password)</legend>
<p>
<label for="user">Username</label>
<input id="user" name="user" title="Please enter your username (at least 3 characters)" class="required" minlength="3" />
</p>
<p>
<label for="pass">Password</label>
<input type="password" name="password" id="password" class="required" minlength="5" />
</p>
<p>
<input class="submit" type="submit" value="Login"/>
</p>
</fieldset>
</form>
<div id="result">Please login!</div>
<br/>
<button id="reset">Programmatically reset above form!</button>
</body>
</html>
