jQuery 表单验证扩展(四)

2024-12-07 10:14:02

周末写的 jQuery 表单验证扩展(三) 这篇文章点击率过低，不知道是文章太失水准还是什么其他原因，这里写文章只是为了分享一下自己写代码的心得，同时也是巩固自己所学的东西!如果文章中存在问题，请大家多多斧正！本篇文章介绍jQuery 表单验证扩展中的控件值的比较

(一). 存在的问题
这篇文章和第一篇中提到的控件值之间的比较没有多大的区别，唯一更近的就是在样式的处理。同时就是对代码进行了简化。但是这里还是单独拿出来讲解一下，此文非常简单，所以不会有大篇幅的讲解。

(二). 参数介绍
onFocusText:获得焦点提示文字
onFocusClass:获得焦点样式
onEmptyText:当输入项为空显示文字
onEmptyClass:当输入项为空显示样式
onErrorText:验证错误显示文字
onErrorClass:输入验证错误显示样式
onSuccessText:输入成功显示文本
onSuccessClass:输入成功显示样式
comType:比较类型
dataType:输入比较内容的数据类型
dataType:输入比较内容的数据类型
comId:相比较的目标控件ID
targetId:用于显示提示信息的控件id

这里的比较类型分为如下几种: “==” “！=” “>” “>=” “<” <=“”
比较的数据类型分为如下几种: "text" "number" "date"
这里对date 数据类型还没有做任何处理，在后期过程中更新

(三). 控件值之间的比较源码解析
jQuery控件值之间的比较源码解析

代码如下:

/**
* onFocusText:获得焦点提示文字
* onFocusClass:获得焦点样式
* onEmptyText:当输入项为空显示文字
* onEmptyClass:当输入项为空显示样式
* onErrorText:验证错误显示文字
* onErrorClass:输入验证错误显示样式
* onSuccessText:输入成功显示文本
* onSuccessClass:输入成功显示样式
* comType:比较类型
* dataType:输入比较内容的数据类型
* comId:相比较的目标控件ID
* targetId:用于显示提示信息的控件id
* @param {Object} inputArg
*/
$.fn.extend({
checkCompare:function(inputArg){
//只验证输入框信息
if($(this).is("input") || $(this).is("textarea")){
if($(this).attr("type")!="radio" && $(this).attr("type")!="checkbox"){
//绑定获得焦点事件
$(this).bind("focus",function(){
var value=$(this).val();
if(value!=undefined && value!=""){
}else{
//显示获得焦点文本
addText(inputArg.targetId,inputArg.onEmptyText);
//切换样式
addClass(inputArg.targetId,inputArg.onEmptyClass);
}
});
//绑定失去焦点事件
$(this).bind("blur",function(){
var value=$(this).val();
if(value==undefined || value==""){
//显示获得焦点文本
addText(inputArg.targetId,inputArg.onEmptyText);
//切换样式
addClass(inputArg.targetId,inputArg.onEmptyClass);
}else{
var targetValue=$("#"+inputArg.comId).val();
var flag=false;
switch(inputArg.dataType){
case "text":
if(inputArg.comType == "=="){
flag=value==targetValue?true:false;
}else if(inputArg.comType=="!="){
flag=value!=targetValue?true:false;
}
break;
case "number":
if(inputArg.comType=="=="){
flag=value==targetValue?true:false;
}else if(inputArg.comType=="!="){
flag=value!=targetValue?true:false;
}else if(inputArg.comType==">"){
flag=value>targetValue?true:false;
}else if(inputArg.comType==">="){
flag=value>=targetValue?true:false;
}else if(inputArg.comType=="<"){
flag=value<targetValue?true:false;
}else if(inputArg.comType=="<="){
flag=value<=targetValue?true:false;
}
break;
case "date":
break;
}
if(flag){
//显示获得焦点文本
addText(inputArg.targetId, inputArg.onSuccessText);
//切换样式
addClass(inputArg.targetId, inputArg.onSuccessClass);
}else{
//显示获得焦点文本
addText(inputArg.targetId, inputArg.onErrorText);
//切换样式
addClass(inputArg.targetId, inputArg.onErrorClass);
}
}
});
}
}
}
});

这段代码其实非常简单了，因为没有涉及到复杂的判断，只是在不同类型值之间的比较关系，同时也限定了比较的控件类型text 和 textarea 两种元素。这个大大简化了验证的复杂度。这段代码相对之间也有所精简，这里的精简不是对功能的减少，而是对代码的重构，方法的提取。这里面用到了上几篇文章的功用方法，用于添加文本和修改样式信息。
添加文本和样式信息功用代码解析

代码如下:

/**
* 根据输入框的不同类型来判断
* @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);
}
}

内容还是一样，没有做任何更改，这里再次贴出这段代码，是为了方便查看方法体，没有其他的作用！

(四). 使用例子

字符串之间的比较效果图

获得焦点时候提示

失去焦点验证错误提示

失去焦点验证成功

以上是对字符的比较验证，其验证测试代码如下

代码如下:

<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" type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script language="JavaScript" type="text/javascript" src="jquery-extend-1.0.0.js"></script>
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
$("#txtPass2").checkCompare({
onFocusText:"要和上面的填写一样哦",
onFocusClass:"notice",
onEmptyText:"不允许为空，你要听话点",
onEmptyClass:"error",
onErrorText:"验证错误了，请你认真填写",
onErrorClass:"error",
onSuccessText:"恭喜啊成功了",
onSuccessClass:"correct",
comType:"==",
dataType:"text",
comId:"txtPass1",
targetId:"txtPass2Tip"
});
});
</script>
</head>
<body>
<p>
<label>密码1:</label><input type="text" id="txtPass1" value=""/><span id="txtPass1Tip"></span>
</p>
<p>
<label>密码2:</label><input type="text" id="txtPass2" value=""/><span id="txtPass2Tip"></span>
</p>
</body>
</html>

数字之间的验证

数字验证获得焦点提示作用

数字验证失去焦点验证失败

数字验证失去焦点验证成功

代码如下:

<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" type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script language="JavaScript" type="text/javascript" src="jquery-extend-1.0.0.js"></script>
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
$("#txtPass2").checkCompare({
onFocusText:"结果要比前面的大",
onFocusClass:"notice",
onEmptyText:"不允许为空，你要听话点",
onEmptyClass:"error",
onErrorText:"验证错误了，请你认真填写",
onErrorClass:"error",
onSuccessText:"恭喜啊成功了",
onSuccessClass:"correct",
comType:">",
dataType:"number",
comId:"txtPass1",
targetId:"txtPass2Tip"
});
});
</script>
</head>
<body>
<p>
<label>密码1:</label><input type="text" id="txtPass1" value=""/><span id="txtPass1Tip"></span>
</p>
<p>
<label>密码2:</label><input type="text" id="txtPass2" value=""/><span id="txtPass2Tip"></span>
</p>
</body>
</html>

文章内容不想做过多的解释了，此文非常简单，相对于前面几篇文章来说。表单验证扩展不断更新中，后续期待............

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

一. 存在的问题在上篇中我已经提到过,验证提示打算用文本和样式两种方式来显示提示消息,这两种提示都只能单独使用,于是新的跟新内容做了一些扩展,使得两者可以共用.前一篇写的是否必填项这个验证只是正对 Text, TextArea 这两个表单元素,在新的扩展中同时也支持了radio,checkbox 两个元素. 二. 验证参数的设计基于多重选择的考虑,扩展了一些有必要的参数,参数列表如下: required: 是否为必填项,true 和 false ,true 表示为必填项 (*) onFocu
jquery validate.js表单验证的基本用法入门

这里转载一篇前辈写的文章,在我自己的理解上修改了一下,仅作记录. 先贴一个国内某大公司的代码: 复制代码代码如下: <script type="text/javascript"> function lang(key) { mylang = { 'ls_input_myb': '请输入您的账户', 'ls_myb_email': '漫游币账户为邮箱地址', 'ls_login_password': '请输入您的登录密码', 'ls_password_length': '密码
jQuery扩展+xml实现表单验证功能的方法

本文实例讲述了jQuery扩展+xml实现表单验证功能的方法.分享给大家供大家参考,具体如下: 此处表单验证jQuery 引用jquery.1.8.2.js,md5.js 扩展提示信息,扩展验证方法(如果有正则表达式的话可以用默认方法) String.prototype.trim=function(){return this.replace(/(^\s*)|(\s*$)/g,"");};//ie下解决trim 方法问题 (function($) { $.elementVal = new
jQuery+ajax读取并解析XML文件的方法

本文实例讲述了jQuery+ajax读取并解析XML文件的方法.分享给大家供大家参考,具体如下: ajax.xml: <?xml version="1.0" encoding="UTF-8"?> <stulist> <student email="1@1.com"> <name>zhangsan</name> <id>1</id> </student>
jquery表单验证使用插件formValidator

1.首先在项目中添加必备js与css 2.代码中添加引用(必备引用) 复制代码代码如下: <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>  <script src="formValidator1/formValidator-4.0.1.min.js" type=&quo
jQuery解析XML 详解及方法总结

XML和HTML都是标记语言,语法形式非常相似,同属于一个语言体系.对于HTML的解析,我是使用jQuery非常方便,其实,我们也可以用jquery解析XML,也是同样的方便. 如果你用过Java.PHP等语言解析过XML,相信会跟我有相同的感觉,那就是很麻烦.改用jQuery来读取.分析.操作XML后,给人意想不到的轻松感.下面我们来看看使用jQuery处理XML文件的几种形式方法. 使用JavaScript常规方法解析XML var xmlDoc = request.responseXML;
jQuery 表单验证扩展(三)

在看这篇文章之前, 可以看看前两篇文章,表单验证输入范围验证是在原有的基础上改写的. (一). 输入范围验证存在问题在第二篇上提到的问题,在原有的验证中也存在相同的问题.当然在这次改写中也解决了一些这些问题.同时也添加了对radio,checkbox,select 元素的验证.当然对于时间的验证仍没有解决,后续过程中会继续补充! (二). 验证参数的设计 onEmptyText: 当输入内容为空的时候显示文本 onEmptyClass: 当输入内容为空的时候显示样式 onSuccessText
jQuery基于xml格式数据实现模糊查询及分页功能的方法

本文实例讲述了jQuery基于xml格式数据实现模糊查询及分页功能的方法.分享给大家供大家参考,具体如下: 1.此代码只支持xml 格式数据,根据不同需求修改ajax的success方法就ok了 2.此代码只是针对ajax只需一次请求的情况下 String.prototype.trim=function(){return this.replace(/(^\s*)|(\s*$)/g,"");};//解决ie trim问题 (function($) { /** * ============
jQuery 表单验证插件formValidation实现个性化错误提示

其效果图如下:使用说明需要使用jQuery库文件和formValidation库文件[下载实例代码] http://jquery.com/ 同时需要自定义显示提示错误信息的CSS样式使用实例一,包含文件部分复制代码代码如下: <script src="jquery.js" type="text/javascript"></script> <script src="jquery.validationEngine.js&
基于Bootstrap+jQuery.validate实现Form表单验证

基于Bootstrap jQuery.validate Form表单验证实践项目结构 : github 上源码地址:https://github.com/starzou/front-end-example 1.form 表单代码[html] 复制代码代码如下: <!DOCTYPE html> <html> <head> <title>Bootstrap Form Template</title>
jQuery 表单验证扩展代码(一)

再次申明,插件问题比较多,后期一个个来解决,请不要恶言相向.希望各位多多提好的建议善言. 一. 分析表单验证的基本情况在我们做web开发的过程中,会遇到各种各样的验证.归纳一下基本可以分为一下几类: (1). 是否必填项 [这个是非常基本的] (2). 输入参数中的范围校验 (3). 输入参数与另外一个控件值的比较 (4). 输入的参数正则表达式验证二. 是否必填项验证有如下几种情况: (1) 输入框获得焦点提示 (2)输入框失去焦点验证错误提示 (3)输入框失去焦点验证正确提示首先确定
jquery表单验证插件（jquery.validate.js）的3种使用方式

jquery 验证非常简单,下面总结常用的三种方式: 第一种方式:也是比较标准的方式: 首先引入jquery 插件和 jquery 验证插件: 第一步:引入插件复制代码代码如下: <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="js/jq

jQuery 表单验证扩展(四)

相关推荐

随机推荐