jQuery表单验证扩展代码(2)

1.存在的问题正如我在上一篇文章中提到的，验证提示旨在以文本和样式两种方式显示提示消息，这两种方式只能独立使用，因此对新内容和新增内容进行了扩展，使其共享。在前一篇文章中，无论是否需要必需的项目，这种验证只面对两个表单元素，文本和文本区域。在新的扩展中，还支持两个元素，单选和复选框。2.验证参数的设计基于多种选择的考虑，并对一些必要的参数进行了扩展。参数列表如下：required:是否为必填项，真假，true表示必填(*)。焦点文本：获取焦点的文本提示焦点类：获取焦点后的样式错误文本：验证错误的文本提示错误类：验证错误的样式提示成功案例类：验证成功的文本提示。Ss:成功验证了样式提示目标Id:与之前的相比，提示信息元素的id号被修改了。看完前面的文章，你就知道我把文体和文字分开了，但之前是混在一起的。这也是作为扩展需求考虑的一个步骤。然后更改了错误消息提示参数的名称。三.源代码分析是否需要jQuery表单验证扩展的验证；源代码复制代码如下： $ . fn . extend({ check required : function(input arg){//只能验证必需项。非强制无意义if(inputArg.required){ //验证是否为输入框表单if ($ (this)。is ('input') | | $ (this)。is(' text area '){//获取焦点提示$ (this)。bind ('focus '，function () {。=undefined $(this)。val()！=' '){//显示正确的消息文本addtext (inputarg.targetid，input arg . onsuccesstext)；//切换样式addclass (inputarg.targetid，input arg . onsuccessclass)；}else{ //显示焦点文本addtext (inputarg.targetid，input arg . onfocusetext)；//切换样式addclass (inputarg.targetid，inputarg.onfocus类)；} });//失焦提示$ (this)。bind ('blur '，function () {if ($ (this))。attr ('type')==' radio' | | $ (this)。attr(' type ')==' checkbox '){ var name=$。var items=$(' input[@ name=' name ' '][checked]')；if(items . length 0){ addMessage(true，Inputarg)；}else{ addMessage(false，Inputarg)；} }else{ if($(this))。val()！=undefined $(this)。val()！=''){ addMessage(true，Inputarg)；}else{ addMessage(false，Inputarg)；} } });} } } });/* * *根据不同类型的输入框判断* @ param { object } flag * @ param { object } input arg */function add message(flag，input arg){ if(flag){//显示正确的消息文本addtext (inputarg。targetid，inputarg。onsuccesstext)；//切换样式addclass (inputarg.targetid，input arg . onsuccessclass)；}else{ //显示错误消息文本addtext (inputarg.targetid，input arg . onerrortext)；//切换样式addclass (inputarg.targetid，inputarg.onerror类)；}}/* * *将显示的文本信息添加到目标控件* @ param { Object } targetId * @ param { Object }要显示的文本信息*/函数添加文本(target id，text){ if(text==undefined){ text=' '；} $(“#”TargetID)。html(“”文本)；}/* * *切换样式* @ param { Object } targetId * @ param { Object } class name显示的样式名称*/函数添加类(target id，classname) {if (classname！=未定义的类名！=' '){ $(“#”TargetID)。remove CLaSS()；$(“#”TargetID)。addClass(类名)；}}任何使用过jQuery的人都知道，jQuery是一个非常可扩展的框架，它提供了扩展核心库的功能。此表单验证基于此扩展功能进行扩展。这里还考虑了代码复用性的一些问题，将公共代码进行了分离，大大减少了最终代码。

jQuery表单验证扩展所需项的提取和复制的常用方法如下： /** *根据输入框的不同类型* @ param { object } flag * @ param { object } input arg */function add message(flag，InputArg){ if(flag){ //显示正确的消息文本addtext (inputarg.targetid，InputArg . onsuccesstext)；//切换样式addclass (inputarg.targetid，input arg . onsuccessclass)；}else{ //显示错误消息文本addtext (inputarg.targetid，input arg . onerrortext)；//切换样式addclass (inputarg.targetid，inputarg.onerror类)；}}/* * *将显示的文本信息添加到目标控件* @ param { Object } targetId * @ param { Object }要显示的文本信息*/函数添加文本(target id，text){ if(text==undefined){ text=' '；} $(“#”TargetID)。html(“”文本)；}/* * *切换样式* @ param { Object } targetId * @ param { Object } class name显示的样式名称*/函数添加类(target id，classname) {if (classname！=未定义的类名！=' '){ $(“#”TargetID)。remove CLaSS()；$(“#”TargetID)。addClass(类名)；}} /code]每一种不同的验证都涉及到添加文本消息、为不同的表单元素添加文本消息以及替换样式，所以以上三种常见的方法是分开的。在源代码中，如果($ (this)。attr ('type')==' radio' | | $ (this)。attr ('type')==' checkbox ')是一个重要的句子，因为它涉及验证元素的扩展。4.使用示例文本框测试示例绘图。

输入文本框获得焦点提示

输入文本框失去焦点错误提示

输入文本验证正确提示收音机测试样图

检验盒测试样图

检验盒验证失败提示

检验盒验证成功提示测试代码[代码]脚本语言=' JavaScript ' src=' http : jquery-1。3 .2 .量滴js ' type=' text/JavaScript '/脚本语言=' JavaScript ' src=' http : jquery-extend-1。0 .0 .js ' type=' text/JavaScript '/脚本语言=' JavaScript '类型=' text/JavaScript ' $(文档)。ready(function(){ $('#txtName ')).需要检查({需要： true，onFocusText: '必填项，onFocusClass: '注意，onErrorText: '错误提示，onErrorClass: '错误，onSuccessClass: '正确，TargetId : ' TxtNameTip ' })；$('#rdbMan ').需要检查({需要： true，onFocusText: '必填项，onFocusClass: '注意，onErrorText: '错误提示，onErrorClass: "错误"，onSuccessClass: "正确"，TargetId : " TxTsexTip " })；$(' # RDB阿曼')。需要检查({需要： true，onFocusText: '必填项，onFocusClass: '注意，onErrorText: '错误提示，onErrorClass: "错误"，onSuccessClass: "正确"，TargetId : " TxTsexTip " })；$('#rdbMan1，# RDB man 2，#rdbMan3，# RDB man 4 ').需要检查({需要： true，onFocusText: '必填项，onFocusClass: '注意，onErrorText: '错误提示，onErrorClass: '错误，onSuccessClass: '正确，TargetId : ' txthobbyTip ' })；});/脚本p标签姓名：/标签输入类型=' text ' id=' Txtname ' value=' '/span id=' Txtnamestip '/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 sospan '这里不多说了，文章持续更新中！有问题进一步做修改中.