书城项目第一阶段:表单验证
1.1 表单的登录验证规则
用户登录页面的验证:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title>尚硅谷会员注册页面</title>
6. <link type="text/css" rel="stylesheet" href="../../static/css/style.css">
7. <script type="text/javascript" src="../../static/script/jquery-1.7.2.js"></script>
8. <script type="text/javascript">
9. //实现登录界面的验证
10. $(function () {
11. $("#sub_btn").click(function () {
//给注册按钮绑定单击响应事件
12. /**
13. * 注册页面的主要需求有:
14. * 1、验证用户名:必须由字母,数字下划线组成,并且长度为 5 到 12 位
15. * 2、验证密码:必须由字母,数字下划线组成,并且长度为 5 到 12 位
16. * 3、验证确认密码:和密码相同
17. * 4、验证邮箱
18. * 5、验证码:现在只需要验证用户已输入。因为还没讲到服务器。验证码生成。
19. */
20.
21. /**
22. * 验证用户名:必须由字母,数字下划线组成,并且长度为 5 到 12 位
23. * 1、获取输入框的内容
24. * 2、创建正则表达式
25. * 3、比较规则
26. * 4、返回提示信息
27. */
28. var usernameText = $("#username").val();
29. var usernamePatt = /^\w{5,12}$/;
30. if (!usernamePatt.test(usernameText)) {
31. $(".errorMsg").text("用户名不合法,请重新输入!");
32. //如果是不合法的信息,那么阻止submit的默认样式
33. return false;
34. }
35.
36. /**
37. * 验证密码:必须由字母,数字下划线组成,并且长度为 5 到 12 位
38. * 1、获取输入框的内容
39. * 2、创建正则表达式
40. * 3、比较规则
41. * 4、返回提示信息
42. */
43. var passwordText = $("#password").val();
44.<