使用jQuery.Validate(1)
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo1.aspx.cs" Inherits="Web.Ajax.Validate.Demo1" %>
<!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>
<script src="http://www.cnblogs.com/scripts/jquery.js" type="text/javascript"></script>
<script src="http://www.cnblogs.com/scripts/jquery.validate.js" type="text/javascript"></script>
<style type="text/css">
* { margin: 0; padding: 0; }
body, input, select, textarea { font-family: verdana, arial, helvetica, sans-serif; font-size: 11px; }
input{height:14px;padding:2px;}
.label{line-height:18px;}
body { color: #333; background-color: #fff; text-align: left; }
#signupform table { border-spacing: 0px;border-collapse: collapse;empty-cells: show;}
#signupform .label {padding-top: 2px;padding-right: 8px;vertical-align: top;text-align: right;width: 125px;white-space: nowrap;}
#signupform .field {padding-bottom: 10px;white-space: nowrap;}
#signupform .status {padding-top: 2px;padding-left: 8px;vertical-align: top;width: 246px;white-space: nowrap;}
#signupform .textfield {width: 150px;}
#signupform label.error {background:url("http://www.cnblogs.com/images/unchecked.gif") no-repeat 0px 0px;padding-left: 16px;
padding-bottom: 2px;font-weight: bold;color: #EA5200;line-height:18px;}
#signupform label.checked {background:url("http://www.cnblogs.com/images/checked.gif") no-repeat 0px 0px;}
#signupform .success_msg {font-weight: bold;color: #0060BF;margin-left: 19px;}
#signupform #dateformatStatus, #signupform #termsStatus {margin-left: 6px;}
#signupform #dateformat_eu {vertical-align: middle;}
#signupform #ldateformat_eu {font-weight: normal;vertical-align: middle;}
#signupform #dateformat_am {vertical-align: middle;}
#signupform #ldateformat_am {font-weight: normal;vertical-align: middle;}
#signupform #termswrap {float: left;}
#signupform #terms {vertical-align: middle;float: left;display: block;margin-right: 5px;}
#signupform #lterms {font-weight: normal;vertical-align: middle;float: left;display: block;width: 350px;white-space: normal;}
#signupform #lsignupsubmit {visibility: hidden;}
#signupform #signupsubmit {height:24px;}
</style>
<script id="demo" type="text/javascript">
$(document).ready(function() {
// validate signup form on keyup and submit
var validator = $("#signupform").validate({
rules: {
firstname: "required",
lastname: "required",
username: {
required: true,
minlength: 2,
remote: "demo1.aspx"
},
password: {
required: true,
minlength: 5
},
password_confirm: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true,
remote: "demo1.aspx"
},
dateformat: "required",
terms: "required"
},
messages: {
firstname: "Enter your firstname",
lastname: "Enter your lastname",
username: {
required: "Enter a username",
minlength: jQuery.format("Enter at least {0} characters"),
remote: jQuery.format("{0} is already in use")
},
password: {
required: "Provide a password",
rangelength: jQuery.format("Enter at least {0} characters")
},
password_confirm: {
required: "Repeat your password",
minlength: jQuery.format("Enter at least {0} characters"),
equalTo: "Enter the same password as above"
},
email: {
required: "Please enter a valid email address",
minlength: "Please enter a valid email address",
remote: jQuery.format("{0} is already in use")
},
dateformat: "Choose your preferred dateformat",
terms: "Required"
},
// the errorPlacement has to take the table layout into account
errorPlacement: function(error, element) {
if ( element.is(":radio") )
error.appendTo( element.parent().next().next() );
else if ( element.is(":checkbox") )
error.appendTo ( element.next() );
else
error.appendTo( element.parent().next() );
},
// specifying a submitHandler prevents the default submit, good for the demo
submitHandler: function() {
alert("submitted!");
},
// set this class to error-labels to indicate valid fields
success: function(label) {
// set as text for IE
label.html(" ").addClass("checked");
}
});
// propose username by combining first- and lastname
$("#username").focus(function() {
var firstname = $("#firstname").val();
var lastname = $("#lastname").val();
if(firstname && lastname && !this.value) {
this.value = firstname + "." + lastname;
}
});
jQuery("#reset").click(function() {
validator.resetForm();
});
});
</script>
</head>
<body>
<form id="signupform" runat="server">
<table>
<tr>
<td class="label"><label id="lfirstname" for="firstname">First Name</label></td>
<td class="field"><input id="firstname" name="firstname" type="text" value="" maxlength="100" /></td>
<td class="status"></td>
</tr>
<tr>
<td class="label"><label id="llastname" for="lastname">Last Name</label></td>
<td class="field"><input id="lastname" name="lastname" type="text" value="" maxlength="100" /></td>
<td class="status"></td>
</tr>
<tr>
<td class="label"><label id="lusername" for="username">Username</label></td>
<td class="field"><input id="username" name="username" type="text" value="" maxlength="50" /></td>
<td class="status"></td>
</tr>
<tr>
<td class="label"><label id="lpassword" for="password">Password</label></td>
<td class="field"><input id="password" name="password" type="password" maxlength="50" value="" /></td>
<td class="status"></td>
</tr>
<tr>
<td class="label"><label id="lpassword_confirm" for="password_confirm">Confirm Password</label></td>
<td class="field"><input id="password_confirm" name="password_confirm" type="password" maxlength="50" value="" /></td>
<td class="status"></td>
</tr>
<tr>
<td class="label"><label id="lemail" for="email">Email Address</label></td>
<td class="field"><input id="email" name="email" type="text" value="" maxlength="150" /></td>
<td class="status"></td>
</tr>
<tr>
<td class="label"><label>Which Looks Right</label></td>
<td class="field" colspan="2" style="vertical-align: top;">
<table>
<tr>
<td style="padding-right: 5px;line-height:20px;">
<input id="dateformat_eu" name="dateformat" type="radio" value="0" />
<label id="ldateformat_eu" for="dateformat_eu">14/02/07</label>
</td>
<td style="padding-left: 5px;">
<input id="dateformat_am" name="dateformat" type="radio" value="1" />
<label id="ldateformat_am" for="dateformat_am">02/14/07</label>
</td>
<td class="status"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="label"> </td>
<td class="field" colspan="2">
<div id="termswrap" style="line-height:18px;">
<input id="terms" type="checkbox" name="terms" style="margin-top:3px;"/>
<label id="lterms" for="terms">I have read and accept the Terms of Use.</label>
</div>
<div class="status"></div>
</td>
</tr>
<tr>
<td class="label"><label id="lsignupsubmit" for="signupsubmit">Signup</label></td>
<td class="field" colspan="2">
<input id="signupsubmit" name="signup" type="submit" value="Signup" />
<button id="reset">Reset</button>
</td>
</tr>
</table>
</form>
</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>
<script src="http://www.cnblogs.com/scripts/jquery.js" type="text/javascript"></script>
<script src="http://www.cnblogs.com/scripts/jquery.validate.js" type="text/javascript"></script>
<style type="text/css">
* { margin: 0; padding: 0; }
body, input, select, textarea { font-family: verdana, arial, helvetica, sans-serif; font-size: 11px; }
input{height:14px;padding:2px;}
.label{line-height:18px;}
body { color: #333; background-color: #fff; text-align: left; }
#signupform table { border-spacing: 0px;border-collapse: collapse;empty-cells: show;}
#signupform .label {padding-top: 2px;padding-right: 8px;vertical-align: top;text-align: right;width: 125px;white-space: nowrap;}
#signupform .field {padding-bottom: 10px;white-space: nowrap;}
#signupform .status {padding-top: 2px;padding-left: 8px;vertical-align: top;width: 246px;white-space: nowrap;}
#signupform .textfield {width: 150px;}
#signupform label.error {background:url("http://www.cnblogs.com/images/unchecked.gif") no-repeat 0px 0px;padding-left: 16px;
padding-bottom: 2px;font-weight: bold;color: #EA5200;line-height:18px;}
#signupform label.checked {background:url("http://www.cnblogs.com/images/checked.gif") no-repeat 0px 0px;}
#signupform .success_msg {font-weight: bold;color: #0060BF;margin-left: 19px;}
#signupform #dateformatStatus, #signupform #termsStatus {margin-left: 6px;}
#signupform #dateformat_eu {vertical-align: middle;}
#signupform #ldateformat_eu {font-weight: normal;vertical-align: middle;}
#signupform #dateformat_am {vertical-align: middle;}
#signupform #ldateformat_am {font-weight: normal;vertical-align: middle;}
#signupform #termswrap {float: left;}
#signupform #terms {vertical-align: middle;float: left;display: block;margin-right: 5px;}
#signupform #lterms {font-weight: normal;vertical-align: middle;float: left;display: block;width: 350px;white-space: normal;}
#signupform #lsignupsubmit {visibility: hidden;}
#signupform #signupsubmit {height:24px;}
</style>
<script id="demo" type="text/javascript">
$(document).ready(function() {
// validate signup form on keyup and submit
var validator = $("#signupform").validate({
rules: {
firstname: "required",
lastname: "required",
username: {
required: true,
minlength: 2,
remote: "demo1.aspx"
},
password: {
required: true,
minlength: 5
},
password_confirm: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true,
remote: "demo1.aspx"
},
dateformat: "required",
terms: "required"
},
messages: {
firstname: "Enter your firstname",
lastname: "Enter your lastname",
username: {
required: "Enter a username",
minlength: jQuery.format("Enter at least {0} characters"),
remote: jQuery.format("{0} is already in use")
},
password: {
required: "Provide a password",
rangelength: jQuery.format("Enter at least {0} characters")
},
password_confirm: {
required: "Repeat your password",
minlength: jQuery.format("Enter at least {0} characters"),
equalTo: "Enter the same password as above"
},
email: {
required: "Please enter a valid email address",
minlength: "Please enter a valid email address",
remote: jQuery.format("{0} is already in use")
},
dateformat: "Choose your preferred dateformat",
terms: "Required"
},
// the errorPlacement has to take the table layout into account
errorPlacement: function(error, element) {
if ( element.is(":radio") )
error.appendTo( element.parent().next().next() );
else if ( element.is(":checkbox") )
error.appendTo ( element.next() );
else
error.appendTo( element.parent().next() );
},
// specifying a submitHandler prevents the default submit, good for the demo
submitHandler: function() {
alert("submitted!");
},
// set this class to error-labels to indicate valid fields
success: function(label) {
// set as text for IE
label.html(" ").addClass("checked");
}
});
// propose username by combining first- and lastname
$("#username").focus(function() {
var firstname = $("#firstname").val();
var lastname = $("#lastname").val();
if(firstname && lastname && !this.value) {
this.value = firstname + "." + lastname;
}
});
jQuery("#reset").click(function() {
validator.resetForm();
});
});
</script>
</head>
<body>
<form id="signupform" runat="server">
<table>
<tr>
<td class="label"><label id="lfirstname" for="firstname">First Name</label></td>
<td class="field"><input id="firstname" name="firstname" type="text" value="" maxlength="100" /></td>
<td class="status"></td>
</tr>
<tr>
<td class="label"><label id="llastname" for="lastname">Last Name</label></td>
<td class="field"><input id="lastname" name="lastname" type="text" value="" maxlength="100" /></td>
<td class="status"></td>
</tr>
<tr>
<td class="label"><label id="lusername" for="username">Username</label></td>
<td class="field"><input id="username" name="username" type="text" value="" maxlength="50" /></td>
<td class="status"></td>
</tr>
<tr>
<td class="label"><label id="lpassword" for="password">Password</label></td>
<td class="field"><input id="password" name="password" type="password" maxlength="50" value="" /></td>
<td class="status"></td>
</tr>
<tr>
<td class="label"><label id="lpassword_confirm" for="password_confirm">Confirm Password</label></td>
<td class="field"><input id="password_confirm" name="password_confirm" type="password" maxlength="50" value="" /></td>
<td class="status"></td>
</tr>
<tr>
<td class="label"><label id="lemail" for="email">Email Address</label></td>
<td class="field"><input id="email" name="email" type="text" value="" maxlength="150" /></td>
<td class="status"></td>
</tr>
<tr>
<td class="label"><label>Which Looks Right</label></td>
<td class="field" colspan="2" style="vertical-align: top;">
<table>
<tr>
<td style="padding-right: 5px;line-height:20px;">
<input id="dateformat_eu" name="dateformat" type="radio" value="0" />
<label id="ldateformat_eu" for="dateformat_eu">14/02/07</label>
</td>
<td style="padding-left: 5px;">
<input id="dateformat_am" name="dateformat" type="radio" value="1" />
<label id="ldateformat_am" for="dateformat_am">02/14/07</label>
</td>
<td class="status"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="label"> </td>
<td class="field" colspan="2">
<div id="termswrap" style="line-height:18px;">
<input id="terms" type="checkbox" name="terms" style="margin-top:3px;"/>
<label id="lterms" for="terms">I have read and accept the Terms of Use.</label>
</div>
<div class="status"></div>
</td>
</tr>
<tr>
<td class="label"><label id="lsignupsubmit" for="signupsubmit">Signup</label></td>
<td class="field" colspan="2">
<input id="signupsubmit" name="signup" type="submit" value="Signup" />
<button id="reset">Reset</button>
</td>
</tr>
</table>
</form>
</body>
</html>
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 Demo1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (Request["username"] != null)
{
string user = string.Format("|{0}|", Request["username"]);
string rtn = "true";
if ("|admin|hxh|huangxh|".IndexOf(user) != -1)
rtn = "false";
Response.Clear();
Response.Write(rtn);
Response.End();
}
else if (Request["email"] != null)
{
string rtn = "true";
if (Request["email"] == "demo@163.com")
rtn = "false";
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 Demo1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (Request["username"] != null)
{
string user = string.Format("|{0}|", Request["username"]);
string rtn = "true";
if ("|admin|hxh|huangxh|".IndexOf(user) != -1)
rtn = "false";
Response.Clear();
Response.Write(rtn);
Response.End();
}
else if (Request["email"] != null)
{
string rtn = "true";
if (Request["email"] == "demo@163.com")
rtn = "false";
Response.Clear();
Response.Write(rtn);
Response.End();
}
}
}
}
