【前端碎片记录】--input输入框的内容改变事件

最新推荐文章于 2024-07-28 02:32:45 发布

原创最新推荐文章于 2024-07-28 02:32:45 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #jQuery #表单提交 #JavaScript

前端专栏收录该内容

2 篇文章

订阅专栏

在实现登录或者注册页面的过程中，需要对输入的数据进行校验，这里实现的是即时校验。

之前使用的是jq blur事件，但是只能在失去焦点之后进行判断，即输入数据后，需要进行别的操作（鼠标单击别的地方等）。不够方便。

如下：

$('#changeTel').blur(function(){
		...

	});

后来看了别的博客，发现使用oninput和onporpertychange可以实现即时监测输入变化的功能。

代码如下：

$('#changeTel').bind('input porpertychange', function(){
		var inTel = $('#changeTel').val();
		var re = /^1(3|4|5|7|8)\d{9}$/;
		var rez = re.test(inTel);
		if (rez == true) {
			$('#tip1').css('display','block');
			$('#tip1').text('手机号格式正确！');
		} else if (inTel == '') {
			$('#tip1').css('display','block');
			$('#tip1').text('手机号不能为空！');
		} else{
			$('#tip1').css('display','block');
			$('#tip1').text('手机号格式错误，请重新输入！');
		}
	});