jquery表单验证扩展三
来源：互联网 发布：淘宝里权重是什么意思 编辑：程序博客网 时间：2024/06/05 18:24
(一). 输入范围验证存在问题
在第二篇上提到的问题，在原有的验证中也存在相同的问题。当然在这次改写中也解决了一些这些问题。同时也添加了对radio，checkbox，select 元素的验证。当然对于时间的验证仍没有解决，后续过程中会继续补充！
(二). 验证参数的设计
onEmptyText: 当输入内容为空的时候显示文本
onEmptyClass: 当输入内容为空的时候显示样式
onSuccessText: 当验证成功的时候显示的文本
onSuccessClass: 当验证成功的时候显示的样式
onErrorText:当验证失败的时候显示的文本
onErrorClass:当验证失败的时候显示的样式
onFocusText: 当获得焦点的时候显示的文本
onFocusClass:当获得焦点的时候显示的样式
dataType:输入的数据类型
min:输入的最小值
max:输入的最大值
targetId:显示提示消息的元素id
改写的部分就是将提示性文字和样式都单独隔离出来，可以更好灵活的操作表单验证！
改写的文章支持text,number,date 三种 数据形式，而且在radio，checkbox，select的验证也有更新。
radio，checkbox ，select 验证只是验证是否选中，而且这里的select 对于blur 事件并不敏感，所以这里采用的change事件来验证比较好。
（三）源码：
jQuery检查输入项的范围 源码解析Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->/** * onEmptyText: 当输入内容为空的时候显示文本 * onEmptyClass: 当输入内容为空的时候显示样式 * onSuccessText: 当验证成功的时候显示的文本 * onSuccessClass: 当验证成功的时候显示的样式 * onErrorText:当验证失败的时候显示的文本 * onErrorClass:当验证失败的时候显示的样式 * onFocusText: 当获得焦点的时候显示的文本 * onFocusClass:当获得焦点的时候显示的样式 * dataType:输入的数据类型 * min:输入的最小值 * max:输入的最大值 * targetId:显示提示消息的元素id * @param {Object} inputArg */$.fn.extend({ checkRange:function(inputArg){ //绑定焦点事件 $(this).bind("focus",function(){ var flag=true; if($(this).is("input") || $(this).is("textarea")){ if($(this).attr("type")=="radio" || $(this).attr("type")=="checkbox"){ var name=$(this).attr("name"); var items=$('input[@name=""+name+""][checked]'); if(items.length>0){ flag=false; } }else{ if($(this).val()!=undefined && $(this).val()!=""){ flag=false; } } }else{ //select 需要改进 select没有focus事件,应该改为change事件 } if (flag) { //显示获得焦点文本 addText(inputArg.targetId, inputArg.onFocusText); //切换样式 addClass(inputArg.targetId, inputArg.onFocusClass); } }); //绑定失去焦点事件 $(this).bind("blur",function(){ var flag=false; if($(this).is("input") || $(this).is("textarea")){ if($(this).attr("type")=="radio" || $(this).attr("type")=="checkbox"){ var name=$(this).attr("name"); var items=$('input[@name=""+name+""][checked]'); if(items!=undefined && items.length>=inputArg.min && items.length<inputArg.max){ flag=true; } }else{ var value=$(this).val(); if (value == undefined || value == "") { //显示获得焦点文本 addText(inputArg.targetId,inputArg.onEmptyText); //切换样式 addClass(inputArg.targetId,inputArg.onEmptyClass); }else { switch (inputArg.dataType) { case "text": if(value.length < inputArg.min || value.length >= inputArg.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){ //显示获得焦点文本 addText(inputArg.targetId, inputArg.onSuccessText); //切换样式 addClass(inputArg.targetId, inputArg.onSuccessClass); }else{ //显示获得焦点文本 addText(inputArg.targetId, inputArg.onErrorText); //切换样式 addClass(inputArg.targetId, inputArg.onErrorClass); } }); //select 选择框选择事件 if ($(this).is("select")) { $(this).bind("change", function(){ var items=$(this).find("option:selected"); if(items!=undefined && items.length>=inputArg.min && items.length<inputArg.max){ //显示获得焦点文本 addText(inputArg.targetId, inputArg.onSuccessText); //切换样式 addClass(inputArg.targetId, inputArg.onSuccessClass); }else{ //显示获得焦点文本 addText(inputArg.targetId, inputArg.onErrorText); //切换样式 addClass(inputArg.targetId, inputArg.onErrorClass); } }); } }});这里比较重要的是对于select元素的验证，select可以选择多个选中项。radio，checkbox，select 只是验证选择长度，而不会验证text,date 。这是本文很重要的一部分。源码中也做了代码重构，有很多共同部分都提取出来，大大减少了代码量，同时也利用了jQuery表单验证扩展(二) 中的部分方法。(四). 提取的共同代码解析
第二篇中的公用方法Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->/** * 根据输入框的不同类型来判断 * @param {Object} flag * @param {Object} inputArg */function addMessage(flag,inputArg){ if(flag){ //显示正确信息文本 addText(inputArg.targetId,inputArg.onSuccessText); //切换样式 addClass(inputArg.targetId,inputArg.onSuccessClass); }else{ //显示错误信息文本 addText(inputArg.targetId,inputArg.onErrorText); //切换样式 addClass(inputArg.targetId,inputArg.onErrorClass); }}/** * 给目标控件添加显示的文本信息 * @param {Object} targetId 目标控件id * @param {Object} text 需要显示的文本信息 */function addText(targetId,text){ if(text==undefined){ text=""; } $("#"+targetId).html(" "+text);}/** * 切换样式 * @param {Object} targetId 目标控件id * @param {Object} className 显示的样式名称 */function addClass(targetId,className){ if(className!=undefined && className!=""){ $("#"+targetId).removeClass(); $("#"+targetId).addClass(className); }}这段代码主要主要用于添加文本提示和样式问题。
对于select元素的验证代码Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->//select 选择框选择事件 if ($(this).is("select")) { $(this).bind("change", function(){ var items=$(this).find("option:selected"); if(items!=undefined && items.length>=inputArg.min && items.length<inputArg.max){ //显示获得焦点文本 addText(inputArg.targetId, inputArg.onSuccessText); //切换样式 addClass(inputArg.targetId, inputArg.onSuccessClass); }else{ //显示获得焦点文本 addText(inputArg.targetId, inputArg.onErrorText); //切换样式 addClass(inputArg.targetId, inputArg.onErrorClass); } }); }这段代码用于验证select选择框元素，支持多项选择验证。
(五). 验证使用例子
文本框输入验证
当输入的内容长度不符
输入的字符串满足当前要求提示
当不输入文本的时候验证
对于数字的验证
获得焦点提示问题
输入的数字不满足范围
验证成功
对于checkbox的验证
checkbox组其中之一获得焦点
选择满足数据
选择超过数量
对于select 多项选择
选择数量过多
验证成功
(六). 验证测试代码
jQuery检查输入框是否为必填项 测试代码Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <link type="text/css" rel="stylesheet" href="new_file.css"/> <script language="JavaScript" src="jquery-1.3.2.min.js" type="text/javascript"></script> <script language="JavaScript" src="jquery-extend-1.0.0.js" type="text/javascript"></script> <script language="JavaScript" type="text/javascript"> $(document).ready(function(){ $("#txtName").checkRange({ onFocusText:"必填项", onFocusClass:"notice", targetId:"txtNameTip", onSuccessText:"验证成功", onSuccessClass:"correct", onErrorText:"你真不听话，请认真填写", onErrorClass:"error", min:6, max:12, dataType:"text" }); $("#rdbMan,#rdbWoman").checkRange({ onFocusText:"必填项", onFocusClass:"notice", targetId:"txtSexTip" }); $("#txtPass2").checkRange({ onFocusText:"必填项", onFocusClass:"notice", targetId:"txtPass2Tip", onSuccessText:"验证成功", onSuccessClass:"correct", onErrorText:"你真不听话，请认真填写", onErrorClass:"error", min:10, max:60, dataType:"text" }); $("#rdbMan1,#rdbWoman2,,#rdbMan3,,#rdbWoman4").checkRange({ onFocusText:"必填项", onFocusClass:"notice", targetId:"txthobbyTip", onSuccessText:"验证成功", onSuccessClass:"correct", onErrorText:"你真不听话，请认真填写", onErrorClass:"error", min:1, max:3, dataType:"text" }); $("#txtAge").checkRange({ onFocusText:"必填项", onFocusClass:"notice", targetId:"txtAgeTip", onSuccessText:"验证成功", onSuccessClass:"correct", onErrorText:"输入的范围为10-60", onErrorClass:"error", min:10, max:60, dataType:"number" }); $("#ddlOption").checkRange({ onFocusText:"必填项", onFocusClass:"notice", targetId:"ddlOptionTip", onSuccessText:"验证成功", onSuccessClass:"correct", onErrorText:"你真不听话，请认真填写", onErrorClass:"error", min:1, max:2, dataType:"number" }); $("#rdbMan,#rdbWoman").checkRange({ onFocusText:"必填项", onFocusClass:"notice", targetId:"txtSexTip", onSuccessText:"验证成功", onSuccessClass:"correct", onErrorText:"你真不听话，请认真填写", onErrorClass:"error", min:1, max:2, dataType:"number" }); }); </script> </head> <body> <p> <label>姓名:</label><input type="text" id="txtName" value=""/><span id="txtNameTip"></span> </p> <p> <label>年龄:</label><input type="text" id="txtAge" value=""/><span id="txtAgeTip"></span> </p> <p> <label>描述:</label><textarea id="txtArea"></textarea><span id="txtAreaTip"></span> </p> <p> <label>密码1:</label><textarea id="txtPass1"></textarea><span id="txtPass1Tip"></span> </p> <p> <label>密码2:</label><textarea id="txtPass2"></textarea><span id="txtPass2Tip"></span> </p> <p> <label>性别:</label> <span> <input id="rdbMan" type="radio" name="sex" value="男" />男 <input id="rdbWoman" type="radio" name="sex" value="女" />女 </span> <span id="txtSexTip"></span> </p> <p> <label>爱好:</label> <span> <input id="rdbMan1" type="checkbox" name="hobby" value="hobby1" />aa <input id="rdbWoman2" type="checkbox" name="hobby" value="hobby2" />bb <input id="rdbMan3" type="checkbox" name="hobby" value="hobby3" />aa <input id="rdbWoman4" type="checkbox" name="hobby" value="hobby4" />bb </span> <span id="txthobbyTip"></span> </p> <p> <label>地区:</label> <span> <select id="ddlOption" name="area" multiple="multiple"> <option value="0">00000</option> <option value="1">11111</option> <option value="2">22222</option> <option value="3">33333</option> <option value="4">44444</option> </select> </span> <span id="ddlOptionTip"></span> </p> </body></html>- jquery表单验证扩展三
- jQuery 表单验证扩展代码(三)
- jquery表单验证扩展一
- jquery表单验证扩展二
- 扩展jQuery EasyUI 的表单验证
- jQuery 表单验证扩展代码(一)
- jQuery 表单验证扩展代码(二)
- 表单验证Jquery扩展方法类
- JQuery笔记（表单验证） 三
- 三种JQuery表单验证方式
- 学习--jquery 自定义插件 可扩展 表单验证
- easyUI表单验证扩展
- easyui 表单验证扩展
- JQuery EasyUI表单-表单验证
- jquery 表单验证插件
- JQuery验证表单例子
- jQuery对表单验证
- jquery表单验证插件
- SqlServer和Oracle中一些常用的sql语句10 特殊应用
- 25个完美的Opencart模板，让顾客无法抗拒！
- 【Windows7 64位与32位安全性大对比】
- MFC中快速应用OpenCV
- vmware环境下linux中创建samba服务器
- jquery表单验证扩展三
- Protel 2004 电路设计 鲁捷，焦振宇，孟凡文编著
- 【转】深入理解Linux内核--信号（阅读笔记）
- Fedora9下Seismic Unix地震数据处理系统（SU）安装
- Android Button
- 关于我
- ubuntu13.04 编译环境
- crtmpserver笔记之文档结构
- poj 1384 piggy-bank
