扩展jquery方法实现输入框校验

最新推荐文章于 2023-04-19 10:50:00 发布

faithsrc

最新推荐文章于 2023-04-19 10:50:00 发布

阅读量987

点赞数

分类专栏： JavaScript

JavaScript 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一个基于jQuery的表单验证插件，该插件能够实现对特殊字符、身份证号、电话号码、邮箱及日期格式的有效验证。通过简单的调用方式，开发者可以轻松地为表单元素添加验证规则。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$(function(){
	$.fn.extend({
        //不能有特殊字符只能由数字、大小写字母组成
		cbSpecialCharacter:function(){
			var str = /[A-Za-z0-9]$/;
			var str1 = /[\u4e00-\u9fa5\!\.@#\$%\^&\*\(\)\[\]\\?\\\/\|\-~`\+\=\,\r\n\:\'\"。，；……！￥\{\}]/g;
			baseValidate(str,this,str1);
			return this;
		},
        //身份证号
        cbCard:function(){
        	var str = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}[0-9Xx]$/;
			var msg = "请正确填写身份号码！";
			blurValidate(str,this,msg);
			return this;
        },
        //电话号码
        cbPhone:function(){
        	var str = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
			var msg = "请正确填写手机号码！";
			blurValidate(str,this,msg);
			return this;
        },
        //邮箱
		cbEmail:function(){
			var str = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
			var msg = "请正确填写邮箱！";
			blurValidate(str,this,msg);
			return this;
		},
        //日期
		cbTime:function(){
			var str = /^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/;
			var msg = "日期格式不正确";
			blurValidate(str,this,msg);
			return this;
		}
			
	})
});
function baseValidate(str,baseThis,str1){
	baseThis.each(function(){
		$(this).keyup(function(){
			var _thisValue = $(this).val();
			if (str.test(_thisValue) == false){
				var va = _thisValue.replace(str1,"");
				$(this).val(va);
			}else{
				$(this).val(_thisValue);
			}
			
		});
	});
};
function blurValidate(str,baseThis,msg){
	baseThis.each(function(){
		$(this).blur(function(){
		var _thisValue = $(this).val();
		var _thisNum = _thisValue.length-1;
		if(_thisValue == "" || _thisNum =='-1'){
			$(this).val('');
		}else{
			if (str.test(_thisValue) == false){
				$(this).val("");
				$(this).attr("placeholder",msg);
			}
		}
		});
	});
};
$('#identity_card').cbCard();
$('#birthday').cbTime();