jQuery 表单验证扩展(三)


Posted in Javascript onOctober 20, 2010

在看这篇文章之前, 可以看看前两篇文章,表单验证输入范围验证是在原有的基础上改写的。

(一). 输入范围验证存在问题

在第二篇上提到的问题,在原有的验证中也存在相同的问题。当然在这次改写中也解决了一些这些问题。同时也添加了对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检查输入项的范围 源码解析
/**
* 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表单验证扩展(二) 中的部分方法。

(四). 提取的共同代码解析

第二篇中的公用方法
/**
* 根据输入框的不同类型来判断
* @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元素的验证代码
//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选择框元素,支持多项选择验证。

(五). 验证使用例子

文本框输入验证

jQuery 表单验证扩展(三)  当输入的内容长度不符

jQuery 表单验证扩展(三) 输入的字符串满足当前要求提示

jQuery 表单验证扩展(三) 当不输入文本的时候验证

对于数字的验证

jQuery 表单验证扩展(三)  获得焦点提示问题

jQuery 表单验证扩展(三) 输入的数字不满足范围

jQuery 表单验证扩展(三) 验证成功

对于checkbox的验证

jQuery 表单验证扩展(三) checkbox组其中之一获得焦点

jQuery 表单验证扩展(三) 选择满足数据

jQuery 表单验证扩展(三) 选择超过数量

对于select 多项选择

jQuery 表单验证扩展(三) 选择数量过多

jQuery 表单验证扩展(三) 验证成功
(六). 验证测试代码

<!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>

以上是测试的部分代码 ,不过基本可以说明这个方法的的使用方式。
这里不多写了,后续不断更新......
Javascript 相关文章推荐
jQuery 获取URL的GET参数值的小例子
Apr 18 Javascript
IE中图片的onload事件无效问题和解决方法
Jun 06 Javascript
js库Modernizr的介绍和使用
May 07 Javascript
微信小程序实现登录页云层漂浮的动画效果
May 05 Javascript
通过命令行生成vue项目框架的方法
Jul 12 Javascript
微信小程序 rich-text的使用方法
Aug 04 Javascript
2种在vue项目中使用百度地图的简单方法
Sep 28 Javascript
js实现延迟加载的几种方法详解
Jan 19 Javascript
vuejs移动端实现div拖拽移动
Jul 25 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
Sep 17 Javascript
elementUI同一页面展示多个Dialog的实现
Nov 19 Javascript
layui使用及简单的三级联动实现教程
Dec 01 Javascript
jQuery 表单验证扩展代码(二)
Oct 20 #Javascript
事件模型在各浏览器中存在差异
Oct 20 #Javascript
自写简单JS判断是否已经弹出页面
Oct 20 #Javascript
javascript attachEvent绑定多个事件执行顺序问题
Oct 20 #Javascript
兼容IE与firefox火狐的回车事件(js与jquery)
Oct 20 #Javascript
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
Oct 20 #Javascript
关于javascript中this关键字(翻译+自我理解)
Oct 20 #Javascript
You might like
ADODB的数据库封包程序库
2006/12/31 PHP
深入理解用mysql_fetch_row()以数组的形式返回查询结果
2013/06/05 PHP
浅析memcache启动以及telnet命令详解
2013/06/28 PHP
两种php给图片加水印的实现代码
2020/04/18 PHP
php自动提交表单的方法(基于fsockopen与curl)
2016/05/09 PHP
PHP+iframe图片上传实现即时刷新效果
2016/11/18 PHP
JavaScript国旗变换效果代码
2008/08/13 Javascript
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
JavaScript设置获取和设置属性的方法
2015/03/04 Javascript
JS中事件冒泡和事件捕获介绍
2016/12/13 Javascript
JS实现的RGB网页颜色在线取色器完整实例
2016/12/21 Javascript
jQuery实现的滑块滑动导航效果示例
2018/06/04 jQuery
js 下拉菜单点击旁边收起实现(踩坑记)
2019/09/29 Javascript
js事件机制----捕获与冒泡机制实例分析
2020/05/22 Javascript
[03:54]Ehome出征西雅图 回顾2016国际邀请赛晋级之路
2016/08/02 DOTA
[16:01]夜魇凡尔赛茶话会 第二期01:你比划我猜
2021/03/11 DOTA
Python算法之栈(stack)的实现
2014/08/18 Python
Python多进程同步Lock、Semaphore、Event实例
2014/11/21 Python
Python字符编码判断方法分析
2016/07/01 Python
Python3调用微信企业号API发送文本消息代码示例
2017/11/10 Python
快速了解Python中的装饰器
2018/01/11 Python
python http基本验证方法
2018/12/26 Python
python 控制台单行刷新,多行刷新实例
2020/02/19 Python
解决 jupyter notebook 回车换两行问题
2020/04/15 Python
一篇文章带你搞定Ubuntu中打开Pycharm总是卡顿崩溃
2020/11/02 Python
你应该知道的30个css选择器
2014/03/19 HTML / CSS
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
2019/07/18 HTML / CSS
有影响力的人、名人和艺术家的官方商品:Represent
2019/11/26 全球购物
随机分配座位,共50个学生,使学号相邻的同学座位不能相邻
2014/01/18 面试题
中专药剂专业应届毕的自我评价
2013/12/27 职场文书
卫校中专生的自我评价
2014/01/15 职场文书
3的组成教学反思
2014/04/30 职场文书
入党综合考察材料
2014/06/02 职场文书
《惊弓之鸟》教学反思
2016/02/20 职场文书
类和原型的设计模式之复制与委托差异
2022/07/07 Javascript