一个自己实现的js表单验证框架。
经常要做一些表单验证的操作,每次都是用现成的框架,比如jquery,bootstrap等的验证插件,虽然也很强大,也很好用,可就是用起来需要引入许多js库,还有里面功能太多,感觉不太符合自己的需求。最近工作不太忙,便在网上搜了一些资料,也借用了jquery的一些源码,自己做了这个表单验证js。
一 功能介绍
1 总结众多验证插件的一些使用经验,我这个js只做验证,不进行表单submit提交,或者ajax提交等额外操作。众多的插件都是和提交功能封装在一起,感觉使用起来似有画蛇添足之嫌。这套js验证后至返回true,false状态,然后调用者可判断状态自己结合本身业务逻辑实现操作,这样用户可控性相对较好。
2 这个版本只提供名称,邮箱,手机号,身份证验证,如果自己能读懂源码的话,也可以根据实际需要进行扩展。
3 通过在input标签添加自定义属性来获取验证源数据,自定义属性key值要按源码要求写,保证和源码一一对应,从而能读取到源数据。
4 验证提示msg可自己在自定义属性的value里面自己定义,注意不要过长,提示弹框用的jquery的tips,目前不能调整宽度,太长会自动换行,影响用户体验。
5 该js不用引用任何外部js依赖库,引用的jquery代码已经粘贴到js代码内。
6 只依赖jquery,jquery库还是要引用的。
二 下面是代码
/**
* Author 赵荣磊
* 版权:赵荣磊 请尊重创作辛苦,引用时不要修改我的名字,本人联系电话13524929813
*
* */
;(function ($) {
var cnt = 0;//统计错误次数
/**
* jquery全局插件
*/
$.fn.extend({
checkValidy: function () {
// var current = $(this);
cnt = 0
$.validate("checkPhone",$.checkPhone);//验证手机
$.validate("checkName",$.checkName);//验证姓名
$.validate("checkIdcard",$.checkIdcard);//验证身份证
$.validate("checkEmail",$.checkEmail);//验证邮箱
if (cnt > 0) {
return false;
}else{
return true;
};
// $(current).submit();
},
tips:function(options){
var defaults = {
side:1,
msg:'',
color:'#FFF',
bg:'#F00',
time:2,
x:0,
y:0
}
var options = $.extend(defaults, options);
if (!options.msg||isNaN(options.side)) {
throw new Error('params error');
}
if(!$('#jquery_tips_style').length){
var style='<style id="jquery_tips_style" type="text/css">';
style+='.jq_tips_box{padding:10px;position:absolute;overflow:hidden;display:inline;display:none;z-index:10176523;}';
style+='.jq_tips_arrow{display:block;width:0px;height:0px;position:absolute;}';
style+='.jq_tips_top{border-left:10px solid transparent;left:20px;bottom:0px;}';
style+='.jq_tips_left{border-top:10px solid transparent;right:0px;top:18px;}';
style+='.jq_tips_bottom{border-left:10px solid transparent;left:20px;top:0px;}';
style+='.jq_tips_right{border-top:10px solid transparent;left:0px;top:18px;}';
style+='.jq_tips_info{word-wrap: break-word;word-break:normal;border-radius:4px;padding:5px 8px;max-width:130px;overflow:hidden;box-shadow:1px 1px 1px #999;font-size:12px;cursor:pointer;}';
style+='</style>';
$(document.body).append(style);
}
this.each(function(){
var element=$(this);
var element_top=element.offset().top,element_left=element.offset().left,element_height=element.outerHeight(),element_width=element.outerWidth();
options.side=options.side<1?1:options.side>4?4:Math.round(options.side);
var sideName=options.side==1?'top':options.side==2?'right':options.side==3?'bottom':options.side==4?'left':'top';
var tips=$('<div class="jq_tips_box" style="width:150px;"><i class="jq_tips_arrow jq_tips_'+sideName+'"></i><div class="jq_tips_info">'+options.msg+'</div></div>').appendTo(document.body);
tips.find('.jq_tips_arrow').css('border-'+sideName,'10px solid '+options.bg);
tips.find('.jq_tips_info').css({
color:options.color,
backgroundColor:options.bg
});
switch(options.side){
case 1:
tips.css({
top:element_top-tips.outerHeight()+options.x,
left:element_left-10+options.y
});
break;
case 2:
tips.css({
top:element_top-20+options.x,
left:element_left+element_width+options.y
});
break;
case 3:
tips.css({
top:element_top+element_height+options.x,
left:element_left-10+options.y
});
break;
case 4:
tips.css({
top:element_top-20+options.x,
left:element_left-tips.outerWidth()+options.y
});
break;
default:
}
var closeTime;
tips.fadeIn('fast').click(function(){
clearTimeout(closeTime);
tips.fadeOut('fast',function(){
tips.remove();
})
})
if(options.time){
closeTime=setTimeout(function(){
tips.click();
},options.time*1000);
tips.hover(function(){
clearTimeout(closeTime);
},function(){
closeTime=setTimeout(function(){
tips.click();
},options.time*1000);
})
}
});
return this;
}
});
/**
* jquery的全局方法
*/
$.extend({
validate:function(attrName,checkFun){
var o = $("["+attrName+"]");
var validator = $.makeArray(o);
var msg = o.attr(attrName);
$.each(validator, function (i) {
var obj = $(validator[i]);
console.log(obj);
if (!checkFun.call(this,obj.val())) {
cnt++;
obj.tips({
side: 3,
msg: msg,
bg: '#AE81FF',
time: 5
});
}
});
},
checkNumber: function (val){
var reg = /^[0-9]*[0-9][0-9]*$/;
if (val.trim() != ""&& reg.test(val)){
return true;
} else {
return false;
}
},
checkPhone: function (val){
var reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
if (val.trim() != ""&& reg.test(val)){
return true;
} else {
return false;
}
},
checkName:function(val){
var reg = new RegExp("^[a-zA-Z0-9_.\u4e00-\u9fa5\s]*$");
if(val.trim() != ""&®.test(val)){
return true;
//alert('只能输入中文字母数字下划线点');
}else{
return false;
}
},
checkIdcard:function(val){
var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
if(val.trim() != ""&®.test(val)){
return true;
}else{
return false;
}
},
checkEmail:function(val){
var reg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
if(val.trim() != ""&®.test(val)){
return true;
}else{
return false;
}
}
});
})(jQuery);
三 使用示例
<form name="signUpForm" class="form-horizontal m-t" id="commentForm">
<input id="linkmanname" type="text" class="form-control" name="linkmanname" checkName="姓名要合规">
<input id="phone" type="text" class="form-control" name="phone" checkPhone="请输入正确手机号">
<input id="idcard" type="text" class="form-control" name="idcard" checkIdcard="请输入合法身份证号(15或18位)">
<input id="email" type="text" class="form-control" name="email" checkEmail="请输入合法邮箱">
<input type="button" id="first" class="btn btn-primary" onclick="tijiao1()">确认添加1</input>
</form>
function tijiao1(){
var issubmit = $("#commentForm").checkValidy();
console.log("issubmit:"+issubmit)
if(issubmit){
$("#commentForm").submit()
}
}
四 如果使用中遇到问题可以联系我!
最新文章
- 虚拟dom与diff算法 分析
- 常见容易遗漏的html标签
- 关于input标签和placeholder在IE8,9下的兼容问题
- JVM内存分配策略
- Python的方法解析顺序(MRO)
- prerender-SPA程序的SEO优化策略
- Android中XML解析
- [页面辅助] 最新的 PageValidate 类 (转载)
- asp.net同时调用JS和后台的无效的解决
- unix ourhdr.h myerr.h
- MVC之Session State性能
- 【Java】【Flume】Flume-NG源代码分析的启动过程(两)
- GCJ Round 1C 2009 Problem C. Bribe the Prisoners
- MySQL系列(三)---索引
- c# Web.config中 windows连接数据库
- Eclipse中tomcat启动时报jar包 it&#39;s not a class错误;
- django settings多环境配置
- as依赖解决报错
- SQL手工注入入门级笔记(更新中)
- Mysql 插入中文错误:Incorrect string value: &#39;\xE7\xA8\x8B\xE5\xBA\x8F...&#39; for column &#39;course&#39; at row 1
热门文章
- 构建一个Vue项目
- python之json&;pickle
- 版本控制(svn、Git)环境创建
- tesseract_vs2015工具包使用
- Dockerfile指令详解--VOLUME 指令
- [mybatis]Example的用法
- Spring 4 官方文档学习 Web MVC 框架
- windows 远程连接“发生身份验证错误 要求的函数不受支持”
- python argparse(参数解析)模块学习(一)
- mybatis中查询使用#{}和${}的区别