＜JavaWeb书城项目＞01

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

  ①验证用户名：必须由字母，数字下划线组成，并且长度为 5 到 12 位.
  ②验证密码：必须由字母，数字下划线组成，并且长度为 5 到 12 位
  ③验证确认密码：和密码相同
  ④邮箱验证：xxxxx@xxx.com
  ⑤验证码：现在只需要验证用户已输入。
验证实现如下：

<script type="text/javascript" src="../../static/script/jquery-1.7.2.js"></script>
	<script type="text/javascript">
		//页面加载完成之后
		$(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 提示用户结果
					$(".errorMsg").text("用户名不合法");
					return false;
				}
				$(".errorMsg").text("");


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


				// 验证确认密码：和密码相同
				//1 获取确认密码输入框里的内容
				var repwdText = $("#repwd").val();
				//2 和密码相比较
				if (repwdText != passwordText){
					//3 提示用户
					$(".errorMsg").text("两次输入密码不一致");
					return false;
				}
				$(".errorMsg").text("");


				// 邮箱验证：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 使用 test 方法验证是否合法
				if (!emailPatt.test(emailText)){
					//4 提示用户
					$(".errorMsg").text("邮箱格式不合法");
					return false;
				}
				$(".errorMsg").text("");
				// 验证码：现在只需要验证用户已输入。因为还没讲到服务器。验证码生成。
				var codeText = $("#code").val();

				//去掉验证码前后空格
				codeText = $.trim(codeText);
				if (codeText == null || codeText == ""){
					$(".errorMsg").text("验证码为空");
					return false;
				}
				$(".errorMsg").text("");
			})

		})

	</script>

上述内容用到的jQuery方法：

• val():
  val() 方法返回或设置被选元素的 value 属性。
  返回 value 属性：$(selector).val()
  设置 value 属性：$(selector).val(value)
• text():
  text()方法设置或返回被选元素的文本内容
  语法：$(selector).text(content)
  content：规定被选元素的新文本内容。

上述用到的正则表达式验证：

• test():
  test() 方法用于检测一个字符串是否匹配某个模式.
  如果字符串中有匹配的值返回 true ，否则返回 false。
  语法RegExpObject.test(string)
  string：要检测的字符串。

关于：/^\w{5,12}$/

• /^：起始字符
• \w 元字符：
  用于查找单词字符，单词字符包括：a-z、A-Z、0-9，以及下划线, 包含 _ (下划线) 字符。
• {5,12}：要求的字符长度
• $/：结束字符