jQuery简单的注册表单

注册表单的实现思想及步骤

1. 明确自己需要收集的注册信息并在Html上写出表单的布局
2. 在js上进行数据接收和验证，向服务器发起注册请求，处理请求返回的数据。

代码实现

html代码

<form>
			<div><span>用户名：</span><input type="text" id="username"/><span class="tishi">长度为4~20个字符，支持汉字，字母，数字及"-","_"组合</span></div>
			<div><span>设置密码：</span><input type="password" id="password" /><span class="tishi">6~20个字符，建议由字母，数字构成的组合</span></div>
			<div><span>确认密码：</span><input type="password" id="passwords"/><span class="tishi">请再次输入密码</span></div>
			<div><span>性别：</span><input type="radio" name="sex" value="男"/><strong>男</strong><input type="radio" name="sex" value="女" /><strong>女</strong></div>
			<div><span>邮箱：</span><input type="text" id="email" ><span class="tishi"></span></div>
			
			<input type="button" value="立即注册" id="submit"/>
	</form>

css代码

input{
	margin: 0;
	padding: 0;
	display: block;
	border: none;
}

form{
	width: 515px;
	height: 580px;
	float: left;
	font-size: 16px;
	color: #cecece;
	line-height: 40px;
}

form input{
	width: 300px;
	height: 40px;
	border: 1px solid #cecece;
	float: left;
}
form span{
	display: block;
	height: 40px;
	float: left;
}
form div{
	height: 40px;
	width: 900px;
	float: left;
	margin: 13px 0;
	padding-left: 50px;
}
form div:nth-of-type(1){
	padding-left: 115px;
}
form div:nth-of-type(2){
	padding-left: 100px;
}
form div:nth-of-type(3){
	padding-left: 100px;
}
form div:nth-of-type(4){
	padding-left: 131px;
}
form div:nth-of-type(4) input{
	width:15px;
	height: 15px;
	line-height: 40px;
	margin-top: 14px;
	margin-right: 5px;
}
strong{
	display: block;
	height: 40px;
	width:20px;
	font-size: 16px;
	float: left;
	line-height: 40px;
}
form div:nth-of-type(5){
	padding-left: 131px;
}
form #submit{
	background: #ff5757;
	color: #fff;
	margin-left: 180px;
	margin-top: 20px;
}
form .tishi{
	height: 40px;
	display: none;        /*将提示信息默认隐藏*/
	float: left;
	border: 1px solid #cecece;
	color: #cecece;
	line-height: 40px;
	font-size: 12px;
	position: relative;
	background: #fff;
	z-index: 3;
}

js代码

$(
function(){
//标记各个内容是否填写
	var Name = 0;
	var Word = 0;
	var Words = 0;
	var Emails = 0;
	var Sexs = 0;
	// 用户名验证
	//表单获得焦点时显示提示信息
	$("#username").on("focus",function(){
		$(".tishi").eq(0).css("display","block");
	});
	//表单信息改变并失去焦点时执行
	$("#username").on("change",function(){
		var vals = $("#username").val();
		if(vals.length<4||vals.length>20){
			$(".tishi").eq(0).html("用户名长度只能在4~20个字符之间").css("color","#f00");//进行长度验证
		}else{
		//使用ajax请求接口进行用户名重复验证
			$.ajax({
				type:"get",
				url:"   ",
				data:{"username":vals},
				success:function(data){
					if(data.code==0){
						$(".tishi").eq(0).html("用户名已经被使用").css("color","#f00");
					}else{
						$(".tishi").eq(0).html("用户名可用").css("color","#0f0");
						Name++; //验证成功Name+1
					}
				}
			});
			
		}
	});
	
	//密码验证
	$("#password").on("focus",function(){
		$(".tishi").eq(1).css("display","block");
	});
	//文本框内容改变时进行验证
	$("#password").on("input",function(){
		let a = $("#password").val();
		let rega =/\D/;//验证密码是否为纯数字的正则
		if(a.length<6||a.length>20){//验证长度
			$(".tishi").eq(1).html("长度应为6~20个字符").css("color","#f00");
		}else if(!rega.test(a)){
			$(".tishi").eq(1).html("密码不能为纯数字").css("color","#f00");
		}else{
			$(".tishi").eq(1).html("密码可用").css("color","#0f0");
			Word++;//密码可用Word++
		}
	});
	
	//密码一致验证
	$("#passwords").on("focus",function(){
		$(".tishi").eq(2).css("display","block");
	});
	$("#passwords").on("change",function(){
		let a = $("#password").val();
		let b = $("#passwords").val();
		if(b!= a){
			$(".tishi").eq(2).html("两次输入密码不一致").css("color","#f00");
		}else{
			$(".tishi").eq(2).html("密码一致").css("color","#0f0");
			Words++;//两次密码一致Words++
		}
	});
	
	//邮箱验证
	$("#email").on("change",function(){
		let a = $("#email").val();
		let tage = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;//邮箱格式验证的正则
		var flag = tage.test(a);
		if(!flag){
			$(".tishi").eq(3).css({"display":"block","color":"#f00"}).html("邮箱格式不正确");
		}else{
			$(".tishi").eq(3).css({"display":"block","color":"#0f0"}).html("邮箱可用");
			Emails++;//邮箱可用时Emails++
		};
	});
	
	//性别的验证
	$("input[name='sex']").on("change",function(){
		Sexs++;//选择性别Sexs++
	});
	
	//哪一项不合格弹出对应的信息
	$("#submit").on("click",function(){
		if(!Name){
			alert("请输入正确的用户名");
		}
		if(!Word){
			alert("请输入正确的密码")
		}
		if(!Words){
			alert("两次密码不一致")
		}
		if(!Emails){
			alert("请输入正确的邮箱");
		}
		if(!Sexs){
			alert("请选择性别");
		}
		//所有项都符合要求时请求接口进行注册
  		if(Name&Word&Words&Emails&Sexs){
  			var userName = $("#username").val();//获取用户名
			var passWord = $("#password").val();//获取密码
			var Email = $("#email").val();//获取邮箱
			var sex = $("input[name='sex']:checked").val();//获取性别
			$.ajax({
				type:"POST",
				url:"    ",
				data:{'username':userName,
					'password':passWord,
					'email':Email,
					'sex':sex
				},
				success:function(data){
					if(data.msg=="成功"){
						alert("注册成功");
					}else{
						alert("注册失败");
					}
				}
			});
  		}
	});
});

运行截图

Ajax的使用

$.ajax({
	type:" ",    //请求方式
	url:" "，    //请求的地址
	data:{
	}，          //请求时所需的参数
	success:function(da){     //参数为返回的数据
	}
});

注: 本注册表单使用了jQuery，需要提前引入