jQuery.Validate 使用例子
刘修能
苦于验证的烦恼，所以需要学习一下jQuery.Validate，但一开始竟无从下手，看官方的例子也不明白（个人英语不行，理解能力也相当有限）。
看到http://www.cnblogs.com/kyo-yo/archive/2010/06/28/Use-jQueryValidate-To-Validate-Client.html的文章，对自己的理解有很大的帮助，但还是有点麻烦，我喜欢直来直往的说，傻瓜试的应用。所以，我想写下这些东西，供以后自己回看。
首先，建立一个最简单的例子。
页面
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="register.aspx.cs" Inherits="Web.register" %>
<!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>
<link href="commonCss/index.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="commonCss/common.css" />
<link rel="stylesheet" type="text/css" href="commonCss/register.css" /><link rel="stylesheet" type="text/css" href="commonCss/msgbox.css" /><script type="text/javascript" src="jquery_validate/jquery-1.5.2.js"></script>
<script type="text/javascript" src="js/msgbox.js"></script>
<script type="text/javascript" src="jquery_validate/jquery.validate1.js"></script>
<script type="text/javascript" src="jquery_validate/jQuery.validate.message_cn.js"></script>
<script type="text/javascript" src="jquery_validate/jquery.metadata.js"></script>
<script type="text/javascript" src="jquery_validate/jquery.validate.extension.js"></script>
<script type="text/javascript" src="jquery_validate/cmxforms.js"></script>
<script type="text/javascript" src="js/register.js"></script>
</head>
<body>
<form id="form1" runat="server">
<!--头部start-->
<div id="head">
<div id="userInfo">
<a href="login.aspx">登录</a>
<a href="register.aspx">注册</a>
<a href="#">找回密码</a>
</div>
<div id="titleUL">
<div style="float:left;">微力量</div>
<div id="headMenu">
<ul>
<a href="index.aspx"><li>首页</li></a>
<a href="#"><li>功能介绍</li></a>
<a href="#"><li>日志</li></a>
<a href="#"><li>帮助</li></a>
<a href="#"><li>关于我们</li></a>
</ul>
</div>
</div>
</div>
<!--头部end-->
<!--中部start-->
<div id="content" class="box">
<div class="box" style="margin-bottom:10px; padding-left:90px;">
<h1>立即注册</h1>
已有账户，<a href="login.aspx" title="现在就去登录">现在登录</a>
</div>
<div id="RegisterInfo">
<div class="box item">
<div class="L">帐号：</div>
<div class="R">
<asp:TextBox ID="txtAccounts" CssClass="inputBox" runat="server"></asp:TextBox><span></span>
</div>
</div>
<div class="box item">
<div class="L">密码：</div>
<div class="R">
<asp:TextBox ID="txtPass" TextMode="Password" CssClass="inputBox" runat="server"></asp:TextBox><span></span>
</div>
</div>
<div class="box item">
<div class="L">确认密码：</div>
<div class="R">
<asp:TextBox ID="txtAgain" TextMode="Password" CssClass="inputBox" runat="server"></asp:TextBox><span></span>
</div>
</div>
<div class="box item">
<div class="L">联系人：</div>
<div class="R">
<asp:TextBox ID="txtContacts" CssClass="inputBox" runat="server"></asp:TextBox><span></span>
</div>
</div>
<div class="box item">
<div class="L">电话：</div>
<div class="R">
<asp:TextBox ID="txtPhone" CssClass="inputBox" runat="server"></asp:TextBox><span></span>
</div>
</div>
<div class="box item">
<div class="L">手机：</div>
<div class="R">
<asp:TextBox ID="txtMobile" CssClass="inputBox" runat="server"></asp:TextBox><span></span>
</div>
</div>
<div class="box item">
<div class="L">Email：</div>
<div class="R">
<asp:TextBox ID="txtEmail" CssClass="inputBox" runat="server"></asp:TextBox><span></span>
</div>
</div>
<div class="box item">
<div class="L">验证码：</div>
<div class="R">
<asp:TextBox ID="txtCode" CssClass="inputBox" runat="server"></asp:TextBox><span>
<script type="text/javascript" language="JavaScript">
var numkey = Math.random();
numkey = Math.round(numkey * 10000);
document.write("<img src=\"../ValidateCode.aspx?k=" + numkey + "\" width=\"60\" onClick=\"this.src+=Math.random()\" title=\"图片看不清？点击重新得到验证码\" style=\"cursor:pointer;margin-bottom:-10px;\" height=\"30\" hspace=\"4\" />");
</script>
</span>
</div>
</div>
<div class="box item">
<div class="L"></div>
<div class="R">
<asp:Button ID="btnInput" style="font-size:20px;" CssClass="btnGreen"
runat="server" Text="注册" οnclick="btnInput_Click" />
</div>
</div>
</div>
<div id="Pic">
<img src="images/wxIntr.png" />
</div>
</div>
<!--中部end-->
<!--底部start-->
<div id="footer">
Copyright©2013 WeiLiLiang.COM All Rights Reserved 微力量 版权所有
隐私权政策 粤ICP备13008261号
</div>
<!--底部end-->
</form>
</body>
</html>
ValidateCode.asmx
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
using BLL;
namespace Web.Service
{
/// <summary>
/// ValidateCode 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ToolboxItem(false)]
// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。
// [System.Web.Script.Services.ScriptService]
public class ValidateCode : System.Web.Services.WebService
{
[WebMethod(EnableSession = true)]
public AjaxClass CheckCode(string code)
{
AjaxClass ajaxClass = new AjaxClass();
if (Session["ValidateCode"] != null)
{
if (Session["ValidateCode"].ToString() == code.ToUpper())
{
ajaxClass.Msg = "验证成功。";
ajaxClass.Result = 1;
}
else
{
ajaxClass.Msg = "验证码错误";
ajaxClass.Result = 0;
}
}
else
{
ajaxClass.Msg = "验证码过时";
ajaxClass.Result = 0;
}
return ajaxClass;
}
[WebMethod]
public AjaxClass CheckLoginUser(string LoginUser)
{
AjaxClass ajaxClass = new AjaxClass();
BusinessUserManager userManager = BusinessUserManager.GetInstrance();
if (userManager.LoginUserIsUser(LoginUser))
{
ajaxClass.Msg = "此帐号已存在。";
ajaxClass.Result = 0;
}
else
{
ajaxClass.Msg = "通过";
ajaxClass.Result = 1;
}
return ajaxClass;
}
}
}
[Serializable]
public class AjaxClass
{
public string Msg { get; set; }
public int Result { get; set; }
}
消息样式
label.success
{
background-image: url(/images/sign-up-form.png);
background-repeat: no-repeat;
background-position: -166px -15px;
margin-left: 8px;
padding-left: 20px;
width: 16px;
height: 18px;
vertical-align: middle;
font-size: 14px;
}
label.error
{
background-image: url(/images/sign-up-form.png);
background-repeat: no-repeat;
background-position: -165px 3px;
color: Red;
margin-left: 8px;
padding-left: 20px;
width: 16px;
height: 18px;
vertical-align: middle;
font-size: 14px;
}register.js
jQuery.metadata.setType("attr", "validate");
var opts = null;
var isValidationGroup = false;
jQuery(document).ready(function() {
InitRules();
if (isValidationGroup) {
if (opts != undefined || opts != null) {
jQuery("#form1").validate(jQuery.extend(opts, {
onsubmit: false
}));
} else {
jQuery("#form1").validate({
onsubmit: false
});
}
InitValidationGroup();
} else {
if (opts != undefined || opts != null) {
jQuery("#form1").validate(opts);
} else {
jQuery("#form1").validate();
}
}
});
function InitRules() {
//code是asmx那边的参数名称
var dataCode = {
code: function() {
return $("#txtCode").val();
}
};
var remoteCode = GetRemoteInfo('/Service/ValidateCode.asmx/CheckCode', dataCode);
var dataParam = {
LoginUser: function() {
return $("#txtAccounts").val();
}
};
var remoteLoginUser = GetRemoteInfo('/Service/ValidateCode.asmx/CheckLoginUser', dataParam);
jQuery.validator.addMethod("TelValid", function(value, element) {
var Telphone= /^0\d{2,3}-\d{5,9}|0\d{2,3}-\d{5,9}$/;
return Telphone.test(value) || this.optional(element);
}, "电话格式应为：区号-号码");
jQuery.validator.addMethod("MobileValid", function(value, element) {
var tel = /^0?(13[0-9]|15[012356789]|18[0236789]|14[57])[0-9]{8}$/;
return tel.test(value) || this.optional(element);
}, "请输入正确的手机号码格式");
opts = {
rules: {
txtAccounts:{
required: true,
remote: remoteLoginUser
},
txtEmail: {
required: true,
email:true
},
txtPass: {
required: true,
minlength:6
},
txtAgain:{
required: true,
equalTo:"#txtPass"//注意：在这里，如果不引用上引号，在IE报找不到txtPass,花了两个小时才找到原因，不容易。
},
txtContacts: {
required: true
},
txtPhone:{
required:true,
TelValid:true
},
txtMobile:{
required:true,
MobileValid:true
},
txtCode: {
required: true,
remote: remoteCode
}
},
messages: {
txtAccounts: {
required: "请输入帐号"
},
txtEmail: {
required: "请输入Email。"
},
txtPass: {
required: "请输入密码。",
minlength:"至少输入6位的密码。"
},
txtAgain: {
required: "请输入确认密码。",
equalTo:"密码不一致。"
},
txtContacts: {
required: "请输入联系人。"
},
txtPhone:{
required:"请输入电话号码。"
},
txtMobile:{
required:"请输入手机号码"
},
txtCode: {
required: "请输入验证码。"
}
}
,success: function(label) {
label.html(" ").attr("class", "success").siblings("label").remove();
},
errorPlacement: function(error, element) {
$(element).next("span").find(".success").remove();
error.appendTo(element.next("span"));
}
}
}
页面控件后面加一对span标签，用于存放提示信息。
上面的验证js中success和errorPlacement主要是兼容各个各个浏览器，验证成功或失败信息显示的位置。
jquery.js必须是jquery-1.5.2.js版本，否则在IE6下不行。听说jquery版本要和jquery validate的版本匹配才行。我也是下载别人的jquery validate也不知道是那个版本。
但是测试过，这个版本的jquery validate能用。管他呢，能用就行。
类似资料：