jQuery 验证插件 Web前端设计模式(asp.net)

2024-12-19 12:02:49

设计目标：建立一个基于jQuery框架的通用Web验证插件...

设计要求：1.需要漂亮的css样式及小图标的润饰...
2.基于jQuery框架...
3.调用.net Web 服务来实现与数据库的异步交互...

解决方案：1、首先，我们来设计三个类，分别用来显示Web给用户的视觉感知。它们分别是
.msg_warning{font-family:Arial,Helvetica,sans-serif,simsun; background:#e7f7ff url(register/MsgWarning.gif) no-repeat;border:solid 1px #6cf;color:#333;padding:0 0 0 36px !important;width:220px; margin-left:20px;}
.msg_error{font-family:Arial,Helvetica,sans-serif,simsun;background:#fff3ef url(register/MsgError.jpg) no-repeat;border:solid 1px #ff6610;color:#333;padding:0 0 0 36px !important;width:220px; margin-left:20px;}

.msg_ok{font-family:Arial,Helvetica,sans-serif,simsun;background:#e7ffe7 url(register/MsgOk.gif) no-repeat;border:solid 1px #95e895;color:#333;padding:0 0 0 36px !important;width:220px; margin-left:20px;}
分别是验证错误，验证警告和验证正确时候的不同样式...
2. 在相应的位置放置图片，如样式中的所示，包含MsgWarning.gif，MsgError.jpg，MsgOk.gif三张小图片分别对应.msg_warning；.msg_error；.msg_ok；

3.开始编写脚本
（1）、//去掉空值

代码如下:

String.prototype.trim = function()
{
var x = this;
x = x.replace(/^\s*(.*)/, "$1");
return x;
}

这个函数用以去掉文本框中的空位置（trim）...

（2）、写两个数组，用以存放触发验证时的提示语句和样式...
var ErrorWords = ['正确！', '不能为空！', 'E-mail地址长度不能超过50位！', '请输入正确的邮箱格式！',"密码必须大于6个，少于16个！","密钥不配对！",'公司名称不能超过50位！',"区号和号码均不为空！","区号为4位数字!","号码为7-10位的数字！","QQ号码为5-12位数字！",'地址长度不超过50位！','名字为10位以内的中文！','手机号为11位数字！','邮编为6位数字！','用户名为3-15位之间！','域名格式错误！','该用户名已注册！','该邮箱已被注册！']

var ErrorClass = ['msg_ok', 'msg_warning', 'msg_warning', 'msg_error', 'msg_warning', 'msg_error', 'msg_warning', 'msg_warning', 'msg_error','msg_error','msg_error','msg_error','msg_error','msg_error','msg_error','msg_error','msg_error','msg_error','msg_error']

（3）、开始编写各种验证类型，我写了所有我能够想到的...

代码如下:

==========================================================================

//闭包公司电话/传真核对
jQuery.fn.extend({
"checkTel":function()
{
$(this).blur(function(){
var check;
var names=$(this).attr("name");
var check1=$("input[name='"+names+"']").eq(0).val();
var check2=$("input[name='"+names+"']").eq(1).val();
var path1 = /^[0-9]{4}$/;
var path2= /^[0-9]{7,10}$/;
if(check1.trim() == ''|| check2.trim()=='') check=7;
else if(!path1.test(check1)) check=8;
else if(!path2.test(check2)) check=9;
else check=0;
$("input[name='"+names+"']").eq(1).next().remove("span");
$("input[name='"+names+"']").eq(1).after("<span class='"+ErrorClass[check]+"'>"+ErrorWords[check]+"</span>");
})
}
})
=======================================================================================
//闭包QQ/MSN核对
jQuery.fn.extend({
"checkQQ":function()
{
$(this).blur(function(){
var check;
var CPQQ=$(this).val();
var path= /^[0-9]{5,12}$/;
if(CPQQ.trim()=='') check=1;
else if(!path.test(CPQQ)) check=10;
else check=0;
$(this).next().remove("span");
$(this).after("<span class='"+ErrorClass[check]+"'>"+ErrorWords[check]+"</span>");
})
}
})
=======================================================================================
//闭包地址核对
jQuery.fn.extend({
"checkAdd":function()
{
$(this).blur(function(){
var check;
var CPAdd=$(this).val();
if(CPAdd.trim()=='') check=1;
else if(CPAdd.length>50) check=11;
else check=0;
$(this).next().remove("span");
$(this).after("<span class='"+ErrorClass[check]+"'>"+ErrorWords[check]+"</span>");
})
}
})
=========================================================================================
//闭包用户真实姓名核对利用函数返回程序结果
jQuery.fn.extend({
"checkRealName":function()
{
var check;
$(this).blur(function(){
var realName=$(this).val();
var reg = /^[\u4e00-\u9fa5]{1,10}$/gi;
if(realName.trim()=='') check=1;
else if(!reg.test(realName)) check=12;
else check=0;
$(this).next().remove("span");
$(this).after("<span class='"+ErrorClass[check]+"'>"+ErrorWords[check]+"</span>");
return check;
})
}
})
=================================================================================
//闭包手机号码核对
jQuery.fn.extend({
"checkPhone":function()
{
$(this).blur(function(){
var check;
var telephone=$(this).val();
var reg=/^[0-9]{11}$/;
if(telephone.trim()=='') check=1;
else if(!reg.test(telephone)) check=13;
else check=0;
$(this).next().remove("span");
$(this).after("<span class='"+ErrorClass[check]+"'>"+ErrorWords[check]+"</span>");
})
}
})
===========================================================================================
//闭包邮编核对
jQuery.fn.extend({
"checkPCode":function()
{
$(this).blur(function(){
var check;
var PCode=$(this).val();
var reg=/^[0-9]{6}$/;
if(PCode=='') check=1;
else if(!reg.test(PCode)) check=14;
else check=0;
$(this).next().remove("span");
$(this).after("<span class='"+ErrorClass[check]+"'>"+ErrorWords[check]+"</span>");
})
}
})
==========================================================================================

//闭包用户名核对
jQuery.fn.extend({
"checkUserName":function()
{
$(this).blur(function(){
var check;
var UserName=$(this).val();
if(UserName=='') check=1;
else if(UserName.length<3 || UserName.length>15) check=15;
else check=0;
$(this).next().remove("span");
$(this).after("<span class='"+ErrorClass[check]+"'>"+ErrorWords[check]+"</span>");
})
}
})

================================================================================

//闭包域名验证
jQuery.fn.extend({
"checkSite":function()
{
$(this).blur(function(){
var check;
var WebSite=$(this).val();
var reg= /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
if(WebSite=='') check=1;
else if(!reg.test(WebSite)) check=16;
else check=0;
$(this).next().remove("span");
$(this).after("<span class='"+ErrorClass[check]+"'>"+ErrorWords[check]+"</span>");
})
}
})

===================================================================================
//验证用户名是否存在数据库中(调用WebService方法)
jQuery.fn.extend({
"nameAjax":function(LName,Lfun)
{
$(this).blur(function(){
var check;
var thisid=$(this).attr("id");
var logname=$(this).val();
if(logname=='')
{
check=1;
$("#"+thisid).next().remove("span");
$("#"+thisid).after("<span class='"+ErrorClass[check]+"'>"+ErrorWords[check]+"</span>");
}
else if(logname.length<3||logname.length>15)
{
check=15;
$(this).next().remove("span");
$(this).after("<span class='"+ErrorClass[check]+"'>"+ErrorWords[check]+"</span>");
}
else
{
$.ajax({
type: "POST",
contentType:"application/json;utf-8",
url: "./WebService.asmx/"+LName,
data:"{"+Lfun+":'"+logname+"'}",
dataType: 'json',
anysc:false,
success:function(data)
{ if(data.d) check=17;
else check=0;
$("#"+thisid).next().remove("span");
$("#"+thisid).after("<span class='"+ErrorClass[check]+"'>"+ErrorWords[check]+"</span>");
}
})
}
})
}
})

相对应的Web服务方法：

代码如下:

/// <summary>
///这边核对登陆名是否存在，这边偷懒用随机验证
/// </summary>
/// <param name="logName"></param>
/// <returns></returns>
[WebMethod]
public bool checkLogoName(string lognames)
{
Random r = new Random();
int i = r.Next(1, 10000);
if (i % 2 == 0) return true;
return false;
}
=========================================================================================
//验证用户邮箱是否在数据库中（调用Web服务的方法）
jQuery.fn.extend({
"emailAjax":function(Lemail,Lfun)
{
$(this).blur(function(){
var check;
var thisid=$(this).attr("id");
var email=$(this).val().toLowerCase();
var strSuffix = "cc|com|edu|gov|int|net|org|biz|info|pro|name|coop|al|dz|af|ar|ae|aw|om|az|eg|et|ie|ee|ad|ao|ai|ag|at|au|mo|bb|pg|bs|pk|py|ps|bh|pa|br|by|bm|bg|mp|bj|be|is|pr|ba|pl|bo|bz|bw|bt|bf|bi|bv|kp|gq|dk|de|tl|tp|tg|dm|do|ru|ec|er|fr|fo|pf|gf|tf|va|ph|fj|fi|cv|fk|gm|cg|cd|co|cr|gg|gd|gl|ge|cu|gp|gu|gy|kz|ht|kr|nl|an|hm|hn|ki|dj|kg|gn|gw|ca|gh|ga|kh|cz|zw|cm|qa|ky|km|ci|kw|cc|hr|ke|ck|lv|ls|la|lb|lt|lr|ly|li|re|lu|rw|ro|mg|im|mv|mt|mw|my|ml|mk|mh|mq|yt|mu|mr|us|um|as|vi|mn|ms|bd|pe|fm|mm|md|ma|mc|mz|mx|nr|np|ni|ne|ng|nu|no|nf|na|za|aq|gs|eu|pw|pn|pt|jp|se|ch|sv|ws|yu|sl|sn|cy|sc|sa|cx|st|sh|kn|lc|sm|pm|vc|lk|sk|si|sj|sz|sd|sr|sb|so|tj|tw|th|tz|to|tc|tt|tn|tv|tr|tm|tk|wf|vu|gt|ve|bn|ug|ua|uy|uz|es|eh|gr|hk|sg|nc|nz|hu|sy|jm|am|ac|ye|iq|ir|il|it|in|id|uk|vg|io|jo|vn|zm|je|td|gi|cl|cf|cn";
var regu = "^[a-z0-9][_a-z0-9\-]*([\.][_a-z0-9\-]+)*@([a-z0-9\-_]+[\.])+(" + strSuffix + ")$";
var re = new RegExp(regu);
if(email.trim()=='') { check=1;$(this).next().remove("span"); $(this).after("<span class='"+ErrorClass[check]+"'>"+ErrorWords[check]+"</span>"); }
else if(email.length > 50) { check=2; $(this).next().remove("span"); $(this).after("<span class='"+ErrorClass[check]+"'>"+ErrorWords[check]+"</span>"); }
else if(email.search(re) == -1) { check=3; $(this).next().remove("span"); $(this).after("<span class='"+ErrorClass[check]+"'>"+ErrorWords[check]+"</span>"); }
else
{
$.ajax({
type: "POST",
contentType:"application/json;utf-8",
url: "./WebService.asmx/"+Lemail,
data:"{"+Lfun+":'"+email+"'}",
dataType: 'json',
anysc:false,
success:function(data)
{ if(data.d) check=18;
else check=0;
$("#"+thisid).next().remove("span");
$("#"+thisid).after("<span class='"+ErrorClass[check]+"'>"+ErrorWords[check]+"</span>");
}
})
}
})
}
})

相对应的Web服务方法：

代码如下:

/// <summary>
/// 核对邮箱是否存在，这边偷懒用随机验证
/// </summary>
/// <param name="logemail"></param>
/// <returns></returns>
[WebMethod]
public bool checkLogEmail(string logemails)
{
Random r = new Random();
int i = r.Next(1, 10000);
if (i % 2 == 0) return true;
return false;
}

=====================================================================================
//最终提交
jQuery.fn.extend({
"toReg":function(num) //这里的nun请注意，启用多少个验证就写多少数字，因为我将上面的15个验证都启用...
{
$(this).click(function(){
var erolen=$(".msg_error").length;
var warlen=$(".msg_warning").length;
var oklen=$(".msg_ok").length;
if(oklen==num)
{ alert("验证通过..."); }
else alert("错误："+erolen+",警告："+warlen+",通过："+oklen+",请完整填写信息！");
})
}
})
})(jQuery);
=============================================================================================

4、在Web页面引入脚本

代码如下:

$("#register").toReg(15);//用户注册
})
</script>

5.Web页面的HTML源码

代码如下:

<div>
用户登录名核对：<input type="text" id="UserName" /><br /><br />
邮箱核对：<input type="text" id="Emails"/><br /><br />
密码核对：<input type="password" id="Codes"/><br /><br />
密码再对：<input type="password" id="Codes2"/><br /><br />
公司名称核对：<input type="text" id="CPNames"/><br /><br />
电话:区号：<input name="tel" type="text" id="txtTel1" size="8"/>
-
<input name="tel" type="text" id="txtTel2" size="16"/>
<br /><br />
传真:区号：<input name="fax" type="text" id="txtFax1" size="8" />
-
<input name="fax" type="text" id="txtFax2" size="16" /> <br /><br />
用户QQ：<input type="text" id="QQs"/><br /><br />
公司地址：<input type="text" id="CPAdds"/><br /><br />
用户真实姓名：<input type="text" id="RealName"/><br /><br />
手机号码核对：<input type="text" id="Phones"/><br /><br />
邮编核对：<input type="text" id="PCodes"/><br /><br />
域名验证：<input type="text" id="WebSites" value="htp://"/><br /><br />
（数据库）用户名验证：<input type="text" id="usernameAjax"/><br /><br />
（数据库）用户邮箱验证：<input type="text" id="uemailAjax"/><br /><br />
<input type="button" value="提交" id="register"/>
</div>
//至此全部结束

设计小结：还有很不不完善的地方，譬如未想到的验证，还有代码冗余度过大，希望使用的时候可以自己改良下...
源代码下载地址 http://xiazai.jb51.net/201010/yuanma/jqueryRegister.rar

asp.net(C#) 生成随机验证码的代码

常用的生成验证码程序 ,图片效果如下: 源程序如下: 复制代码代码如下: using System; using System.IO; using System.Drawing; using System.Drawing.Imaging; using System.Text; using System.Collections; using System.Web; using System.Web.UI; using System.Web.UI.WebControls;
.net MVC中使用forms验证详解

.net MVC中使用forms验证,供大家参考,具体内容如下文件夹的分部是这样子的首先在Web.config中设置 authentication和authorization 节点 <system.web> <authentication mode="Forms"> <forms loginUrl="~/Login/Index" timeout="2880" defaultUrl="~/Home/Ind
asp.net 验证码生成和刷新及验证

验证码技术是为了防止暴力破解等而设定的.现在一般的网站注册等都提供验证码功能,特别是腾讯更是长长的一串.文中参考了别人的代码.有了就没有必要再写了.可以读一下.不过我测试时发现了两次PageLoad的问题.注释了两句即可.同时修改了namespaces.同时提供完整的验证说明:1 新建VerifyCode.aspx cs文件代码如下: 复制代码代码如下: using System; using System.Collections; using System.ComponentModel; u
ASP.net 验证码实现代码(C#)

public class ValidateCode : System.Web.UI.Page { private void Page_Load(object sender, System.EventArgs e) { this.CreateCheckCodeImage(GenerateCheckCode()); } #region Web 窗体设计器生成的代码 override protected void OnInit(EventArgs e) { //
asp.net身份验证方式介绍

windows身份验证: IIS根据应用程序的设置执行身份验证.要使用这种验证方式,在IIS中必须禁用匿名访问. Forms验证:用Cookie来保存用户凭证,并将未经身份验证的用户重定向到自定义的登录页. Passport验证:通过Microsoft的集中身份验证服务执行的,他为成员站点提供单独登录和核心配置文件服务. 一. 配置windows身份验证 1)配置IIS设置 of Dern)" alt="asp.net身份验证方式(ref:DreamSpace of Dern)&q
注册页实现激活邮箱验证(asp.net c#)

-----------注册页前台复制代码代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Registe.aspx.cs" Inherits="CSDN博客.Registe" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &
ASP.NET表单验证方法详解第1/2页

1.使用验证控件这属于客户端验证,微软开发人员将最常用的验证功能进行了封装,使得我们开发效率明显提高,而且特别是自定义验证控件,非常灵活,我们可以自行设计验证逻辑.但是验证控件收到了浏览器的限制,记得在一次开发过程中,使用FireFox浏览器进行浏览,发现所有的验证控件失灵,这个并非是ASP.NET设计的漏洞,只能说浏览器标准的不唯一造成的. ASP.NET公有六种验证控件,分别如下: RequiredFieldValidator(必须字段验证) 用于检查是否有输入值 CompareValid
asp.net 简单验证码验证实现代码

首先是新建一个验证码页面 ValidateCode.aspx 定义变量这样有利于后期的修改了复制代码代码如下: private int codeLen = 4;//验证码长度 private int fineness = 85;//图片清晰度 private int imgWidth = 48;//图片宽度 private int imgHeight = 24;//图片高度 private string fontFamily = "Times New Roman";//字体名称
Asp.net(C#)实现验证码功能代码

新建一个专门用来创建验证码图片的页面ValidateCode.aspx 它的后台cs文件代码如下: PageLoad 复制代码代码如下: private void Page_Load(object sender, System.EventArgs e) { string checkCode = CreateRandomCode(4); Session["CheckCode"] = checkCode; CreateImage(checkCode); } 其中CreateRandomC
Asp.net Mvc 身份验证、异常处理、权限验证(拦截器)实现代码

1.用户登录验证用户是否登录成功步骤直接忽略,用户登录成功后怎么保存当前用户登录信息(session,cookie),本文介绍的是身份验证(其实就是基于cookie)的,下面看看代码. 引入命名空间 using System.Web.Security; 复制代码代码如下: Users ModelUser = new Users() { ID = 10000, Name = UserName, UserName = UserName, PassWord = PassWord, Roles =

jQuery 验证插件 Web前端设计模式(asp.net)

相关推荐

随机推荐