一个自己实现的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() != ""&&reg.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() != ""&&reg.test(val)){
return true;
}else{
return false;
}
},
checkEmail:function(val){
var reg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
if(val.trim() != ""&&reg.test(val)){
return true;
}else{
return false;
}
}
});
})(jQuery);

三使用示例

</form>

function tijiao1(){
var issubmit = $("#commentForm").checkValidy();
console.log("issubmit:"+issubmit)
if(issubmit){
$("#commentForm").submit()
}
}

四如果使用中遇到问题可以联系我！

秒客网

一个自己实现的js表单验证框架。

相关文章