书城一 | 黄皖's Blog

书城项目第一阶段，表单验证

验证用户名：必须由字母，数字下划线组成，并且长度为 5 到 12 位

验证密码：必须由字母，数字下划线组成，并且长度为 5 到 12 位

验证确认密码：和密码相同

验证码：现在只需要验证用户已输入。因为还没讲到服务器。验证码生成。

实现代码：

<script type="text/javascript" src="../../static/script/jquery-1.7.2.js"></script>
<script>
	//页面加载完成之后
	$(function () {
		//给注册绑定单击事件
		$("#sub_btn").click(function () {
			//验证用户名：必须由字母，数字下划线组成，并且长度为 5 到 12 位
			//1.获取用户名输入框里面的内容
			var usernameText = $("#username").val();
			//2.创建正则表达式对象
			var usernamePatt=/^\w{5,12}$/;
			//3.使用test方法验证
			if (!usernamePatt.test(usernameText)){
				//4.提示用户结果
				$("span.errorMsg").text("用户名不合法");
				return false;

			}
			//验证密码：必须由字母，数字下划线组成，并且长度为 5 到 12 位
				//1.获取用户名输入框里面的内容
				var passwordText = $("#password").val();
				//2.创建正则表达式对象
				var passwordPatt=/^\w{5,12}$/;
				//3.使用test方法验证
				if (!passwordPatt.test(passwordText)){
					//4.提示用户结果
					$("span.errorMsg").text("密码不合法");
					return false;

				}
			//验证确认密码：和密码相同
			//1.获取确认密码内容
			var repwdText = $("#repwd").val();
			//2.和密码比较
			if (repwdText!=passwordText){
				//4.提示用户结果
				$("span.errorMsg").text("确认密码和密码不一致");
				return false;
			}
			//邮箱验证：xxxxx@xxx.com 验证码：
			//1.获取邮箱里面的内容
			var emailText = $("#email").val();
			//2.创建正则表达式
			var emailPatt=/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/;
			//3.使用Text方法
			if (!emailPatt.test(emailText)){
				//4.提示用户结果
				$("span.errorMsg").text("邮箱格式不合法");
				return false;

			}
			//现在只需要验证用户已输入。因为还没讲到服务器。验证码生成
			var codeText = $("#code").val();
			//去掉验证码中前后空格
			alert("去空格前["+codeText+"]");
			var codeText = $.trim(codeText);
			alert("去空格后["+codeText+"]");
			if (codeText==null||codeText==""){
				//4.提示用户结果
				$("span.errorMsg").text("请输入正确的验证码");
				return false;

			}


			$("span.errorMsg").text("");//合法

		});

	});
</script>