您的位置：首页 > Web前端 > JQuery

jQuery 表单验证扩展(五)

2010-12-13 23:33 525 查看

大概在一个月之前，自己尝试着写一个jQuery的表单验证插件，当初的目的并不是为了让这个插件流行起来，只是为了自己学习的需要。由于工作的问题，这个问题一直处于停留的状态。前些天报名参加了那个什么博客大赛，最近未写一篇博客，当然本文也不是了参加什么博客大赛而写，只是作为自己学习的积累。今天抽空重新整理了一下插件中的正则表达式的验证，在此分享一下。希望大家多多指教

文章回顾:

jQuery 表单验证扩展(一)

jQuery 表单验证扩展(二)

jQuery 表单验证扩展(三)

jQuery 表单验证扩展(四)

(一) . 存在问题分析

在第一篇文章中粗略的写到了表单验证中的正则表达式验证，这篇文章只是对那个部分的加强。本文添加了样式提示和文本提示共存，和前面三篇的功能点基本相同，同时此文章中也添加了自定义正则表达式和内置正则表达式共存的问题。

(二). 参数介绍

onFocusText:获得焦点提示文字

onFocusClass:获得焦点样式

onEmptyText:当输入项为空显示文字

onEmptyClass:当输入项为空显示样式

onErrorText:验证错误显示文字

onErrorClass:输入验证错误显示样式

onSuccessText:输入成功显示文本

onSuccessClass:输入成功显示样式

regularText: 匹配的正则表达式

regularTarget:比较的目标正则表达(常用正则表达式)

targetId:用于显示提示信息的控件id

这里注意两个参数， regularText 这个用于自定义正则表达式，regularTarget 这个则用于使用内置的正则表达式，其余参数在前几篇文章中都有提到，这里不做过的的讲解。如果有不了解的可以参考前面几篇文章。

(三). 正则表达式验证源码解析

表单正则表达式验证测试例子<!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-2.0.0.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
$("#txtName").checkRegExp({
onFocusText:"获得焦点，输入信息",
onFocusClass:"notice",
onEmptyText:"文本为空提示",
onEmptyClass:"notice",
onErrorText:"验证错误",
onErrorClass:"error",
onSuccessText:"验证正确",
onSuccessClass:"correct",
regularText:"",
regularTarget:"checkEmail",
targetId:"txtNameTip"
});
});
</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>
</body>
</html>

regularText:"",

regularTarget:"checkEmail", 上面只需要注意以上两个参数，这是控制使用内置正则表达式验证还是自定义的正则表达式验证。其余的验证都是参数和前面的验证都是一样的。这里不做过多的讲解。如果两者同时存在，默认使用内置的正则表达式验证。

文章写到这里，突然发现上传不了图片，演示效果图就看不了了。

插件仍然存在诸多问题，很多细节方面的问题都没有考虑到，插件持续更新中，文章也持续更新中，后续期待....

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航