用户信息提交

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>注册</title>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("button").click(function(){
					
					yz()
					return false
				})
				function yz()
				{
					//获取所有内容
					var name=$("#name").val()
					var phone=$("#phone").val()
					var sex=$("#sex").is(":checked")?"男":"女"
					var role=""
					$("input[type=checkbox]").each(function(){
						if($(this).is(":checked"))
						{
							role+=$(this).val()+" "
						}
					})
					var nation=$("select :selected").val()
					var bz=$("textarea").val()
					var str=""
					//判断name 有没 
					if(name.length==0)
					{
						str+="姓名不能为空\n"
						$("#name").focus()//获取焦点 
					}
					if(phone.length==0)
					{
						str+="手机号不能为空\n"
						$("#phone").focus()
					}
					//如果没有错误则提交
					if(str!="")
					{
						alert(str)
						return false
					}
					else
					{
						alert("姓名:"+name+"\r\n手机:"+phone+"\r\n性别:"+sex+"\r\n角色"+role+"\r\n国家:"+nation+"\r\n备注:"+bz)
					}
					
				}
				
			})
		</script>
	</head>
	<body>
		<p>用户注册</p>
		<form action="" method="post">
			
			<label for="">姓名:</label><input type="text" id="name" value="" placeholder="姓名"/><br />
		<label for="">手机号:</label><input type="text" id="phone" value="" placeholder="手机号"/><br />
		<label for="">性别:</label><input type="radio" id="sex" value="" name="sex" checked="checked"/>男 <input type="radio" name="sex" id="" value="" />女<br />
		<label for="">角色:</label>
		<input type="checkbox" id="" value="战士" /><label for="">战士</label>
		<input type="checkbox" id="" value="法师" /><label for="">法师</label>
		<input type="checkbox" id="" value="辅助" /><label for="">辅助</label>
		<input type="checkbox" id="" value="射手" /><label for="">射手</label>
		<input type="checkbox" id="" value="坦克" /><label for="">坦克</label>
		<br />
		
		<label for="">国家:</label>
		<select name="">
			<option value="中国">中国</option>
			<option value="美国">美国</option>
			<option value="韩国">韩国</option>
			<option value="日本">日本</option>
			
		</select><br />
		<label for="">备注</label>
		<textarea name="" rows="" cols=""></textarea><br />
		<button>提交</button>
		</form>
	</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值