在现在的项目开发中,任何一个大型项目绝对不是简简单单的采用一个种语言和一种框架,因为每种语言和框架各有优势,与其死守一个,不与取各家之所长,依次得到一个高性能、搞扩展的产品。对于一个.NET开发者,尤其是主要从事Web开发的.NET程序员,个人觉得有必要学习一门性能优越的Web平台开发语言。一个开发者不能简简单单的只学习一门语言,思维应该开阔,从各个方面去看待同样的一个问题,这样或许会得到另一番效果和见解,个人认为应该学习一下其他的语言,这样有利于我们对比语言的优势和缺点,例如java、nodejs、python等等。对于Nodejs这个JavaScript平台,个人觉得.NET程序员有必要学习一下,因为学习NodeJS有助于我们构建一个高性能的Web平台。NodeJS具有事件驱动、非阻塞I/O等特点,可以很好的处理I/O操作。Node面向网络且擅长并行I/O,能够有效地组织起更多的硬件资源。这篇博客就来简单的介绍一下NodeJS的异步I/O特点。一.NodeJS概述:要学习一个语言或者平台,我们首先应该知道其定义,依据定义来扩展我们的学习思路。Node的定义:”一个大奖在Chrome JavaScript运行时上的平台,用于构建高速、可伸缩的网络程序。NodeJS作为一个异步事件驱动的JavaScript运行时,旨在构建可扩展的网络应用程序。“有关nodejs的背景介绍和安装方法,这里就没有必要介绍了,因为对于nodejs的安装是比较简单,所以在这里赘述就有些显得浪费时间。学习完Node的定义特点,可能很多人都会好奇这个平台的适用场景是什么,以便在实际的项目开发中应用,不然学习这个就没有意义。主要的应用场景:前后端编程语言环境统一;高性能I/O用于实时应用;并行I/O使得使用者可以更高效地利用分布式环境;并行I/O有效利用稳定接口提升Web渲染能力;云平台的支持;游戏开发(这可能是很多开发者在意的,毕竟现在的游戏开发火热程度已经到了无以附加的地步);工具类应用,与较多的工具方法,使得开发效率大大的提升。NodeJS异步I/O模型的基本要素:事件循环、观察者、请求对象、I/O线程池这四个共同构成。接下来我们具体了解一下这些知识。二.NodeJS异步I/O解析:对于Nginx服务器,很多人都是比较的熟悉,Nginx采用纯C编写而成,用于做Web服务器,在反向代理和负载均衡等服务方面有很好的优势。Node与Nginx服务器有着相似的地方,都是采用事件驱动。浏览器中JavaScript在单线程上执行,而且还与UI渲染共用一个线程,JavaScript在执行的时候UI渲染和响应应是出于停滞状态。(如果脚本执行的时间超过100毫秒,用户就会感到页面卡顿)。遇到这些情况,我们就会想到异步的方式消除这些等待的问题,对于异步和同步的概念就不做介绍了。=接下来我们具体的来了解一下NodeJS的事件驱动和非阻塞I/O这些特点,了解这些对于我们更好的学习NodeJS开发和构建高性能的Web平台有更加深远的意义。1.I/O操作概述:I/O操作对于任何一个开发者来说都不会陌生,现在我们就简单的谈一下NodeJS的I.O操作。I/O操作分为:单线程串行依次执行;多线程并行执行。这两种方式各有优势和缺点,多线程的代价在于创建线程和执行期线程上下文切换的开销较大,并且多线程面临锁、状态同步的问题。单线程安装顺序执行,在执行中任何一个稍慢都会导致后续执行代码阻塞。对于任务的串行执行(概念上类似于同步执行)和任务的并行执行的描述有如下图:                        在NodeJS中利用单线程,远离死锁、状态同步问题,利用异步I/O,让单线程远离阻塞,以便更好的使用CPU。异步I/O是期望I/O的调用不再阻塞后续运算,将原有等待I/O完成这段时间分配给其他需要的业务去执行。   很多时候一些开发者对异步/同步和阻塞/非阻塞的概念有些分不清,这两者没有什么关联。阻塞I/O是调用之后一定要等到系统内核层面完成所有操作后,调用才结束。非阻塞I/O是在调用后立即返回。关于阻塞I/O和非阻塞I/O有如下图: 2.NodeJS异步I/O解析:事件循环:在进程启动时,Node会创建一个类似于while(true)的循环,每执行一次循环体的过程称为Tick,每个Tick的过程就是查看是否有时间待处理。观察者:每个时间循环中有一个或多个观察者,判断是否有事件要处理的过程就是向这些观察者询问是否又要处理的事件。请求对象:从JavaScript发起调用到内核执行完I/O操作的过渡过程中,存在一种中间产物,就是请求对象。I/O线程池:组装好请求、送入I/O线程池等待执行,完成第一步I/O操作,进入第二部分回调通知。(在Windows中,线程池中的I/O操作调用完毕之后,会将获取的结果存在req->result属性上,然后调用PostQueuedCompletionStatus()通知IOCP,告知当前对象操作已经完成。)异步I/O有如下图:三.NodeJS异步编程实例:前面介绍了异步I/O的相关概念,这里提供一个异步I/O操作的实例:var config = require('./config.json');var fs = require("fs");var http = require('http');var url_module = require("url");http.createServer(function (request, response) { var key = url_module.parse(request.url).query.replace('key=', ''); switch (request.method) { case 'GET': // Asynchronous Response Generation fs.readFile(config.dataPath + key, 'utf8', function(err, value) { if (err) { // Return File Not Found if file hasn't yet been created response.writeHead(404, {'Content-Type': 'text/plain'}); response.end("The file (" + config.dataPath + key + ") does not yet exist."); } else { // If the file exists, read it and return the sorted contents var sorted = value.split(config.sortSplitString).sort().join(''); response.writeHead(200, {'Content-Type': 'text/plain'}); response.end(sorted); } }); break; case 'POST': // Synchronously append POSTed data to a file var postData = ''; request .on('data', function (data) { postData += data; }) .on('end', function () { fs.appendFile(config.dataPath + key, postData, function(err) { if (err) { // Return error if unable to create/append to the file response.writeHead(400, {'Content-Type': 'text/plain'}); response.end('Error: Unable to write file: ' + err); } else { // Write or append posted data to a file, return "success" response response.writeHead(200, {'Content-Type': 'text/plain'}); response.end('success'); } }); }); break; default: response.writeHead(400, {'Content-Type': 'text/plain'}); response.end("Error: Bad HTTP method: " + request.method); }}).listen(config.serverPort);console.log('synchronous server is running: ', config.serverPort);四.总结:这篇博文是个人初次尝试NodeJS的一个小总结,如有写的不好还望大家多多的包含和指正。对于程序员来说,需要做的就是一直不停的学习,无论是否是自己主要从事的语言,对于学习多种语言,可以更加有助我们了解编程,对于一个开发者来说,最终的就是思想,因为语言的特性和框架的应用,一个熟练的编程者学习起来并不是难事,难就难在我们对于语言和框架的设计理念的理解。

枚举对象的使用: 复制代码 代码如下: //各种验证方式支持的标签类型 sustainType: function (elem, setting) { var srcTag = elem.tagName; var stype = elem.type; switch (setting.validatetype) { case _validTypeEnum.InitValidator: return true; case _validTypeEnum.InputValidator: if (srcTag == _validTagEnum.INPUT || srcTag == _validTagEnum.TEXTAREA || srcTag == _validTagEnum.SELECT) { return true; } else { return false; } case _validTypeEnum.CompareValidator: if (srcTag == _validTagEnum.INPUT || srcTag == _validTagEnum.TEXTAREA) { if (stype == _validTagTypeEnum.checkbox || stype == _validTagTypeEnum.radio) { return false; } else { return true; } } return false; case _validTypeEnum.AjaxValidator: if (stype == _validTagTypeEnum.text || stype == _validTagTypeEnum.textarea || stype == _validTagTypeEnum.file || stype == _validTagTypeEnum.password || stype == _validTagTypeEnum.select_one) { return true; } else { return false; } case _validTypeEnum.RegexValidator: if (srcTag == _validTagEnum.INPUT || srcTag == _validTagEnum.TEXTAREA) { if (stype == _validTagTypeEnum.checkbox || stype == _validTagTypeEnum.radio) { return false; } else { return true; } } return false; case _validTypeEnum.FunctionValidator: return true; } } 复制代码 代码如下: //获取指定字符串的长度 getLength: function (jqObj) { var elem = _GetDomObj(jqObj); var sType = elem.type; var len = 0; switch (sType) { case _validTagTypeEnum.text: case _validTagTypeEnum.hidden: case _validTagTypeEnum.password: case _validTagTypeEnum.textarea: case _validTagTypeEnum.file: var val = jqObj.val(); var initConfig = $.formValidator.getInitConfig(elem.settings[0].validatorgroup); len = initConfig.wideword ? String.getCharLength(val) : val.length; break; case _validTagTypeEnum.checkbox: case _validTagTypeEnum.radio: len = $("input[type='" + sType + "'][name='" + jqObj.attr("name") + "']:checked").length; break; case _validTagTypeEnum.select_one: case _validTagTypeEnum.select_multiple: len = jqObj.children(":selected").length; break; } return len; } 2. 将原版本中各方法之间传递验证标签的Id,改为传递验证标签的对象,这样就避免了在各个方法内需要再根据id获得验证标签的对象,提高了代码执行速度和性能。 3. 原版本中对验证成功、错误等提示样式在插件中把样式名给限定死了,如错误的提示样式名为:onError,这样在使用此插件时就会让美工需要关心插件中各提示样式的名称,并且还要避免出现样式重复或冲突的情况,如此使用让人很不爽。真正好的插件,应该是让js和(需要用户自己设置的)样式完全分离——这类似于编程里的'松耦合',但这样才能让js和样式无不依赖,更好的适应用户的需求! 于是,我将插件中各提示样式(作为方法的参数对象的属性)让用户可以自己配置,主要代码如下: 复制代码 代码如下: //提示样式枚举 var _tipCssEnum = { //(ajax)加载处理 loadCss: "loadCss", //获得焦点时的样式 focusCss: "focusCss", //提示[用于 为空提示] ---如果此项未设置,则使用errorCss noticeCss: "noticeCss", //失败or错误[用于格式错误,正则表达式验证]---必须设置 errorCss: "errorCss", //成功---必须设置 successCss: "successCss", //默认状态 ---必须设置 defaultCss: "defaultCss" }; initConfig: function (controlOptions) { var settings = { debug: false,//是否是调试模式 validatorgroup: "1",//验证组 alertmessage: false,//是否直接弹出验证提示 validobjectids: "",//验证对象集合 focusvalid: false, onsuccess: function () { return true; }, //验证成功后的处理方法,返回true|false(可追加表单验证或阻止表单提交等) onerror: function () { }, filterInputStrFun: function (str) { return FilterInputOper.FilterInputStr(str); }, //过虑输入字符串的方法[可设置] isformpost: false, //是否是表单提交(默认:false——非表单提交,一般为ajax提交,true——表单提交) submitonce: false,//是否验证通过后,表单立刻提交 submitbutton: null,//提交按钮id或对象 getformdata: null, //function (formdata) { } (验证通过后)获得输入的表单值——只有isformpost=false时,此方法才会被调用 //验证提示显示设置(default:默认根据设置) tipshow: "default", formid: "", //验证表单的id或对象 tidymode: false, //精简模式 errorfocus: true, wideword: true, //验证提示样式设置(全局) tipcss: { //(ajax)加载处理 loadCss: "", //获得焦点时的样式 focusCss: "", //提示 noticeCss: "", //成功 successCss: "", //失败 errorCss: "", //默认状态 defaultCss: "" } }; controlOptions = controlOptions || {}; controlOptions.tipcss = controlOptions.tipcss || {}; //合并整个配置(深度拷贝) $.extend(true, settings, controlOptions); if (!settings.isformpost) { if (!settings.submitbutton) { alert("submitbutton不能为空!"); return; } _GetJqObj(settings.submitbutton).click(function () { var pageIsValid = $.formValidator.pageIsValid(settings.validatorgroup); if (pageIsValid && _IsFunction(settings.getformdata)) { var formData = _GetFormData(settings.filterInputStrFun); settings.getformdata(formData); } }); } settings.tipshow = settings.tipshow || "default"; //如果是精简模式,发生错误的时候,第一个错误的控件就不获得焦点 if (settings.tidymode) { settings.errorfocus = false; } if (settings.formid) { _GetNodeById(settings.formid).submit(function () { //如果不是表单提交,则阻止表单提交 return settings.isformpost ? $.formValidator.pageIsValid(settings.validatorgroup) : false; }); } if (_jQuery_formValidator_initConfig_Array == null) { _jQuery_formValidator_initConfig_Array = new Array(); } _jQuery_formValidator_initConfig_Array.push(settings); } //设置提示信息 setTipState: function (elem, showCssEnum, showmsg) { var setting0 = elem.settings[0]; var initConfig = $.formValidator.getInitConfig(setting0.validatorgroup); if (initConfig.alertmessage && showmsg) { alert(showmsg); return } var jq_tipObj = setting0.tipJqObj; var tip_IsNull = Object.isNull(jq_tipObj); if (!tip_IsNull) { showmsg = showmsg || ""; if (initConfig.tidymode) { //保存提示信息 elem.Tooltip = showmsg; if (showCssEnum != _tipCssEnum.errorCss && showCssEnum != _tipCssEnum.noticeCss) jq_tipObj.hide(); } jq_tipObj.removeClass(); //设置提示样式 var showClass = setting0.tipcss[showCssEnum]; //如果 noticeCss未设置,则使用 errorCss if (String.isNullOrEmpty(showClass) && showCssEnum == _tipCssEnum.noticeCss) { showCssEnum = _tipCssEnum.errorCss; showClass = setting0.tipcss[showCssEnum]; } if (!String.isNullOrEmpty(showClass)) { //保存 当前提示标签 显示的样式(枚举值) elem.showcssenum = showCssEnum; jq_tipObj.addClass(showClass); } jq_tipObj.html(showmsg); } }   4.在initConfig配置对象中增加了一些属性,以满足更多的需求,增强功能和易用性,如:   filterInputStrFun: function (str) { return FilterInputOper.FilterInputStr(str); }, //过虑输入字符串的方法[可设置]  ——以满足对输入字符串过虑的需求   isformpost: false, //是否是表单提交(默认:false——非表单提交,一般为ajax提交,true——表单提交) ——以满足ajax提交和表单提交的需求   getformdata: null, //function (formdata) { } (验证通过后)获得输入的表单值——只有isformpost=false时,此方法才会被调用   tipshow: "default",//验证提示显示设置(default:默认根据设置) ——设置验证提示标签对象查找方式,根据Id 或 自定义jQuery查找(find)方法。    插件的使用如下: 复制代码 代码如下: <div class="jy_fctopbox01"> <div class="jy_fctopbox02"> <div class="left"> 您好,欢迎来到山水檀溪! <a href="/lpzx/LoginOut.aspx"> 退出</a> </div> <div class="right"> <a href="http://xyfc.s187.com/Block_index.aspx?blockId=3" id="a_Into_House" target="_blank">进入楼盘首页</a></div> </div> </div> <div class="jy_fcadmincenter"> <div class="jy_fcadminheader"> <div class="left"> <img src="http://img1.s187.com/Channels/House/xyfc.s187.com/BlockLogo/3/Block_Logo_3.png" id="BlockLogo" width="200" height="120" /> </div> <div class="right"> <img src="http://img1.s187.com/Channels/House/xyfc.s187.com/BlockPropaganda/3/Block_XC_3.png" id="BlockXcImg" width="732" height="120" /></div> </div> <div id="jy_fcmenu"> <div class="jy_fcmenu"> <ul> <li class='hover'> <a href='/lpzx/BlockManager/BlockInfomation/Block_Detail.aspx'> 楼盘管理 </a></li> <li > <a href='/lpzx/PurchaseIntention/PurchaseIntention_List.aspx'> 购房意向 </a></li> <li > <a href='/lpzx/UsersProposal/BlockProposal.aspx'> 用户建议 </a></li> <li > <a href='/lpzx/PasswordCenter/ModifyPassword.aspx'> 修改密码 </a></li> <li > <a href='/lpzx/BlockManager/BlockDomainSet/SetBlockDominName.aspx'> 域名设置 </a></li> <li > <a href='/lpzx/UsersQuestion/QAList.aspx'> 在线问答 </a></li> </ul> </div> </div> <div id="Page_Content" class="jy_fcadmincent"> <div class="jy_fcadminleft"> <div class="ul1"> <ul> <li><a href='/lpzx/BlockManager/BlockInfomation/Block_Detail.aspx' > 楼盘信息 </a></li> <li><a href='/lpzx/BlockManager/BuildingInfomation/Building_List.aspx' class='hover'> 栋号信息 </a></li> <li><a href='/lpzx/BlockManager/LayoutInfomation/Layout_List.aspx' > 户型信息 </a></li> <li><a href='/lpzx/BlockManager/RoomInfomation/Room_List.aspx' > 套房信息 </a></li> <li><a href='/lpzx/BlockManager/CustomerService/Customer_List.aspx' > 客服管理 </a></li> <li><a href='/lpzx/BlockManager/BlockNews/BlockNews_List.aspx' > 楼盘动态 </a></li> <li><a href='/lpzx/BlockManager/BlockProgress/BlockProgress_List.aspx' > 楼盘进度 </a></li> <li><a href='/lpzx/BlockManager/SalesLicense/LicenseManager.aspx' > 预售许可证 </a></li> <li><a href='/lpzx/BlockManager/Gallery/Block_Gallery.aspx' > 楼盘图库 </a></li> </ul> </div> </div> <div class="jy_fcadminright" id="stepDiv1"> <div class="jy_fcadmintil02"> 添加栋号 >> <span>第一步</span></div> <div class="jy_fcadmintil01"> <img src="http://images.cnblogs.com/tje_03.png" width="533" height="26" alt="" /></div> <div class="jy_fcadminme"> <div class="right01"> <div class="jy_fcscrtbox03"> <label> 楼盘名称: </label> <span class="s2"> 山水檀溪 </span> </div> <div class="jy_fcscrtbox03"> <label> <font color="#ff0000">* </font>栋号: </label> <span class="s1"> <input type="text" maxlength="10" class="jy_fcadmin02" id="txtBuildingName" /> </span> <div class="uuu1"> <p id="tipBuildingName" class="box001" style="display: none;"> </p> </div> </div> <div class="jy_fcscrtbox03"> <label> <font color="#ff0000">* </font>状态: </label> <div class="jy_fcscrtboxs1"> <input name="rd_SaleState" type="radio" value="1" /> 待售 <input name="rd_SaleState" type="radio" value="2" /> 期房 <input name="rd_SaleState" type="radio" value="3" /> 现房 <input name="rd_SaleState" type="radio" value="4" /> 尾房 <input name="rd_SaleState" type="radio" value="5" /> 售完 </div> <div class="uuu2"> <p id="tipSaleState" class="box001" style="display: none;"> </p> </div> </div> <div class="jy_fcscrtbox03"> <label> <font color="#ff0000">*</font> 用途: </label> <div class="jy_fcscrtboxs1"> <div class="jy_fcmu"> <ul> <li> <input type="checkbox" name="ckUsage" value="1" />普通住宅</li> <li> <input type="checkbox" name="ckUsage" value="2" />单身公寓</li> <li> <input type="checkbox" name="ckUsage" value="3" />复式</li> <li> <input type="checkbox" name="ckUsage" value="4" />别墅</li> <li> <input type="checkbox" name="ckUsage" value="5" />厂房</li> <li> <input type="checkbox" name="ckUsage" value="6" />写字楼</li> <li> <input type="checkbox" name="ckUsage" value="7" />商铺</li> <li> <input type="checkbox" name="ckUsage" value="8" />经济适用房</li> </ul> </div> </div> <div class="uuu2"> <p id="tipUsage" class="box001" style="display: none;"> </p> </div> </div> <div class="jy_fcscrtbox03"> <label> 预售许可证: </label> <div class="jy_fcscrtboxs1 zoon" style="display:none"> <select id="selLicense" class="jy_fcadmin02"> </select></div> <div class="jy_fcscrtboxs5"><p class="c1"><a href="javascript:;" id="lookSelLicenseA">[查看内容]</a></p><p class="c1"><ins style="color: black;" id="License_empty_Ins">无</ins></p><p class="c1"><a href="javascript:;" onclick="PreSellLicensePopUp.Open();return false;" title="如不存在此建筑物的预售许可证,可点击添加!">添加</a></p> </div> </div> </div> <div class="jy_fcscrtbox03"> <label> 地理位置: </label> <div class="jy_fcscrtboxs5"><p class="c1"><a href="javascript:;" id="markMapA">地图标注</a></p><p class="c1"><ins></ins></p><p class="c1"></p> </div> </div> <div class="jy_fcscrtbox03"> <label> <font color="#ff0000">*</font> 层数: </label> <span class="s1"> <input maxlength="3" type="text" class="jy_fcadmin02" id="txtfloornum" /> </span> <div class="uuu1"> <p id="tipfloornum" class="box001" style="display:none;"> </p> </div> </div> <div class="jy_fcscrtbox03"> <label> 楼层说明: </label> <span class="s2"> <textarea id="txtBlockNote" cols="80" rows="5" class="jy_fcadmin07"></textarea> </span> </div> <div class="jy_fcscrtbox03"> <label> 公摊比率: </label> <div class="jy_fcscrtboxs1"> <input maxlength="10" type="text" class="jy_fcadmin02" id="txtShareBili" /> </div> <div class="uuu2"> <p id="tipShareBili" class="box001" style="display: none;"> </p> </div> </div> <div class="jy_fcscrtbox03"> <label> 位置说明: </label> <span class="s2"> <textarea id="txtPostionDesc" cols="80" rows="5" class="jy_fcadmin07"></textarea> </span> </div> <div class="jy_fcscrtbox03"> <p class="c2"> <input id="btnSubmit_Step1" type="button" class="jy_fcadminbottom02" value="下一步" />  <input id="btnCancel_Step1" type="button" class="jy_fcadminbottom02" value="取 消" /> </p> </div> </div> </div> <div class="jy_fcadminright" id="stepDiv2" style="display: none;"> <div class="jy_fcadmintil02"> 添加栋号 >> <span>第二步</span></div> <div class="jy_fcadmintil01"> <img src="http://images.cnblogs.com/tj_03.png" width="533" height="26" /></div> <div class="jy_fcadminme"> <div class="right01"> <div class="jy_fcscrtbox03"> <label> 占地面积: </label> <div class="jy_fcscrtboxs1"> <input type="text" maxlength="6" class="jy_fcadmin02" id="txtCoveredArea" /> (单位:平方米)</div> <div class="uuu2"> <p id="tipCoveredArea" class="box001" style="display: none;"> </p> </div> </div> <div class="jy_fcscrtbox03"> <label> 建筑面积: </label> <div class="jy_fcscrtboxs1"> <input type="text" maxlength="6" class="jy_fcadmin02" id="txtBuildingArea" /> (单位:平方米)</div> <div class="uuu1"> <p id="tipBuildingArea" class="box001" style="display: none;"> </p> </div> </div> <div class="jy_fcscrtbox03"> <label> 电梯型号: </label> <span class="s2"> <input type="text" maxlength="10" class="jy_fcadmin02" id="txtElevator" /> 例:东芝</span> </div> <div class="jy_fcscrtbox03"> <label> 外墙装修: </label> <span class="s2"> <input type="text" maxlength="10" class="jy_fcadmin02" id="txtOutSideDecorate" /> <kbd>例:高级面砖和涂料结合</kbd></span> </div> <div class="jy_fcscrtbox03"> <label> 内墙装修: </label> <span class="s2"> <input type="text" maxlength="10" class="jy_fcadmin02" id="txtInSideDecorate" /> 例:125/250厚加气混凝土砌块</span> </div> <div class="jy_fcscrtbox03"> <label> 基础: </label> <span class="s2"> <input type="text" maxlength="15" class="jy_fcadmin02" id="txtBasicFacility" /> 例:管桩基础</span> </div> <div class="jy_fcscrtbox03"> <label> 主体结构: </label> <span class="s2"> <input type="text" maxlength="25" class="jy_fcadmin02" id="txtSubjectStruts" /> 例:框架剪力墙结构</span> </div> <div class="jy_fcscrtbox03"> <p class="c2"> <input id="btnPre_Step2" type="button" class="jy_fcadminbottom02" value="上一步" />  <input type="button" id="btnSubmit_Step2" class="jy_fcadminbottom02" value="下一步" /> </p> </div> </div> </div> </div> <div class="jy_fcadminright" id="stepDiv3" style="display: none;"> <div class="jy_fcadmintil02"> 添加栋号 >> <span>第三步</span></div> <div class="jy_fcadmintil01"> <img src="http://images.cnblogs.com/tjs_03.png" width="533" height="26" /></div> <div class="jy_fcadminme"> <div class="jy_fcadmintable02"> <table width="100%" border="0" cellspacing="0"> <tr> <td height="39" align="right" width="20%"> 栋号图片: </td> <td align="left" width="20%"> <span class="s1">(最多1张)</span><a id="a_uploadBuilding" href="javascript:;"><img id="img_uploadBuilding" src="http://images.cnblogs.com/aw_07.png" width="80" height="25" align="absmiddle" alt="" /></a> </td> <td align="left" width="60%"> <div class="jy_fcscrtbox03"> <p id="tip_buildingFile" class="box004"> </p> </div> </td> </tr> </table> <div id="div_BuildingContainer" class="jy_fcadminimg02"> <div style="float: left; width: 340px; height: 380px;"> <div id="ShowBuildingFlv"> </div> </div> </div> <div class="jy_fcgybox005"> <input id="btnPre_Step3" type="button" class="jy_fcadminbottom02" value="上一步" />  <input type="button" id="btnSubmit_Step3" class="jy_fcadminbottom02" value="完 成" /> </div> </div> </div> </div> </div> <div id="Page_Bottom" class="jy_fcadminbottom"> <img src="/lpzx/images/fckj_27.png" width="950" height="6" alt="" /> </div> </div> <br /> <p id="showMes_P"></p> <script src="js/formValidator.js" type="text/javascript"></script> <script src="js/formValidatorRegex.js" type="text/javascript"></script> <script type="text/javascript"> function GetInitConfigOptions(validatorgroup, onsuccess, submitbutton, getformdata) { return { validatorgroup: validatorgroup, formid: "form1", onerror: function (msg) { alert("onerror is " + msg) }, onsuccess: onsuccess, submitbutton: submitbutton, tipcss: { //(ajax)加载处理 loadCss: "", //获得焦点时的样式 focusCss: "", //提示 noticeCss: "box001", //成功 successCss: "box002", //失败 errorCss: "box003", //默认状态 defaultCss: "box004" }, getformdata: getformdata }; } //显示指定的(步)容器 function _ShowStepContainer(showNum) { for (var i = 1; i <= 3; i++) { $("div#stepDiv" + i).css("display", (i == showNum ? "block" : "none")); } } $(document).ready(function () { $("p").show(); $.formValidator.initConfig( GetInitConfigOptions(1, function () { _ShowStepContainer(2); }, "btnSubmit_Step1") ); $("#txtBuildingName").formValidator( { validatorgroup: "1", tipid: "tipBuildingName", onshow: "请输入栋号", onfocus: "栋号不能为空", oncorrect: "", tipcss: //此对象中的属性继承(extend)其对应的initConfig.tipcss的属性 { //失败 //errorCss: "onNotice" } }) .inputValidator({ min: 2, max: 10, onerror: "你输入的栋号(长度错误),请确认" }); $("#txtfloornum").formValidator({ tipid: "tipfloornum", onshow: "请输入层数", onfocus: false, oncorrect: "层数输入正确" }).inputValidator({ min: 1, max: 30, type: "value", empty: { leftempty: false, rightempty: false, emptyerror: "层数两边不能有空符号" }, onerror: "层数不能为空,值介于1-30之间" }) .regexValidator({ regexp: RegexEnum.integer_Z, onerror: "你输入的层数格式不正确,必须为数字" }); $('input[name="rd_SaleState"]:radio').formValidator({ tipid: "tipSaleState", onshow: "请选择售楼状态", onfocus: "栋号的售楼状态", oncorrect: "" }).inputValidator({ min: 1, onerror: "售楼状态必选!" }); $('input[name="ckUsage"]:checkbox').formValidator({ tipid: "tipUsage", forcevalid: true, onshow: "请选择用途", onfocus: false, oncorrect: "用途已选择" }).inputValidator({ min: 1, onerror: "请选择用途,必填" }); $("#txtShareBili").formValidator({ tipid: "tipShareBili", onshow: "请输入公摊比率", oncorrect: "" }).inputValidator({ min: 1, onerror: "公摊比率不能为空" }).regexValidator({ regexp: RegexEnum.decmal_Z, onerror: "你输入的公摊比率格式不正确,必须为数字" }); $.formValidator.initConfig( GetInitConfigOptions(2, function () { _ShowStepContainer(3); }, "btnSubmit_Step2") ); $("#txtCoveredArea").formValidator({ validatorgroup: "2", tipid: "tipCoveredArea", onshow: "请输入占地面积", onfocus: false, oncorrect: "占地面积输入正确" }).inputValidator({ min: 1, onerror: "占地面积不能为空" }) .regexValidator({ regexp: RegexEnum.integer_Z, onerror: "你输入的占地面积格式不正确,必须为数字" }); $("#txtBuildingArea").formValidator({ validatorgroup: "2", tipid: "tipBuildingArea", onshow: "请输入建筑面积", onfocus: false, oncorrect: "建筑面积输入正确" }).inputValidator({ min: 1, onerror: "建筑面积不能为空" }) .regexValidator({ regexp: RegexEnum.integer_Z, onerror: "你输入的建筑面积格式不正确,必须为数字" }); $.formValidator.initConfig( GetInitConfigOptions(3, function () { alert("验证通过"); return true; }, "btnSubmit_Step3", function (formdata) { alert("要提交的表单值:"+$.param(formdata)); for (var key in formdata) { $("#showMes_P").html($("#showMes_P").html() + "<br/>key:" + key + " | val:" + formdata[key]); } }) ); }); </script> 上面就是我对此插件主要改进的介绍,插件整体还是保持原版本的结构和思想,所做的无非是让插件可读性和易用性等更好,今天分享出来,也是希望有更多的朋友能帮忙测试看看,提些自己的意见或想法,让这个表单验证插件formValidator能更好用(不断的改进才能做到更好,改进离不开大家的建议)!   补充:需要解决改进的功能——验证可支持自由组合,如:电话和手机 只用验证其中的一个通过即可. 这个我自己尝试实现过,但效果不理想,没有想到一个比较好的解决方法,希望大家能帮忙考虑下!插件和Demo下载:

有了JS就方便了,点击一个按钮,拖黑复制自动搞定,然后CTRL+V就OK了! PHP、JS、AJALX学习中! 点击按钮,通过JS代码实现复制INPUT表单: 复制代码 代码如下: <SCRIPT LANGUAGE="JavaScript"> function copyinput() { var input=document.getElementById("inputid");//input的ID值 input.select(); //选择对象 document.execCommand("Copy"); //执行浏览器复制命令 } </SCRIPT> 点击按钮,通过JS代码实现TABLE表格: 复制代码 代码如下:

我们知道,正则表达式是一个处理字符串中很实用的技巧。然而,即便是Javascript写的很厉害的程序猿,有时也会忘掉正则表达式的语法,从而使用起来有些棘手1、正则表达式中最重要的三个符号:1.1 B在正则表达式中B有3种类型的括号:1.1.1 方括号 “[“。方括号"["内是需要匹配的字符。中括号括住的内容只匹配一个单一的字符。^[ab]$1.1.2花括号"{"花括号"{"内是指定匹配字符的数量。^[ab]{3}$ 1.1.3圆括号“(“圆括号“(“ 则是用来分组的。^(ab)$1.2 C插入符号 “^” 表示正则式的开始。^a ^用在中括号开头的时候,就表示排除括号里的字符。^[^0-9]$1.3 $美元符号“$” 表示正则式的结束。com$ 2、正则表达式验证推荐一个验证正则表达式的网址:https://regexper.com/ 2.1 示例^[0-9]{3,7}$上面正则表达式为长度最小为3,最大为7的数字。验证结果为:2.2  '│'符号相当于OR操作^(1|2)$3、快捷命令3.1 \d 表示数字[0-9] 注意d前有转义字符\^\d$ 大写D:\D表示非数字^\D$3.2 下划线的任何单词字符\w^\w$大写W :\W表示非单词^\W$ 3.3 0次或多次发生 *^[0-9]*$3.4 至少一次发生+^[0-9]+$3.5 0次或1次发生?^[0-9]?$总结以上所述是小编给大家介绍的通俗解释JavaScript正则表达式快速记忆,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

根据option的id属性,修改text值$("#sel_div .select_class option[id='-选择省-']").text(data.province).attr("selected",true); $("#sel_div .select_class option[id='-选择市-']").text( data.city).attr("selected",true); $("#sel_div .select_class option[id='-选择区-']").text( data.area).attr("selected",true); $("#sel_div .select_class option[id='-选择街-']").text( data.street).attr("selected",true);获取多个select(使用class属性,切值相同)下的所有option的text值$("#sel_div .select_class option").each(function(){ //遍历所有option标签 var text = $(this).text(); //获取option的text alert(text);//显示的是当前这个option的text值   if(txt == "选择省") $("#sel_div .select_class option[id='-选择省-']").text(data.province).attr("selected",true); if(txt == "选择市") $("#sel_div .select_class option[id='-选择市-']").text( data.city).attr("selected",true); if(txt == "选择区") $("#sel_div .select_class option[id='-选择区-']").text( data.area).attr("selected",true); if(txt == "选择街") $("#sel_div .select_class option[id='-选择街-']").text( data.street).attr("selected",true); });如果select中间没有级联关系,那么所有的option都已经加载,可以使用下面的方法显示查询出来的数据$("#sel_div .select_class option[id="+data.province+"]").attr("selected",true);$("#sel_div .select_class option[id="+data.city+"]").attr("selected",true);$("#sel_div .select_class option[id="+data.area+"]").attr("selected",true);$("#sel_div .select_class option[id="+data.street+"]").attr("selected",true);另一种获取所有option的方法,相当于将所有text拼成字符串,把每个字符存进map中var map = $("#sel_div .select_class option").map(function(){ alert($(this).text());//显示单个option的text text1 return $(this).text(); }).get().join(",");alert(map);//显示的是 text1,text2,text3alert(map[0]);//显示 t在上面的基础上进行改进,使用array数组存放查询出来的数据,在使用for循环可以对数据进行操作var array = new Array(); $("#leaf .form-control option").map(function(){ array.push($(this).text()); }) for(var i = 0; i < array.length; i ++ ){ alert(array[i]);//显示每个option的text text1,text2,text3 }以上这篇JQuery 获取多个select标签option的text内容(实例)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

分类:腾博会官方网

时间:2016-01-18 08:08:16