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滚动加载图片实现原理
Dec 14 Javascript
详解js图片轮播效果实现原理
Dec 17 Javascript
基于jquery实现智能表单验证操作
May 09 Javascript
一次$.getJSON不执行的简单记录
Jul 19 Javascript
AngularJS基础 ng-value 指令简单示例
Aug 03 Javascript
BootStrapTable 单选及取值的实现方法
Jan 10 Javascript
Bootstrap表单使用方法详解
Feb 17 Javascript
js编写简单的计时器功能
Jul 15 Javascript
JavaScript实现购物车基本功能
Jul 21 Javascript
Vuex的基本概念、项目搭建以及入坑点
Nov 04 Javascript
解决layui弹框失效的问题
Sep 09 Javascript
three.js显示中文字体与tween应用详析
Jan 04 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
PHP 文件上传功能实现代码
2009/06/24 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
PHP预定义超全局数组变量小结
2018/08/20 PHP
javascript里模拟sleep(两种实现方式)
2013/01/25 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
2015/10/28 Javascript
CSS或者JS实现鼠标悬停显示另一元素
2016/01/22 Javascript
JS生成不重复的随机数组的简单实例
2016/07/10 Javascript
基于JS实现的随机数字抽签实例
2016/12/08 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
2016/12/31 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
2017/01/09 Javascript
jq checkbox 的全选并ajax传参的实例
2017/04/01 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
2017/06/13 Javascript
浅谈super-vuex使用体验
2018/06/25 Javascript
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
python使用urllib2提交http post请求的方法
2015/05/26 Python
Python脚本文件打包成可执行文件的方法
2015/06/02 Python
解决Pycharm中import时无法识别自己写的程序方法
2018/05/18 Python
django js实现部分页面刷新的示例代码
2018/05/28 Python
Python面向对象程序设计之类的定义与继承简单示例
2019/03/18 Python
python实现简单银行管理系统
2019/10/25 Python
Python猴子补丁知识点总结
2020/01/05 Python
Python实现检测文件的MD5值来查找重复文件案例
2020/03/12 Python
使用pytorch实现论文中的unet网络
2020/06/24 Python
如何基于Python Matplotlib实现网格动画
2020/07/20 Python
HTML5 video播放器全屏(fullScreen)方法实例
2015/04/24 HTML / CSS
Pop In A Box英国:Funko POP搪胶公仔
2019/05/27 全球购物
结婚典礼证婚词
2014/01/08 职场文书
作弊检讨书1000字
2014/02/01 职场文书
我爱家乡演讲稿
2014/09/12 职场文书
处级干部反四风个人对照检查材料思想汇报
2014/09/27 职场文书
运动会表扬稿
2015/01/16 职场文书
构建和谐校园倡议书
2015/01/19 职场文书
实习证明模板
2015/06/16 职场文书
2016年优秀共青团员事迹材料
2016/02/25 职场文书
CSS3 制作的书本翻页特效
2021/04/13 HTML / CSS
解决Goland 同一个package中函数互相调用的问题
2021/05/06 Golang