Javascript边框闪烁提示

当我们提交表单的时候，有些字段是必填的。

但是如果用户提交的时候偏偏不填写就提交，这时我们一般都会弹出一个框来提醒用户。

但是有些小伙伴并不喜欢使用弹窗，觉得用户体验不好。

今天就有小伙伴问小编，有没有方法实现边框闪烁，以此来提醒用户。

讲真，javascript、jquery感觉就是万能的，就像没有什么实现不了的一样。

所以这个问题是肯定的，方法肯定有。

今天小编就分享Javascript实现边框闪烁的实例。

    <style>
    .selectshake{ border:1px solid #d00; background:#ffe9e8; color:#d00;}
    </style>
    <p>js边框闪烁</p>
    <input type="text" id="keytxt" value="" placeholder="请输入内容" />
    <input type="button" id="btn" value="提交" />
    <script>
    function shake(ele,cls,times){//边框闪烁
    	var i = 0,t= false ,o =ele.attr("class")+" ",c ="",times=times||2;
    	if(t) return;
    	t= setInterval(function(){
    		i++;
    		c = i%2 ? o+cls : o;
    		ele.attr("class",c);
    		if(i==2*times){
    			clearInterval(t);
    			ele.removeClass(cls);
    		}
    	},200);
    };
    $("#btn").click(function(){
    	if ($.trim($("#keytxt").val())==''){
    		$("#keytxt").attr("placeholder","请输入内容");
    		$("#keytxt").focus();
    		shake($("#keytxt"),"selectshake",4);
    		return false;
    	}else{
    		alert('成功提交');
    	}
    });
    </script>

以上代码的功能就是，当用户点击提交按钮的时候，如果文本框里面不输入信息，则无法提交。

而且使文本框闪烁，用显眼的方式来提醒用户，这个地方是必须填写的。