1. 首页
  2. 编程与技术

jQuery 表单验证扩展(三)

发布于 2017-04-24 01:13:43 | 88 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的jQuery示例，程序狗速度看过来！

jQuery javascript框架

jQuery是一个兼容多浏览器的javascript框架，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。

前些天写了两篇关于jQuery表单验证的文章，jQuery的插件还存在诸多问题，但是本人还在不断努力更新中。本篇文章主要介绍jQuery表单验证中输入文本内容的范围验证。
在看这篇文章之前， 可以看看前两篇文章，表单验证输入范围验证是在原有的基础上改写的。



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

在第二篇上提到的问题，在原有的验证中也存在相同的问题。当然在这次改写中也解决了一些这些问题。同时也添加了对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选择框元素，支持多项选择验证。



(五). 验证使用例子

文本框输入验证

  当输入的内容长度不符

 输入的字符串满足当前要求提示

 当不输入文本的时候验证

对于数字的验证

  获得焦点提示问题

 输入的数字不满足范围

 验证成功

对于checkbox的验证

 checkbox组其中之一获得焦点

 选择满足数据

 选择超过数量

对于select 多项选择

 选择数量过多

 验证成功
(六). 验证测试代码 

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

以上是测试的部分代码 ，不过基本可以说明这个方法的的使用方式。
这里不多写了，后续不断更新......



最新网友评论  共有(0)条评论 发布评论 返回顶部
推荐阅读
  • 终极炫富——2016 年 iOS 开发者收入调查报告
  • 年度大片：Stack Overflow 2017 开发者调查报告发布！
  • 开发者需要大学学位吗？
  • 程序员多大年纪算高龄，届时该何去何从？
  • 2017 年高薪编程语言排行榜，你的语言上榜没？
  • 各编程语言开发者最常使用的按键，中了没?
  • 伤不起的三十岁，干不动的程序员要何去何从？
  • 2016年中国加班最狠IT公司排行
  • 一句话"面试"漫画：黑了苹果、谷歌、三星
  • 拿代码量算 KPI ……跟程序员们来这套？
  • 程序员遇到 Bug 时的 30 个反应，你是哪一种？
  • 2016年收入最高的5个编程语言 Java和C没在前五?
  • 为什么很少见人傻钱多的程序员炫富？
  • 阿里月薪两万是什么体验？
  • 代码缩进时 程序员更喜欢空格键还是Tab键？
    • 最新资讯
  • Python获取系统所有进程PID及进程名称的方法示例
  • Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
  • Python实现的根据IP地址计算子网掩码位数功能示例
  • 好的Python培训机构应该具备哪些条件
  • 详解Pytorch 使用Pytorch拟合多项式(多项式回归)
  • Python加载带有注释的Json文件实例
  • 对python的文件内注释 help注释方法
  • Python实现判断一行代码是否为注释的方法
  • Oracle数据库表中字段顺序的修改方法
  • ASP.NET MVC 4使用PagedList.Mvc分页的实现代码
  • Oracle实例启动时报错：ORA-32004的解决方法
  • 解读ASP.NET 5 & MVC6系列教程（7）：依赖注入
  • 详解IDEA用maven创建springMVC项目和配置
  • ASP.NET MVC5网站开发之展示层架构（五）
  • SpringBoot创建maven多模块项目实战代码
    • 后端技术
    前端技术
    数据库
    热门框架
    常用IDE
    其他
    Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务