JQ实现效果：用户名表单验证

最新推荐文章于 2025-05-18 01:11:08 发布

原创最新推荐文章于 2025-05-18 01:11:08 发布 · 2.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #表单 #正则表达式

JQ 专栏收录该内容

7 篇文章

订阅专栏

步骤：

1、判断当前失去焦点的元素是“用户名”还是“邮箱”

2、“用户名”，看是否小于6位，如果小于，就设置红色提醒

3、“邮箱”，用正则表达式判断是否符合邮箱格式，不符合就红色字提醒，符合就用绿色字提醒

4、将文字信息<span>追加到当前元素的父元素的最后。ps：注意移除前面已经出现的字。

<!DOCTYPE html>
<html>
<head>
	<title>Char 5.1.6</title>
	<meta charset="utf-8"/>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript">
		$(function(){
			//给必须项目添加标志
			$("form :input.required").each(function() {
				var $required = $("<strong class='high'>*</strong>");
				$(this).parent().append($required);
			});
			//判断用户名是否正确
			$('form :input').blur(function(event) {
				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>');
					}
				}
				//判断email地址是否填写正确
				if ($(this).is('#email')) {
					//判断的正则表达式

					if (this.value==''||(this.value!=''&&!/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))) {
						var errorMsg="请输入正确的email地址";
						$parent.find('.formtips').remove();
						$parent.append('<span calss="formtips onError">'+errorMsg+"</span>");
					}else
					{
						var okMsg="ok";
						$parent.append('<span class="formtips okMsg">'+okMsg+"</span>");
					}
				}
			});
			//按钮send的触发功能
			$("#send").click(function(event) {
				$("form .required:input").trigger('blur');
				var numError=$("form .onError").length;
				if (numError) {
					return false;
				}
				alert("注册成功！");
			});
		})
	</script>
</head>
<body>
<h2>注册</h2>
<form>
	<div class="int">
		<label>姓名：</label>
		<input type="text" name="text" id="username" class="required">
	</div>

	<div class="int">
		<label>邮箱：</label>
		<input type="text" name="text" id='email' class="required">
	</div>

	<div class="int">
		<label>个人资料：</label>
		<input type="text" name="text">
	</div>

	<div class="submit">
		<input type="button" name="btn" id="send" value="提交"/>
	</div>
</form>

</body>
</html>