ASP.NET jQuery验证引擎的Ajax验证实现代码

见下图：。

验证示例：http://www.position-relative.net/creation/formValidator/官方地址：http://www.position-absolute.com/articles/. Jquery-form-validator-因为-form-validation-一塌糊涂/这个插件支持大部分浏览器，但是由于css3的阴影和圆角样式，在IE浏览器中看不到圆角和阴影效果(IE 9支持圆角效果)。本文的主要内容是在ASP.NET实现AJAX验证功能。Ajax验证的官方例子是PHP，作者在网站上查找的资料基本都是翻译的官网，所以在ASP.NET实现普通验证没问题。但是，Ajax验证无法实现，这应该是一个bug。我研究了插件代码，给出了自己的解决方案。为了在ASP.NET达到这种效果，我们必须修改官方的主JS文件。当然，学生可以根据作者的想法进行挖掘。欢迎补充！实现效果见下图：。

如何使用这个插件，很多答案都可以通过使用搜索引擎找到，所以笔者在这里就简单说一下，照顾一下新同学。首先是我们的下载插件包，这是官方的下载地址。我们主要使用三个文件进行打包：复制代码如下：jquery.validationengine.js//plug-in主JS文件jquery.validationengine-cn.js//validation规则JS文件validationEngine.jquery.css //样式表文件。这个插件是jquery的第三方插件，所以首先要应用jQuery的核心库。我测试jquery 1.4.2没有问题。1.引入jquery和插件js和css文件复制代码如下： link href=' scripts/Validation-Engine/CSS/Validation Engine . Jquery . CSS ' rel='样式表' type=' text/CSS '/script src=' http 3360 scripts/Jquery-1 . 4 . 1-vsdoc . js ' type=' text/JavaScript '/script src=' http 3360 scripts/Validation-Engine/js/Jquery。validation engine-zh _ cn . js ' type=' text/JavaScript '/script 2。初始化插件，并在页面头部区域添加以下代码：$(文档)。ready (function () {$ ('# formid '))。validation engine()；//formID是您要验证的表单id })3。添加表单元素验证规则。常用验证规则的官方地址已注明，但为英文。你也可以百度，这不是什么困难。输入id=' text 3 ' type=' text ' class=' validate[必选，Ajax[AJaxUsers]]'/多个验证用逗号分隔。4.验证触发复制码的代码如下： $ ('# formID ')。validation engine({ inlinevalidation 3360 false，//此处修改成功： false。dationeventtriggers : ' keyup bulr '，//这里增加了一个key up，即按下键盘时触发提示位置：' topright '。//有五种模式：顶部左侧、顶部右侧、底部左侧。右中，右下故障： function(){ call fail function()})5。Ajax验证。好了，问题来了。在分析问题之前，让我们看看Validation-Engine主JS文件是如何实现Ajax验证的。

打开jquery.validationEngine.js文件，Ctrl+F用查找'$.阿贾克斯文档中能找到两处，我们要修改的是第二处，见下面折叠的官方源代码，官方jquery.validationEngine.js文件中的关键代码复制代码代码如下： 官方jquery.validationEngine.js文件中的关键代码$.Ajax({ type : options。ajaxformvalidationmethod，url: rule.url，cache: false，dataType: 'json '，data : ' field id=' field。attr(' id ')字段值=' field。val()' Extradata=' Extradata ' ' Extradata dynamic，field: field，rule: rule，methods: methods，options: options，beforeSend:if (loadingText)方法_showPrompt(字段，loadingText，' load '，true，选项);}，错误：函数（数据，传输){方法._ajaxError(数据，传输);}，成功：函数(json) { //成功时异步调用，数据是来自服务器var errorFieldId=json[0]的json答案；//var错误字段=$($(“#”错误字段id)[0])；var错误字段=$($(' input[id=' '错误字段id ' ']')[0])；//确保我们找到了if(ErrorField。length==1){ var status=JSON[1]；//从服务器var msg=json[2]读取可选的味精；if(！状态){ //休斯顿我们遇到了一个问题——显示一个红色提示选项。Ajax valid cache[错误字段id]=false；options.isError=true//解析消息提示if(msg){ if(options。所有规则[msg]){ var txt=options。所有规则.alertetxtif(txt)msg=txt；} } else msg=rule.alertText方法_showPrompt(errorField，msg ' '，true，options)；} else { if(options。AJaxValidcache[ErrorFieldid]！==未定义)选项。AJaxValidcache[error field id]=true；//解析消息提示if(msg){ if(options。所有规则[msg]){ var txt=options。所有规则.alertetxtokif(txt)msg=txt；} } else msg=rule.alertTextOk//看看我们是否应该显示一个绿色提示if (msg)方法_showPrompt(errorField，msg，' pass '，true，options)；其他方法_closePrompt(错误字段);} }错误字段。触发器(' jqv。字段。result '，[errorField，options.isError，msg])；} });充上面分析我得出结论，这里的创建交互式、快速动态网页应用的网页开发技术验证也是基于jQuery的$.AJAX()方法，为了找到无法验证的问题，写了一个$.AJAX()来验证jquery.validationEngine.js中的创建交互式、快速动态网页应用的网页开发技术方法。

5.1 第一步，创建后台处理程序，这里创建一般处理程序为例子，代码如下：复制代码代码如下：公共无效进程请求(HttpContext上下文){上下文.响应。内容类型='文本/纯文本；HttpContext _ content=HttpContext .当前；字符串validateId=_content .请求[' FieldID ']；字符串validateValue=_content .请求['字段值']；字符串validateError=_content .请求['引渡'];字符串字符串；if(validate value==' ABC ')str=' { \ ' jsonValidateReturn ' :[\ ' ' validate id ' \ '，\'' validateError '\ '，true]} '；else str=' { \ ' jsonValidateReturn ' :[\ ' ' validateId ' \ '，\'' validateError '\ '，false]} '；语境。响应。写入（字符串);} 这里注意了：在创建交互式、快速动态网页应用的网页开发技术验证的时候，会邮政三个核心参数到后台、字段标识、字段值、引渡数据、当然还可自定义其它的参数传递过来5.2 第二步，创建一个aspx页面仿照验证-引擎的射流研究…写个创建交互式、快速动态网页应用的网页开发技术请求，代码如下：复制代码代码如下： 演示页面“% @”页面语言=“c#”AutoEventWireup=“true”代码在=“form validation”之前。aspx。cs ' Inherits='演示网页.表单验证" %！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head runat=' server ' title jquery表单验证-验证-引擎/标题链接。jquery。CSS ' rel='样式表type=' text/CSS '/script src=' http : Scripts/jquery-1。4 .1-vsdoc。js ' type=' text/JavaScript '/script src=' http : Scripts/Validation-Engine/js。验证引擎。js ' type=' text/JavaScript '/script ready(function(){ $(' # formID ')).验证引擎({ AJaxformValidation : true })；$.ajax({ type: 'get '、URL : ' AJax后台/AJax验证。ashx '、cache: false、data: { 'fieldId': 'Text4 '、fieldValue': '哈哈'、' extraData ' : ' nowtime2012 ' }、dataType: 'json '、error:函数(XMLHttpRequest、textStatus、错误抛出){ alert('错误！xmlhttprequest。status=' xmlhttprequest。状态'，xmlhttprequest。readystate=' xmlhttprequest。readystate '，textStatus=' textStatus ')；}，成功：函数(json) { alert('你好，成功了！json.jsonValidateReturn[0]'，json.jsonValidateReturn[1]'，json。jsonvalidatereturn[2])；} });});/脚本/标题正文表单id=' formID ' runat=' server ' H2 jQuery-验证-引擎-Ajax验证/h2 br/p Ajax:输入id='Text3 '类型='文本'类='验证[必选，AJax[AJaxUsers]]'//p AJax:输入id='Text4 '类型=“文本”类=' validate[AJaxUsers]]'//p AJax:输入id='Text1 '类型='文本'类='验证[必选]'//p /form /body /html演示页面URL :"AJax后台/AjaxValidation.ashx "这里指向刚才创建的一般处理程序调试结果返回的是正确的json格式的数据会执行成功下面的函数，否则执行错误下面的函数，下面看一下效果

当返回错误时，验证引擎的AJAX验证无法完成。这里显示的错误是pars error编译器错误，根本原因是返回数据的问题。以下是后台处理器返回的部分数据。作者测试字段不能用单引号，否则，看上面的效果，所以这里传递的数据用双引号括起来。复制代码如下：字符串；if(validate value==' ABC ')str=' { \ ' jsonValidateReturn ' :[\ ' ' validate id ' \ '，\'' validateError '\ '，true]} '；else str=' { \ ' jsonValidateReturn ' :[\ ' ' validateId ' \ '，\'' validateError '\ '，false]} '；//if(validateValue==' ABC ')//str=' { ' jsonValidateReturn ' :[' validateId ' '，' validateError ' '，true]} '；//else//str=' { ' jsonValidateReturn ' :[' validateId ' '，' validateError ' '，false]} '；数据请求成功：。

5.3第三步，对jquery.validationEngine.js文件执行“操作”根据上面的例子，参考上面的第5条。jsonValidateReturn？是的，关键就在这个地方。官方版本是PHP的一个例子。传输的json数据略有差异，导致json[0]无法获取数据。因此，在本例中，JSON.jsonvalidateturn [index]获得的数据是正常的。当然，如果不喜欢jsonValidateReturn这个名字，可以自己定义一个名字，但前提是后台传输数据时的名字和这里的名字是一样的。复制的代码如下： //异步调用成功，数据由服务器的JSON应答更改。//原来的jvar errorFieldId=json[0]无法获取asp.Net中的数据//改成下面的模式，注意这里jsonValidateReturn的名称。在AJAX后台返回数据时，必须与jsonValidateReturn一致。//{ ' JSonValidatereturn ' :[' ValidateID '，' ValidateError '，' True ']} varerror field ID=JSON . JSonValidatereturn[0]；//其中已更改//var error field=$($(' # ' error field id)[0])；var error field=$($(' input[id=' ' error field id ' ']')[0])；//确保我们找到if(error field . length==1){ var status=JSON . jsonvalidate turn[2]；//更改了位置//从服务器读取的可选msg var msg=JSON . jsonvalidateturn[1]；//如果(！状态){//休斯顿，我们有一个问题——显示一个红色提示选项。Ajax valid cache[error field id]=false；options.isError=true5.4步骤4:自定义语言文件中的规则。在官方语言包中，有调用jquery的中文文件。validationengine-zh _ cn.js .在这里，作者添加了一个“ajaxUsers”规则。复制的代码如下：//-自定义规则-那些是演示专用的，它们可以根据您的兴趣删除或更改' Ajax user ' : { ' URL ' : ' Ajax background/Ajax validation . ashx '，/'validate.action '，' validate.action' Ajax验证用户名并发布以下参数：validateError ajaxUser；validateId用户；可以使用CCCC ' alertetxtok ' : ' *帐户验证值，' alerttextload ' 3360 ' *请稍候，正在检查.'，' alertText': '*帐户不能使用}、“ajaxUserCall”: {“URL”:“AJaxValidateFieldUser”、//您可能希望在AJax调用上传递额外的数据/“ExtraTa”:“name=Eric”，alert text“:”*此名称已被另一个人使用，“‘alert TextLoad’:”*正在检查该名称是否被另一个人使用，请稍候。}，好的，试着验证一下能否成功。

最后总结一些经验分享。“从事物的本质中寻找问题的答案！”。注：本文为原创，转载时请注明出处！http://www.cnblogs.com/skylinetour/