Angular表单验证

最新推荐文章于 2025-05-12 09:34:16 发布

原创最新推荐文章于 2025-05-12 09:34:16 发布 · 341 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个用于当当网注册过程中的表单验证脚本。该脚本使用jQuery实现，包括对电子邮件地址的有效性检查、用户名长度的验证、以及密码格式和一致性的校验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style>
		th{
			background-color:#e2f8fd;
			font-family: "微软雅黑";
			text-align: right;
		}
		input{
			background-color:#c7edcc;
		}
		span{
			display: inline-block;
			margin-left: 180px;
		}
	</style>
	<script src="js/jquery-2.1.0.js"></script>
	<script type="text/javascript">
		$(function(){
			$('#tj').click(function(){
				var email=$('#email').val();
				var name=$('#name').val();
				var p1=$('#p1').val();
	         	var p2=$('#p2').val();
	         	if(email==""||name==""||p1==""||p2==""){
	         		alert("表单有误");
	         		return false;
	         	}
			});
			
			
			$('#email').blur(function(){
				var email=$('#email').val();
				if(email.search('@')!=-1){
					$('span:eq(0)').html("Email可用").show();
					$('span:eq(0)').before('<img src="img/2.gif" id="img1">');
					$('#img2').hide();
				}else{
					$('span:eq(0)').html("Email有误").show();
   					$('span:eq(0)').before('<img src="img/1.gif" id="img2">');
   					$('#img1').hide();
				}
			});
	
	         $('#name').blur(function(){
	         	var name=$('#name').val();吧
	         	if(name.length<4){
	         		$('span:eq(1)').html("用户名有误").show();
   					$('span:eq(1)').before('<img src="img/1.gif" id="img2">');
   					$('#img1').hide();
	         	}else{
	         		$('span:eq(1)').html("用户名可用").show();
   					$('span:eq(1)').before('<img src="img/2.gif" id="img1">');
					$('#img2').hide();
	         	}
	         });
	          $('#p1').blur(function(){
	         	var p1=$('#p1').val();
	         	if(p1.length<6){
	         		$('span:eq(2)').html("密码格式有误").show();
   					$('span:eq(2)').before('<img src="img/1.gif" id="img2">');
   					$('#img1').hide();
	         	}else{
	         		$('span:eq(2)').html("密码格式正确").show();
   					$('span:eq(2)').before('<img src="img/2.gif" id="img1">');
					$('#img2').hide();
	         	}
	         });
	         $('#p2').blur(function(){
	         	var p1=$('#p1').val();
	         	var p2=$('#p2').val();
	         	if(p2.length<6){
	         		$('span:eq(3)').html("密码格式有误").show();
   					$('span:eq(3)').before('<img src="img/1.gif" id="img2">');
   					$('#img1').hide();
	         	}else if(p1!=p2){
	         		$('span:eq(3)').html("两次密码输入不一致").show();
   					$('span:eq(3)').before('<img src="img/2.gif" id="img1">');
					$('#img2').hide();
	         	}else{
	         		$('span:eq(3)').html("密码格式正确").show();
   					$('span:eq(3)').before('<img src="img/2.gif" id="img1">');
					$('#img2').hide();
	         	}
	         });
	         
		});
		
	</script>
	<body>
	
		<center>
			<form method="post" action="#">
				<table border="1px soild" cellspacing="0px" cellpadding="8px"  style="margin-top: 140px;">
					<tr>
						<th>请填写您的Email地址：</th>
						<td><input type="text" id="email"/>请填写有效的Email地址,在下一步中您将用此邮箱接收验证邮件<br/><span></span></td>
					</tr>
					<tr>
						<th>设置您在当当网的昵称：</th>
						<td><input type="text" id="name"/>您的昵称可以由小写英文字母、中文、数字组成,长度4-20个字符,一个汉字为两个字符<br/><span></span></td>
					</tr>
					<tr>
						<th>设置密码：</th>
						<td><input type="password" id="p1"/>您的密码可以由小写英文字母、中文、数字组成,长度6-20<br/><span></span></td>
					</tr>
					<tr>
						<th>再次设置您输入的密码：</th>
						<td><input type="password" id="p2"/><span></span></td>
					</tr>					
				</table>
				<button id="tj">注册</button>
			</form>
		</center>
	</body>
</html>