书城项目学习

项目模块内容（一）

 pages存放的一般都是页面，这些页面按照不同的模块有不同的目录组织划分，static存放的一般是静态资源（css，img图片）

register页面讲解

jQuery实现表单验证

jQuery文件一般放在static目录下

引进jQuery文件

验证用户名

// 给注册绑定单击事件
                $("#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;
                        // 去掉错误信息
                    $("span.errorMsg").text("");
                        //合法以后就应该把错误信息删掉，因为一旦你提交了一次不合法信息显示不合法后，span标签不会清空，所以每次提交后（相当于每次执行函数后）要删掉
                    }

知识复习：

form标签里的action属性

action属性规定当提交表单时，向何处发送表单数据。（是必需的属性）

属性值的介绍：（看图）

熟悉了action属性的含义和语法，现在让我们来看看实例： 下面的表单是拥有两个输入字段以及一个提交按钮，当提交表单时，表单数据会提交到名为 "form_action.asp" 的页面：

<form action="form_action.asp" method="get">
<p>这里输名字: <input type="text" name="fname" /></p>
<p>接着输名字: <input type="text" name="lname" /></p>
<input type="submit" value="Submit" />
</form>

return false:

”return false“到底做了什么？

当你每次调用”return false“的时候，它实际上做了3件事情：

• event.preventDefault();

• event.stopPropagation();

• 停止回调函数执行并立即返回。

验证密码

// 验证密码：必须由字母，数字下划线组成，并且长度为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) {
                        //3 提示用户
                        $("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 使用test方法验证是否合法
                    if (!emailPatt.test(emailText)) {
                        //4 提示用户
                        $("span.errorMsg").text("邮箱格式不合法！");
​
                        return false;
                    }

验证码

// 验证码：只需要验证用户已输入。
                    var codeText = $("#code").val();
​
                    //去掉验证码前后空格                 
                    codeText = $.trim(codeText);
                    
                    if (codeText == null || codeText == "") {
                        //4 提示用户
                        $("span.errorMsg").text("验证码不能为空！");
​
                        return false;
                    }