表单验证与jQuery实战-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_39753947/article/details/78232291

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>周考2</title>
	<script type="text/javascript" src="../../jquery-2.1.0.js"></script>
	<script type="text/javascript">
	$(function(){
	//email
	$("#div1 input:eq(0)").blur(function() {
	var email=$(this).val();
	if(email.search("@")==-1){
	$("span:eq(0)").html("用户Email错误");
	}else{
	$("span:eq(0)").html("用户名可用");
	}
	});
	//昵称
	$("#div1 input:eq(1)").blur(function() {
	var name=$(this).val();
	if(name.length<4){
	$("span:eq(1)").html("用户名错误");
	return false;
	}else{$("span:eq(1)").html("用户名正确");

	}
	});
	//密码
	$(" input:eq(3)").blur(function() {
	var pwd=$("#pwd").val();
	var pwd1=$("#pwd1").val();
	if(pwd==pw1){
	$("span:eq(3)").html("输入正确");
	}else{
	$("span:eq(3)").html("两次密码不一致");
	}
	});
	var but=$("button").eq(0);
	but.click(function () {
	if(email&&name && pwd && pwd1 ){
	$('form').submit();
	alert("注册成功");
	}else{
	alert("注册失败,信息不完善.");
	}
	});
	});
	</script>
	</head>

	<body>
	<form action="#" method="get">
	<div id="div1">
	请填写您的Email地址：<input type="text" id="email"/> <span></span><br />
	设置您在当当网的昵称：<input type="text" id="name"/><span></span><br />
	设置密码：<input type="password" id="pwd" onkeyup="keyup()"/><span></span><br />
	再次输入您设置的密码：<input type="password" id="pwd1" onkeyup="keyup()"/><span></span><br />
	<button id="button">注册</button>
	</div>
	</form>
	</body>
	</html>