在阅读这篇文章之前，你可以先看看前两篇文章。表单验证输入范围验证在原始验证的基础上被重写。(1)输入范围验证存在问题。第二条提到的问题，在原验证中也有同样的问题。当然，其中一些问题在这次重写中得到了解决。同时，还添加了单选、复选框和选择元素的验证。当然，时间的验证还没有解决，后续的过程中还会补充！(二)。验证参数的设计onEmptyText:显示文本onEmptyClass:显示样式OnEmptxcesstext :显示文本OnEmptxcessclass :显示样式onErrorTe当验证成功时。Xt:验证失败时显示的文本错误代码：验证失败时显示的样式聚焦获得焦点时显示的文本聚焦获得焦点时显示的样式数据类型：输入的数据类型min:输入的最小值m. Ax:输入的最大值是targetId:显示提示消息元素id的重写部分是将提示文本和样式分开，这样表单验证就可以更灵活的操作了！重写后的文章支持三种数据形式：文本、数字、日期和验证，复选框和选择也已更新。单选、复选框、选择的验证只是验证是否被选中，这里的选择对模糊事件不敏感，不如用更改事件在这里验证。

（三).验证范围源码解析框架检查输入项的范围源码解析/** * onEmptyText:当输入内容为空的时候显示文本* onEmptyClass:当输入内容为空的时候显示样式* onSuccessText:当验证成功的时候显示的文本* onSuccessClass:当验证成功的时候显示的样式* onErrorText:当验证失败的时候显示的文本* onErrorClass:当验证失败的时候显示的样式* onFocusText:当获得焦点的时候显示的文本* onFocusClass:当获得焦点的时候显示的样式*数据类型：输入的数据类型* min:输入的最小值* max:输入的最大值*目标Id:显示提示消息的元素id * @ param { Object } inputArg */$。fn。扩展({ check range : function(Inputarg){//绑定焦点事件$(这个)。bind('focus '，function(){ var flag=true；if($(this).is('input') || $(this).是('文本区域'){ if($(this).attr('type')=='radio' || $(this).attr(' type ')==' checkbox '){ var name=$(this).attr(' name ')；var items=$(' input[@ name=' name ' '][checked]')；if(items。长度0){ flag=false；} }else{ if($(this)).val()！=undefined $(this).val()！=' '){ flag=false；} } }else{ //select需要改进挑选没有集中事件，应该改为变化事件}如果(标志){ //显示获得焦点文本add TExT(InputTarg . Target id，输入参数。onfocus文本)；//切换样式addClass(inputArg.targetId，输入参数。onfocus类)；} });//绑定失去焦点事件$(这个)。bind('blur '，function(){ var flag=false；if($(this).is('input') || $(this).是('文本区域'){ if($(this).attr('type')=='radio' || $(this).attr(' type ')==' checkbox '){ var name=$(this).attr(' name ')；var items=$(' input[@ name=' name ' '][checked]')；if(items！=未定义的项目。长度=输入参数。最小项目。长度输入参数。max){ flag=true；} }else{ var值=$(这个).val()；if(value==undefined | | value==' '){//显示获得焦点文本add TExT(InputTarg . Target id，输入参数。onemptytext)；//切换样式添加类(InputAgg。目标标识，输入标记。OnEmptyclass)；} else { switch(Inputarg。数据类型){大小写' text ' : if(值。长度输入。最小|值。长度=输入。max){ flag=false；} else { flag=true } break case ' number ' : if(ISnan(value)){ flag=false；} else { if(value inputarg。min | | value=inputarg。max){ flag=false；} else { flag=true } } break case ' date ' : break } } } else {//select } if(flag){//显示获得焦点文本add TExT(InputTarg . Target id，输入参数。onsuccesstext)；//切换样式添加类(InputAgg。目标标识，输入标记。OnSuccessClass)；}else{ //显示获得焦点文本add TExT(InputTarg . Target id，输入参数。one rrortext)；//切换样式addClass(inputArg.targetId，inputArg。one rro class)；} });//选择选择框选择事件if ($(this).是(' select '){ $(this).bind('change '，function(){ var items=$(this)).find('选择了选项： ')；if(items！=未定义的项目。长度=输入。最小项目。长度输入g。最大值){//显示获得焦点文本add TExT(InputTarg . Target id，输入参数。onsuccesstext)；//切换样式添加类(InputAgg。目标标识，输入标记。OnSuccessClass)；}else{ //显示获得焦点文本add TExT(InputTarg . Target id，输入参数。one rrortext)；//切换样式addClass(inputArg.targetId，inputArg。one rro class)；} });} } });这里比较重要的是对于挑选元素的验证，选择可以选择多个选中项收音机，复选框，选择只是验证选择长度，而不会验证文本，日期。这是本文很重要的一部分。源码中也做了代码重构，有很多共同部分都提取出来，大大减少了代码量，同时也利用了框架表单验证扩展（二)中的部分方法。

（你好页：1。哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟2006年/**你是说.* @param {Object}标志* @ param { object }输入参数*/函数添加消息(标志，inputArg){ if标志} {//1740年添加文本(输入目标标识、输入参数。onsuccestext)；//范仲景（电影)addClass(inputArg.targetId、inputArg。onsuccessclass):}else{ //1740年添加文本(输入目标标识、输入参数。onerrotext)；//范仲景（电影)add class(InputTarg . Targeid、inputArg。onerrercclass)；} /**鲁仲尼鲁仲尼鲁仲尼* @param {Object} targetId吴经熊id * @param {对象}文本吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲*/function addText(targetId，text){ if(text==undefined){ text='；} $('#' targetId ').html('文本)；} /**范仲景（电影)* @param {Object} targetId吴经熊id * @param {Object}类名称1740年*/函数addClass(targetId，className){ if(className！=未定义的类名！='){ $(' # '目标id ').移除类()；$('#' targetId ').addClass(类名);} }贺盛德贺盛德贺盛德贺盛德贺盛德贺盛德。-你好选择(选择)绿筠小姐//选择贺盛瑞贺盛瑞如果($这)。是(“选择”){ $(此)。bind('change '，function(){ var items=$(此处)。查找('选项：已选定；如果(项！=未定义的项目。长度=输入参数。最小项目。伦廷普塔格。max//1740年添加文本(输入目标标识、输入参数。onsuccestext)；//范仲景（电影)addClass(inputArg.targetId、inputArg。onsuccessclass):}else{ //1740年添加文本(输入目标标识、输入参数。onerrotext)；//范仲景（电影)add class(InputTarg . Targeid、inputArg。onerrercclass)；});}贺盛德贺盛德贺盛德选择(选择)贺盛宏曰，唉哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟。（俊儿页：1。范仲淹！范仲淹

当输入内容的长度不匹配时。

提示输入字符串符合当前要求。

当未输入文本时，验证数字的验证。

获取焦点提示

输入的数字不符合范围。

成功验证复选框。

其中一个复选框组获得焦点。

选择会议数据

为select 选择多个数量选项。

选择太多

验证成功（六).验证测试代码复制代码代码如下：DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN ' ' http://www .w3。org/TR/HTML 4/严格。DTD ' HTML头元http-equiv=' Content-Type ' Content=' text/HTML；字符集=UTF-8 '标题无标题文档/标题链接类型='文本/CSS ' rel='样式表href='new_file.css'/脚本语言=' JavaScript ' src=' http : jquery-1。3 .2 .量滴js ' type=' text/JavaScript '/脚本语言=' JavaScript ' src=' http : jquery-extend-1。0 .0 .js ' type=' text/JavaScript Ready(function(){ $(' # TxtName ')).检查范围({ onFocusText: '必填项，onFocusClass: '注意，targetId:'txtNameTip '，onSuccessText: '验证成功，onSuccessClass: '正确，onErrorText: '你真不听话，请认真填写，onErrorClass: '错误，min:6，max:12，dataType: '文本' });$('#rdbMan，#rdbWoman ').检查范围({ onFocusText: '必填项，onFocusClass: ' notice '，target id : ' txtSexTip ' })；$('#txtPass2 ').检查范围({ onFocusText: '必填项，onFocusClass: '注意，targetId:'txtPass2Tip '，onSuccessText: '验证成功，onSuccessClass: '正确，onErrorText: '你真不听话，请认真填写，onErrorClass: '错误，min:10，max:60，dataType: '文本' });$('#rdbMan1，#rdbWoman2，#rdbMan3，#rdbWoman4 ').检查范围({ onFocusText: '必填项，onFocusClass: '注意，targetId:'txthobbyTip '，onSuccessText: '验证成功，onSuccessClass: '正确，onErrorText: '你真不听话，请认真填写，onErrorClass: '错误，min:1，max:3，dataType: '文本' });$('#txtAge ').检查范围({ onFocusText: '必填项，onFocusClass: '注意，targetId:'txtAgeTip '，onSuccessText: '验证成功，onSuccessClass: '正确，onErrorText: '输入的范围为10-60 '，一个箭头： '错误，min:10，max:60，dataType: '数字' });$('#ddlOption ').检查范围({ onFocusText: '必填项，onFocusClass: '注意，targetId:'ddlOptionTip '，onSuccessText: '验证成功，onSuccessClass: '正确，onErrorText: '你真不听话，请认真填写，onErrorClass: '错误，min:1，max:2，dataType: '数字' });$('#rdbMan，#rdbWoman ').检查范围({ onFocusText: '必填项，onFocusClass: '注意，targetId:'txtSexTip '，onSuccessText: '验证成功，onSuccessClass: '正确，onErrorText: '你真不听话，请认真填写，onErrorClass: '错误，min:1，max:2，dataType: '数字' });});/脚本/头体p标签姓名：/标签输入类型=' text ' id=' Txtname ' value=' '/span id=' Txtnamestip '/span/p p标签年龄：/标签输入类型=' text ' id=' TxTage '值=' '/span id=' TxTageTip '/span/p标签描述：/标签文本区域id=' TxTareA '/文本区域span id=' TxTarTap '/span/p标签密码1:/标签text area id=' TxTPass 1 '/text arespan id=' TxTPass 1 TiP '/span/p标签密码2:/标签text area id=' TxtPass 2 '/text area span id=' TxtPass 2 TiP '/span/p p标签性别：/标签跨度输入id='rdbMan '类型='收音机'名称='性'值='男' /男输入id=阿曼'类型='收音机'名称='性'值='女' /女/span span id=' TxTsexTip '/span/p p标签爱好：/标签跨度输入id='rdbMan1 '类型='复选框'名称='爱好'值='hobby1' /aa输入id='rdbWoman2 '类型='复选框'名称='爱好'值='霍布斯2' /bb输入id='rdbMan3 '类型='复选框'名称='爱好'值='hobby3' /aa输入id='rdbWoman4 '类型='复选框'名称='爱好'值='爱好4 '/bb/span id=' txt ospan/p p标签地区：/标签跨度选择id='ddlOption '名称=“面积”倍数=“倍数”选项值=' 0 ' 00000/选项值=' 1 ' 11111/选项值=' 2 ' 22222/选项值=' 3 ' 33333/选项值=' 4 ' 44444/选项/选择/span id=' ddlOptionTip '/span/p/body/html以上是测试的部分代码，不过基本可以说明这个方法的的使用方式。这里不多写了，后续不断更新 .