jQuery表单验证扩展(4)

周末写的JQuery表单验证扩展(3)本文点击率太低。不知道是太不达标还是其他原因。我写这篇文章只是为了分享我写代码的经验，巩固我所学到的东西！文章如有问题，请指正！本文介绍了jQuery表单验证扩展(一)中控件值的比较。存在的问题本文提到的控制值对比和第一个没有太大区别，唯一比较新的是样式处理。同时简化了代码。但是在这里，我会单独解释。这篇文章很简单，所以不会有大的解释。

(二)。参数介绍onFocusText:获取焦点提示文本onFocusClass:获取焦点样式onEmptyText:显示文本onEmptyClass:显示样式onErrorText:验证输入为空时错误显示文本onErrorClass333。输入验证错误显示样式成功文本：输入成功显示文本成功类别：输入成功显示样式comType:比较类型数据类型：输入比较内容数据类型：输入比较内容comId:比较目标的数据类型。控件ID targetId:用于显示提示信息的控件ID。这里的比较类型如下： "==" "！=""""=""=" "比较的数据类型如下：“文本”“数字”“日期”此处尚未处理日期数据类型。在后面的过程中更新(3)。控件值之间的比较源代码分析jQuery控件值之间的比较源代码分析复制代码如下： /** * onFocusText:获取焦点提示文本* onFocusClass:获取焦点样式* onEmptyText:输入项为空时显示文本*。当输入项为空时，显示样式为空*验证错误显示文本*输入验证错误显示样式*成功文本：成功类：输入成功显示样式*。ComType:比较类型* dataType:输入比较内容的数据类型* comId:比较目标控件ID * targetId:用于显示提示信息的控件ID * @ param { object } input targ */$ . fn . extend({ check compare : function(input arg){//仅验证输入框信息if ($ (this))。is ('input') | | $ (this)。is(' text area '){ if($(this)。attr ('type ')。='radio' $(这个)。attr('type ')！='checkbox'){ //bind获取焦点事件$ (this)。bind ('focus '，function () {var value=$ (this))。val()；if(值！=未定义的值！=''){ }else{ //显示焦点文本addtext (inputarg.targetid，input arg . onemptytext)；//切换样式addclass (inputarg.targetid，input arg . onemptyclass)；} });//绑定事件$ (this)。bind ('blur '，function () {var value=$ (this)。val()；if(value==undefined | | value==' '){//显示焦点文本AddText (inputarg.targetid，inputarg . onemptytext)；//切换样式addclass (inputarg.targetid，input arg . onemptyclass)；} else { var target value=$(' # ' inputarg . COmid)。val()；var标志=falseswitch(Inputarg . DataType){ case ' text ' : if(Inputarg . ComType=='=='){ flag=value==TargetValue？true:false}else if(inputArg.comType=='！='){ flag=value！=targetValue？true:false} breakcase ' number ' : if(Inputarg . ComType=='=='){ flag=value==TargetValue？true:false}else if(inputArg.comType=='！='){ flag=value！=targetValue？true:false} else if(InputAgg . ComType==' '){ flag=ValueTargetValue？true:false} else if(Inputarg . ComType=='='){ flag=value=TargetValue？true:false} else if(InputAgg . ComType==' '){ flag=ValueTargetValue？true:false} else if(Inputarg . ComType=='='){ flag=value=TargetValue？true:false} break案例“日期”:中断；} if(flag){ //显示焦点文本addtext (inputarg.targetid，input arg . onsuccesstext)；//切换样式addclass (inputarg.targetid，input arg . onsuccessclass)；}else{ //显示焦点文本addtext (inputarg.targetid，input arg . onerrortext)；//切换样式addclass (inputarg.targetid，inputarg.onerror类)；} } });} } } });其实这段代码很简单，因为它不涉及复杂的判断，只涉及不同类型值之间的比较，同时也限制了要比较的控件类型：text和textarea。这大大简化了验证的复杂性。该代码相对简化。这里的简化不是函数的简化，而是代码的重构和方法的提取。它使用了以前文章的功能和方法，用于添加文本和修改样式信息。

安其林安其林安其林安其林杨俊钦说你好绿筠小姐3330/* *你是说.* @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(类名);} }范仲淹还是范仲淹，杨俊钦先生，贺盛德贺盛德贺盛德，韦恩佐韦恩佐韦恩佐韦恩佐，范仲淹，范仲淹！（你好页：1。我的天啊，我的天啊！我的天啊！我的天啊！我的天啊！我的天啊！我的天啊！我的天啊！我的天啊！我的天啊！我的天啊！我的天啊！我的天啊！我的天啊！我的天啊！我的天啊！我的天啊！我的天啊

获得焦点时候提示

失去焦点验证错误提示

失去焦点验证成功以上是对字符的比较验证，其验证测试代码如下复制代码代码如下： html头元http-equiv='内容-类型' Content=' text/html；字符集=UTF-8 '标题无标题文档/标题链接类型='文本/CSS ' rel='样式表href='new_file.css'/脚本语言=' JAVAScript ' type=' text/JAVAScript ' src=' http : jquery-1。3 .2 .量滴js /脚本语言=' JavaScript ' type=' text/JavaScript ' src=' http 3360 jquery-extend-1。0 .0 .jsready(function(){ $(' # TxtPass 2 ')).检查比较({ onFocusText: '要和上面的填写一样哦，onFocusClass: '注意，onEmptyText: '不允许为空，你要听话点，onEmptyClass: '错误，onErrorText: '验证错误了，请你认真填写，onErrorClass: '错误，onSuccessText: '恭喜啊成功了，onSuccessClass: '正确，comType:'='，dataType: '文本，comId:'txtPass1 '，target id : ' TxtPass 2 TiP ' })；});/脚本/头体p标签密码1:/标签输入类型=' text ' id=' Txtpass 1 '值=' '/span id=' Txtpass 1tip '/span/p p标签密码2:/label input type=' text ' id=' TxtPass 2 ' value=' '/span id=' TxtPass 2tip '/span/p/body/html数字之间的验证

数字验证获得焦点提示作用

数字验证失去焦点验证失败

数字验证失去焦点验证成功复制代码代码如下： html头元http-equiv='内容-类型' Content=' text/html；字符集=UTF-8 '标题无标题文档/标题链接类型='文本/CSS ' rel='样式表href='new_file.css'/脚本语言=' JAVAScript ' type=' text/JAVAScript ' src=' http : jquery-1。3 .2 .量滴js /脚本语言=' JavaScript ' type=' text/JavaScript ' src=' http 3360 jquery-extend-1。0 .0 .jsready(function(){ $(' # TxtPass 2 ')).检查比较({ onFocusText: '结果要比前面的大，onFocusClass: '注意，onEmptyText: '不允许为空，你要听话点，onEmptyClass: '错误，onErrorText: '验证错误了，请你认真填写，onErrorClass: '错误，onSuccessText: '恭喜啊成功了，onSuccessClass: '正确，comType: ' '，dataType: '数字，comId:'txtPass1 '，target id : ' TxtPass 2 TiP ' })；});/脚本/头体p标签密码1:/标签输入类型=' text ' id=' Txtpass 1 '值=' '/span id=' Txtpass 1tip '/span/p p标签密码2:/label input type=' text ' id=' TxtPass 2 ' value=' '/span id=' TxtPass 2tip '/span/p/body/html文章内容不想做过多的解释了，此文非常简单，相对于前面几篇文章来说。表单验证扩展不断更新中，后续期待..