jquery账号验证

最新推荐文章于 2022-05-31 15:43:21 发布

最好结果

最新推荐文章于 2022-05-31 15:43:21 发布

阅读量152

点赞数

分类专栏： jQuery html 文章标签： jquery

本文链接：https://blog.csdn.net/qq_48307365/article/details/115234905

版权

html 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

jQuery

6 篇文章 0 订阅

订阅专栏

jquery账号验证

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
		<style>
			span{
				color: red;
			}
		</style>
		<script type="text/javascript">
			$(document).ready(function(){
				$("#but1").click(function(){
					$(".texts").each(function(){
						 var $ts="不能为空";
					if($(this).val()==""){
						  					 	 
						 	$(this).next().replaceWith("<span>"+$(this).attr("xx")+$ts+"</span>")
					}else{
						 	$(this).next().replaceWith("<span>* </span>")
						
					}
				})
				})
				
			});
		</script>
	</head>
	<body>
		<form  >
			
			 
		
		<table border="1">
			<tr><td colspan="2" style="text-align: center;">会员注册</td></tr>
			<tr>
				<td>用户名</td>
				<td><input type="text"  xx="用户名" class="texts"><span>*</span></td>
				
			</tr>
			<tr>
				<td>密码</td>
				<td><input type="text" xx="密码" class="texts"><span>*</span></td>
			</tr>
			<tr>
				<td>性别</td>
				<td>					
			 <select>
			 	<option>男</option>
			 	<option>女</option>
			 </select>	
					 
				</td>
				
			</tr>
			<tr>
				<td>真实姓名</td>
			<td><input type="text"  xx="真实姓名"  class="texts"><span>*</span></td>
				
			</tr>
			<tr>
				<td>邮箱</td>
				<td><input type="text"  xx="邮箱"  class="texts"><span>*</span></td>
				
			</tr>
			<tr>
				<td>eail</td>
				<td><input type="text"  xx="eail"  class="texts"><span>*</span></td>
				
			</tr><tr>
				<td>详细住址</td>
				<td><textarea class="texts"  xx="详细住址" ></textarea><span>*</span></td>
				
			</tr>
			<tr>
				<td colspan="2" style="text-align: center;">
					<input type="button" id="but1"  value="添加" />
					<input type="reset"   value="重置" />
				
				</td>
			</tr>
			
		</table>
		</form>
	</body>
</html>