jQuery 表单验证控件 比较简单
2014-08-23 08:27
417 查看
学习jquery, 自己写的一个基于jQuery的表单验证练手 比较简单
下载地位 http://download.csdn.net/detail/lpy3654321/7816687 不要积分的
页面效果:
HTML 代码: validate.html
JS 代码 jquery-validate-src.js
下载地位 http://download.csdn.net/detail/lpy3654321/7816687 不要积分的
页面效果:
HTML 代码: validate.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>验证</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery-validate-src.js"></script>
<script type="text/javascript" src="jquery-datePicker-src.js"></script>
<script type="text/javascript">
$(function(){
//日期控制,未完 jquery-datePicker-src.js
//$("#from").datePicker();
$("#submi").click(function(e){
// 被动验证表单
$("#form").validForm();
});
$("#reset").click(function(){
// 关闭所有的提示块
$("#form").tootipFadeOut();
});
$("#form").validate({
// 有input后面添加,暂时意思不大
// after:"<div class=\"warnValidate\">22222222222222222</div>",
// 自定义 message
// message : {required: "必选字段22{0}22"},
//提示块的偏移量
offsetX : 85,
offsetY : -15
// 未通过验证后执行的方法,,如果使用将替换默认的显示提示块
/* falseFun:function(input){
alert("cccc sss "+e);
},
*/
// 通过验证后执行的方法,如果使用将替换默认的隐藏提示块
/* trueFun:function(input){
}
*/
});
})
</script>
<style>
/* 验证的CSS */
.warnValidate {
position: absolute;
border:3px solid red;
border-radius:5px;
margin :3px; padding : 1px;
background-color: #FF9D00;
display:none;
}
/* 日期控件CSS*/
.day{
text-align: center;
}
.shangYue{
color: #CCCCCC;
}
.xiaYue{
color: #CCCCCC;
}
</style>
</head>
<body>
value: <input id="content" type="text" size="50"/> 失去焦点Input的value
<br/>
validate: <input id="rule" type="text" size="50" /> 失去焦点Input的validate属性
<form id="form">
<!-- 改变表单位置,测试提示块是否在input旁边显示 -->
<table style="padding: 30px 0px 0px 150px;">
<tr>
<td style="height:35px;">
<label>1</label>
</td>
<td style="height:35px;">
<input id="1" type="text" value="该表单没有validate属性,所以不验证" size="40" />
</td>
</tr>
<tr>
<td style="height:35px;">
<label>2minlength</label>
</td>
<td style="height:35px;">
<input id="2" type="text" validate="{required:true,minlength:2,date:true}" value="2014-08-18" size="40" />
</td>
</tr>
<tr>
<td style="height:35px;">
<label>3maxlength能</label>
</td>
<td style="height:35px;">
<input id="3" type="text" validate="{required:true,maxlength:5,max:10}" size="40" />
</td>
</tr>
<tr>
<td style="height:35px;">
<label>4</label>
</td>
<td style="height:35px;">
<input id="4" type="text" validate="{required:true,rangelength:[2,5]}" value="4" size="40" />
</td>
</tr>
<tr>
<td style="height:35px;">
<label>required</label>
</td>
<td style="height:35px;">
<textarea id="5_required" validate="{required:true}"></textarea>
</td>
</tr>
<tr>
<td style="height:35px;">
<label>6_remote</label>
</td>
<td style="height:35px;">
<textarea id="6_remote" name="6_remote" validate="{required:true,remote:'remote-true.json'}"></textarea>远程数据是假的,存在remote-true.json文件
</td>
</tr>
<tr>
<td style="height:35px;">
<label>7_equalTo</label>
</td>
<td style="height:35px;">
<textarea id="7_equalTo" name="7_equalTo" validate="{equalTo:'#6_remote'}"></textarea>
</td>
</tr>
</table>
<label>another</label><input id="5" type="text" validate="{required:true,email:true}" value="abc123@qq.com"/><br/>
<input type="submit" value="提交"/> <b> type="submit" 显示验证未通的消息块</b>
<br/><input id="reset" type="reset" value="重置"> <b> type="reset" 重置并隐藏验证未通的消息块</b>
</form>
<a id="submi" href="#" onclick="return false;">A标签提交</a> <b> A标签的单击事件触发</b>
<hr/>
<div id="ddddd"></div>
</body>
</html>JS 代码 jquery-validate-src.js
/*!
表单验证
liupengyuan
*/
(function($){
var options = null;
// TODO 需要这此处完善 验证的元素集合 [textarea , select , input , audio]**************************************
// 统一调用表单元素选择器selector
var selector = ":input[type!=submit][type!=reset][type!=button]";
/**
* 1.初始化方法
* $("form").validate({});
* 初始化时,会在每个表单元素后插入一个DIV class为warnValidate,如<div class="warnValidate"></div> 也可以自定义
*/
$.fn.validate = function( _options ){
options = _options || {};
var $form = $(this); //form本身
/*
* 统一调用选择器selector
* 功能是找到该form表单内的所以表单元素 input select textarea
*/
var $inputArr = $form.find(selector);
// 定义一个dom的jQuery对象
var after = $(options.after || "<div class=\"warnValidate\"></div>");
// 初始化时,会在每个表单元素后插入一个DIV class为warnValidate,如<div class="warnValidate"></div> 也可以自定义
// after.attr("id","validate_title_" + $inputArr.context.id || $inputArr.context.name);
$inputArr.after(after);
/*
* 为form添加submit事件,事件内的方法就是验证表单.
* 并 return 验证结果 true或false,如果为false就停止submit事件,阻止表单提交.
*/
$form.submit(function( e ){
return validForm( $form );
});
/*
* focus 表单元素得到焦点时隐藏提示块
* 当表单元素得到焦点时,说明可能是正在修改表单内容,所以隐藏提示块
*/
$inputArr.focus(function( e ){
var $thisInput = $(this);
expressfadeOut( $thisInput )
});
/*
* blur 表单元素失去焦点时开始验证表单
* 当表单元素失去焦点时,说明可能已经修改完表单内容,所以需要验证该表单失去焦点的表单
*/
$inputArr.blur(function( e ){
var $thisInput = $(this);
var flag = validInput ($thisInput );
});
/*
* 当点击到已显示的验证提示信息块时,将该信息块隐藏
*/
$(".warnValidate").click(function(){
$(this).fadeOut(200);
});
}
/**
* 2.主动验证表单FORM
* ajax提交表单,调用此方法
* 参数 : $("form").validForm();
* 返回值 : boolean true 该表单通过验证; false 该表单未能验通过证
*/
$.fn.validForm = function(){
return validForm( $(this) );
}
/**
* 3.隐藏表单下所有的提示块
* 当表单在DIALOG里的时候,关闭DIALOG时,需要调用此方法.
* 参数 : $("form").tootipFadeOut();
*/
$.fn.tootipFadeOut = function(){
var tootipArr = $( this ).find(".warnValidate");
return tootipArr.fadeOut(200);
}
/**
* 验证表单INPUT
* 私有方法
* 参数 : $input 表单元素的 jquery 对象
* 返回值 : boolean 返回true该元素通过验证 ; 返回false该表单未能验通过证
*/
validInput = function ( $input ){
var validateRuleStr = $input.attr("validate");
// 如果元素无validate属性,则略过该元素的验证,继续下一个验证
if( !validateRuleStr ){
return true;
}
// 验证内容是否通过验证
var resultArr = valid( $input , validateRuleStr );
if( resultArr.length <= 0 ){ // 验证通过 返回true
// 如果options 内提供 trueFun 方法,执行用户提供的方法,否则执行默认的 expressfadeOut( $input , resultArr );
if( options.trueFun ){
options.trueFun( $input , resultArr );
}else{
expressfadeOut( $input , resultArr );
}
return true;
}else{ // 验证未通过返回false
// 如果options 内提供 falseFun 方法,执行用户提供的方法,否则执行默认的 expressFadeIn( $input , resultArr );
if( options.falseFun ){
options.falseFun( $input , resultArr );
}else{
expressFadeIn( $input , resultArr );
}
return false;
}
}
/**
* 验证表单FORM
* 私有方法
* 参数 $obj : form 的 jquery 对象
* 返回值 : boolean true 该表单通过验证,可以提交; false 该表单未能验通过证,不可以提交
*/
validForm = function( $obj ){
// 默认是通过验证,但只要其中一项未通过,那么该标识就被赋为 false
var flag = true;
/*
* 统一调用选择器selector
* 功能是找到该form表单内的所以表单元素 input select textarea
*/
var $inputArr = $obj.find( selector );
/*
* 对所有表单元素轮循验证
* 只要其中的一项未能通过验证,就认为该form不能提交,所以该方法的返回false
*/
$inputArr.each(function(i,e){
if( !validInput( $(e) ) ){
//如果其中有未能通过验证的,将 flag 标识赋为 false
flag = false;
}
});
return flag;
}
/**
* 未能通过验证的规则的消息对象数组
* 参数 : _contentStr 要验证的内容 String
* _ruleStrArr 验证规则 Sting[]
* 返回值 : Object[] 未能通过验证的规则的消息对象数组
*/
valid = function( $input , validateRuleStr ){
var _contentStr = $input.val();
//去空格
var content = $.trim( _contentStr );
var cc = content||"";
var vv = validateRuleStr||"";
$("#content").val(cc);
$("#rule").val(vv);
var validateRuleObj = eval( "(" + validateRuleStr+")" );
var resultsArr = new Array();
for(var o in validateRuleObj){
var ruleValues = validateRuleObj[o];
if(!ruleValues)continue;
// 调用验证规则对象方法
var resultObj = ruleObj[o]( content , ruleValues , $input.attr("name") || $input.attr("id"));
//调用验证后的提示消息
var message = $.extend(messageObj,options.message)[o];
/*
将提示消息关键字存在数组里,这样比较容易替换占位符
*/
var messagesArr = new Array();
var ruleValuesType = ( typeof ruleValues ).toLowerCase();
if(ruleValuesType == "string" || ruleValuesType == "number"){
messagesArr.push(ruleValues);
} else if(ruleValues.length){
for(var i=0;i<ruleValues.length;i++){
messagesArr.push(ruleValues[i]);
}
}
/*
将存放在数组里的关键字,替换消息的占位符
*/
for(var i=0;i<messagesArr.length;i++){
var m = messagesArr[i];
message = message.replace("{" + i + "}" , m );
}
/*
// 如果未通过验证的规则添加到结果数组中
*/
if( !resultObj.result ){
var _result = $.extend(resultObj,{
rule : o ,
message : message
});
resultsArr.push( _result );
}
}
return resultsArr;
}
/*
规则字段方法对象
*/
var ruleObj = {
// 必输字段
required:function( content , ruleValues ){
var _result = {
result : content.length > 0 ,
ruleValues : ruleValues
};
return _result;
},
// 使用ajax方法调用 验证输入值
remote:function( content , ruleValues ,fieldName ){
var _result = {
// result : result ,
ruleValues : ruleValues
};
var _data = {};
_data[ fieldName ] = content;
$.ajax({
url:ruleValues[0] ,
data : _data ,
dataType : "json" , type : "post",
async : false ,
success:function( result , status , xhr ){
_result.result = result;
}
});
return _result;
},
// 必须输入正确格式的电子邮件
email:function( content , ruleValues ){
var _result = {
result : /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(content) ,
ruleValues : ruleValues
};
return _result;
},
// 必须输入正确格式的网址
url:function( content , ruleValues ){
var _result = {
result : true ,
ruleValues : ruleValues
};
return _result;
},
// 必须输入正确格式的日期
date:function( content , ruleValues ){
var _result = {
result : !/Invalid|NaN/.test( new Date( content ).toString() ) ,
ruleValues : ruleValues
};
return _result;
},
// 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性
dateISO:function( content , ruleValues ){
var _result = {
result : /^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])$/.test( content ) ,
ruleValues : ruleValues
};
return _result;
},
// 必须输入合法的数字(负数，小数)
number:function( content , ruleValues ){
var _result = {
result : /^-?(?:\d+|\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/.test( content ) ,
ruleValues : ruleValues
};
return _result;
},
// 必须输入整数
digits:function( content , ruleValues ){
var _result = {
result : /^\d+$/.test( content ) ,
ruleValues : ruleValues
};
return _result;
},
// 必须输入合法的信用卡号
creditcard:function( content , ruleValues ){
var _result = {
result : true ,
ruleValues : ruleValues
};
return _result;
},
// 输入值必须和#field相同
equalTo:function( content , ruleValues ){
var selector = ruleValues;
var _result = {
result : content === $(selector).val() ,
ruleValues : ruleValues
};
return _result;
},
// 输入拥有合法后缀名的字符串（上传文件的后缀）
accept:function( content , ruleValues ){
var _result = {
result : false ,
ruleValues : ruleValues
};
return _result;
},
// 输入长度最多是{0}的字符串(汉字算一个字符)
maxlength:function( content , ruleValues ){
var _result = {
result : content.length <= ruleValues,
ruleValues : ruleValues
};
return _result;
},
// 输入长度最小是{0}的字符串(汉字算一个字符)
minlength:function( content , ruleValues ){
var _result = {
result : content.length >= ruleValues ,
ruleValues : ruleValues
};
return _result;
},
// 输入长度必须介于 {0} 和 {1} 之间的字符串)(汉字算一个字符)
rangelength:function( content , ruleValues ){
var _result = {
result : content.length >= ruleValues[0] && content.length <= ruleValues[1] ,
ruleValues : ruleValues
};
return _result;
},
// 输入值必须介于 {0} 和 {1} 之间
range:function( content , ruleValues ){
var _result = {
result : false ,
ruleValues : ruleValues
};
return _result;
},
// 输入值不能大于{0}
max:function( content , ruleValues ){
// 选验证是否为数字
var numObj = this.number( content , ruleValues );
var _result = {
result : Number(content) <= ruleValues ,
ruleValues : ruleValues
};
return numObj.result ? _result : numObj;
},
// 输入值不能小于{0}
min:function( content , ruleValues ){
// 选验证是否为数字
var numObj = this.number( content , ruleValues );
var _result = {
result : Number(content) >= ruleValues ,
ruleValues : ruleValues
};
return numObj.result ? _result : numObj;
}
}
/**
* 显示在页面弹出提示块信息
* 私有方法
*/
var expressFadeIn = function( $input , resultArr ){
var width = $input.width();
var height = 30;
var offset = $input.offset();
var left = offset.left;
var top = offset.top;
var x = left;
var y = top - height;//
if( options.offsetX ){
x = x + options.offsetX;
}
if( options.offsetY ){
y = y - options.offsetY;
}
var cssOjb = {
"left" : x,
"top" : y
};
$input.next().css( cssOjb ).html("<b>" + resultArr[0].message + "</b>").fadeIn();
}
/**
* 隐藏在页面弹出提示块信息
* 私有方法
*/
var expressfadeOut = function( $input ){
$input.next().fadeOut();
}
/*
消息对象
*/
var messageObj = {
required: "必选字段",
remote: "请修正该字段",
email: "请输入正确格式的电子邮件",
url: "请输入合法的网址",
date: "请输入合法的日期",
dateISO: "请输入合法的日期 (ISO).",
number: "请输入合法的数字",
digits: "只能输入整数",
creditcard: "请输入合法的信用卡号",
equalTo: "请再次输入与 {0} 相同的值",
accept: "请输入拥有合法后缀名的字符串",
maxlength: "请输入一个 长度最多是 {0} 的字符串",
minlength: "请输入一个 长度最少是 {0} 的字符串",
rangelength: "请输入 一个长度介于 {0} 和 {1} 之间的字符串",
range: "请输入一个介于 {0} 和 {1} 之间的值",
max: "请输入一个最大为{0} 的值",
min: "请输入一个最小为{0} 的值"
}
})(jQuery);
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 一款比较实用齐全的jQuery 表单验证插件
- 一款比较实用齐全的jQuery 表单验证插件
- JQuery：表单验证（简单易懂）
- jQuery简单的表单验证
- jQuery之简单的表单验证
- jquery 最简单易用的表单验证插件
- JQuery插件第十四个:简单验证表单
- JQuery简单的前台表单验证
- 使用jquery的验证框架，对表单进行验证(简单、基础)
- jquery表单验证插件——使用方式非常简单，明了
- 基于Jquery的一个表单验证控件
- .net mvc2框架，简单jquery表单验证
- 基于 猫冬的 jQuery formValidator表单验证 的asp.net 控件
- 常用网站后台与前台表单的有效性简单验证(不用验证控件，怕忘)
- 常用网站后台与前台表单的有效性简单验证(不用验证控件，怕忘)
- jQuery 对表单的简单验证
- jQuery formValidator表单验证插件2.9.3版本已经支持对所有客户端控件的验证
- jquery表单验证控件，下载地址和使用列子
- 天易21----jquery实现简单的表单验证
- 国产jquery表单验证控件