jquery实现：实时提醒文本框输入状态

最新推荐文章于 2021-08-15 23:46:02 发布

皮蛋瘦肉没有肉

最新推荐文章于 2021-08-15 23:46:02 发布

阅读量2.8k

点赞数 2

分类专栏： JavaScript 文章标签：密码 jquery javascript html 脚本

本文链接：https://blog.csdn.net/zzp961224/article/details/52188752

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

大家在网页上注册一个账号时，经常会看到如果用户名或者密码输入不符合规则，则会在文本框旁边即时提醒“X”或者“输入错误”等

那么这种效果是怎么实现的呢？

接下来大家请看代码？（jquery代码请大家自行引入）

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/layout.css" />
		<script src="js/jquery-3.1.0.js"></script>
		<script src="js/check.js"></script>
		<style>
			.high{
				color: red;
			}
		</style>
	</head>

	<body>
		<form method="post" action="">
			<div class="int">
				<label for="username">用户名</label>
				<input type="text" id="username" class="required" />
			</div>
			<div class="int">
				<label for="email">邮箱</label>
				<input type="text" id="email" class="required" />
			</div>
			<div class="int">
				<label for="personinfo">个人资料</label>
				<input type="text" id="personinf" />
			</div>
			<div class="sub">
				<input type="submit" value="提交" id="send" />
				<input type="reset" value="重置" id="res" />
			</div>
		</form>
	</body>

</html>

jquery代码请看下面：

<span style="color:#000000;">$(function(){
	$("form :input.required").each(function() {
	var $required = $("<strong class='high'>*</strong>"); //创建元素
	$(this).parent().append($required); //将它追加到文档中
});

$('form :input').blur(function() { //为表单元素添加失去焦点事件
	var $parent = $(this).parent();
	$parent.find(".formtips").remove(); //删除以前的提醒元素
	//验证用户名
	if($(this).is('#username')) {
		if(this.value == '' || this.value.length < 6) {
			var errorMsg = '请输入至少6位的用户名.';
			$parent.append('<span class="formtips onError">' + errorMsg + '</span>');
		} else {
			var okMsg = '输入正确.';
			$parent.append('<span class="formtips onSuccess">' + okMsg + '</span>');
		}
	}
	//验证邮箱
	if($(this).is('#email')) {
		if(this.value == "" || (this.value != "" && !/.+@.+\.[a-zA-Z] {2,4}$/.test(this.value))) {
			var errorMsg = '请输入正确的E-mail地址.';
			$parent.append('<span class="formtips onError">' + errorMsg + '</span>');
		} else {
			var okMsg = '输入正确.';
			$parent.append('<span class="formtips onSuccess">' + okMsg + '</span>');
		}
	}
}).keyup(function() {//keyup事件能在用户每次松开按键时触发，实现即时提醒
	$(this).triggerHandler("blur");
}).focus(function() {//focus事件能在元素得到焦点的时候触发，也可以实现即时提醒
	$(this).triggerHandler("blur");
});

$('#send').click(function() {
	$("form .required:input").trigger('blur');//用trigger()方法来触发blur事件
	var numError = $('form.onError').length;//判断onError元素的长度，若大于0则代表存在填写错误，不允许提交
	if(!numError) {//长度为0，则为true，大于0，则为false
		return false;//阻止表单提交可以直接用 return false
	}
	alert("注册成功，密码已发到你的邮箱，请查收");
});
});</span>

效果如下图显示：

这里没有用css美化界面，用图片形式作为提醒可以达到更好的效果，大家可以自行尝试。

皮蛋瘦肉没有肉

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
jquery实现：实时提醒文本框输入状态

大家在网页上注册一个账号时，经常会看到如果用户名或者密码输入不符合规则，则会在文本框旁边即时提醒“X”或者“输入错误”等那么这种效果是怎么实现的呢？接下来大家请看代码？（jquery代码请大家自行引入） .high{ color: red; } 用户名
复制链接

扫一扫