JS自定义简陋的表单验证插件

最新推荐文章于 2021-06-08 10:39:07 发布

wb54979

最新推荐文章于 2021-06-08 10:39:07 发布

阅读量866

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/wangbo54979/article/details/52983516

版权

javascript 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title id="titles">asdsa</title>
<script src="jquery-1.9.1.min.js"></script>
<script src="EuiValidata.js"></script>
<script language="JavaScript" type="text/javascript">
	$().ready(function(){
		$("#euiform").valiData();
	});  
</script>

</head>

<body>
	<form id="euiform" action="http://baidu.com" method="post">
		<input type="text" id="uname" check="required" ajaxUrl="baidu.com">
		<input type="text" id="age" check="required">
		<input type="text" id="sex" check="required">
		<input type="text" id="addr" check="required">
		<input type="submit" value="提交" >
	</form>
</body>

</html>

(function($){
	$.fn.valiData = function(options){
		//当前表单对象
		var root = this;
		var formid = JSON.stringify(root.selector).replace(/\"/g, "");
		var zflas = false;
		var defaults = {
			//错误图片地址
			img_error:"",
			//验证通过图片地址
			img_success:"",
            //提示信息
            success: '',
            //验证成功时的提示信息，默认为空
            required: '不能为空',
            email: '邮箱地址格式有误',
            num: '请填写数字',
            chinese: '请填写中文',
            mobile: '手机号码格式有误',
            idcard: '身份证号码格式有误',
            pwdequal: '两次密码不一致',

            //正则
            email: /^\w+\@[a-zA-Z0-9]+\.[a-zA-Z]{2,4}$/i,
            //验证邮箱
            num: /^\d+$/,
            //验证数字
            chinese: /^[\u4E00-\u9FA5]+$/,
            //验证中文
            mobile: /^1[3458]{1}[0-9]{9}$/,
            //验证手机
            idcard: /^\d{14}\d{3}?\w$/ //验证身份证
        };

		//获取对应form表单下 添加验证的元素
		$(""+formid+" [check]").each(function(){
			//给每个元素添加事件 失去焦点时触发
			$(this).blur(function(){
				var arr = $(this).attr("check").split(" ");
				for(var x=0;x<arr.length;x++){
					if(checkVali($(this),arr[x])){
						zflas = true;
					}	
				}
			});
		});
		
		//点击提交 验证
		var _submit_Vlai = function(){
			$(""+formid+" [check]").each(function(){
				//验证 添加验证标识的 标签
				if($(this).attr("check")){
					var arr = $(this).attr("check").split(" ");
					for(var x=0;x<arr.length;x++){
						if(checkVali($(this),arr[x])){
							zflas = true;
						}	
					}
				}
			});
		}

		//判断是不是表单  是提交验证
		if (root.is("form")) {
            root.submit(function() {
				//提交之前在检测一遍
				_submit_Vlai();
				return zflas;
			})
        }

		//处理 数据验证
		var checkVali = function(obj,str_info){
			switch(str_info){
				case "required":
					return obj.val() == "" ? showMsg(obj,defaults.required,false) : showMsg(obj,defaults.success,true)
					break;
				case "ajax":
					//走对应的路径去后台验证
					/*$.ajax(function(){
						type:"post",
						url:obj.attr("ajaxUrl"),
						data:{
							//假如是验证用户名重复
							uname:obj.val()
						},
						dataType:"json",
						success:function(data){
							//处理返回的数据
							//return true || false
						}
					});*/
					break;
					//以下的 就不处理了
				case "email":
					break;
				case "pwd":
					break;
				case "tel":
					break;
				case "num":
					break;
				//暂时不处理默认的
			}
		}

		 //显示成功失败信息  返回 true ||false
        var showMsg = function(obj, msg, mark) {
            $(obj).next("#errormsg").remove(); //先清除
            var _html = "<span id='errormsg' style='font-size:13px;color:gray;background:url(" + defaults.img_error + ") no-repeat 0 -1px;padding-left:20px;margin-left:5px;'>" + msg + "</span>";
            if (mark) _html = "<span id='errormsg' style='font-size:13px;color:gray;background:url(" + defaults.img_success + ") no-repeat 0 -1px;padding-left:20px;margin-left:5px;'>" + msg + "</span>";
            $(obj).after(_html); //再添加
            return mark;
        }
	}
})(jQuery);