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 相关文章推荐
JS继承 笔记
Jul 13 Javascript
js动态删除div元素基本思路及实现代码
May 08 Javascript
JS获取各种宽度、高度的简单介绍
Dec 19 Javascript
jQuery中noConflict()用法实例分析
Feb 08 Javascript
javascript实现点击提交按钮后显示loading的方法
Jul 03 Javascript
BootStrap扔进Django里的方法详解
May 13 Javascript
详解JavaScript RegExp对象
Feb 04 Javascript
详解Node.js开发中的express-session
May 19 Javascript
vue与bootstrap实现时间选择器的示例代码
Aug 26 Javascript
基于Node.js实现压缩和解压缩的方法
Feb 13 Javascript
使用Node.js实现一个多人游戏服务器引擎
Mar 13 Javascript
vue操作dom元素的3种方法示例
Sep 20 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模拟SQL Server的两个日期处理函数
2006/10/09 PHP
网站防止被刷票的一些思路与方法
2015/01/08 PHP
php可应用于面包屑导航的递归寻找家谱树实现方法
2015/02/02 PHP
php结合ajax实现手机发红包的案例
2016/10/13 PHP
laravel 实现上传图片到本地和前台访问示例
2019/10/21 PHP
有关于eclipse配置spket需要注意的一些地方
2013/04/07 Javascript
javascript实现回车键提交表单方法总结
2015/01/10 Javascript
jQuery EasyUI封装简化操作
2016/09/18 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
2017/01/04 Javascript
微信小程序中多个页面传参通信的学习与实践
2017/05/05 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
2017/09/10 Javascript
Bootstrap一款超好用的前端框架
2017/09/25 Javascript
解读vue生成的文件目录结构及说明
2017/11/27 Javascript
Thinkjs3新手入门之如何使用静态资源目录
2017/12/06 Javascript
Vue 中axios配置实例详解
2018/07/27 Javascript
vue单页缓存方案分析及实现
2018/09/25 Javascript
JQuery发送ajax请求时中文乱码问题解决
2019/11/14 jQuery
vue中使用WX-JSSDK的两种方法(推荐)
2020/01/18 Javascript
mpvue实现微信小程序快递单号查询代码
2020/04/03 Javascript
Javascript如何递归遍历本地文件夹
2020/08/06 Javascript
Python编写屏幕截图程序方法
2015/02/18 Python
python通过apply使用元祖和列表调用函数实例
2015/05/26 Python
Python探索之自定义实现线程池
2017/10/27 Python
python pyinstaller 加载ui路径方法
2019/06/10 Python
Python中IP地址处理IPy模块的方法
2019/08/16 Python
Pycharm导入anaconda环境的教程图解
2020/07/31 Python
input元素的url类型和email类型简介
2012/07/11 HTML / CSS
Linux文件操作命令都有哪些
2015/02/27 面试题
毕业生幼师求职自荐信
2013/10/01 职场文书
销售经理工作职责范文
2013/12/03 职场文书
人民教师的自我评价分享
2014/02/21 职场文书
年终晚会活动方案
2014/08/21 职场文书
七夕相亲活动策划方案
2014/08/31 职场文书
2015年“世界无车日”活动方案
2015/05/06 职场文书
财产分割协议书
2016/03/22 职场文书
Python Django / Flask如何使用Elasticsearch
2022/04/19 Python