理论第十四章结业项目途乐行项目二幻灯片.pptVIP

第十四章 结业项目：途乐行项目（二） 理论内容 添加途乐行订单页面的特效 添加团购页面的特效 添加注册页面的特效 添加登录的特效 途乐行中的用户注册功能，主要是让游客注册成为本网站的会员，在注册时要求用户输入账号、密码、姓名、身份证号和手机号，具体的格式要求如下： 1．用户账号、密码、确认密码、用户姓名、身份证号和手机号必填，其中用户帐号、密码供登录时使用 2．用户账号的长度在6-12位之间 3．密码长度在6-12之间 4．确认密码必须和密码值相同 5．用户名长度在2-6位之间 6．身份证由15位或者18位数字组成 7．手机号码以“13”、“15”或“18”开始，由11位数字组成 14.1 重难点分析 （1）在注册页面中，创建了用于输入用户帐号、密码、确认密码、用户名、身份证和手机号码的文本框，页面加载完后，默认“用户帐号”的文本框获取焦点。 14.1 重难点分析 （2）当文本框获取焦点时，边框高亮显示。丢失焦点时，将返回初始样式。当文本框丢失焦点时，需要对输入的内容进行格式验证，如果没有输入则提示“必填”，如果进行了输入但是格式错误，提示错误原因。 14.1 重难点分析 实现步骤如下： （1）新建regist.js脚本文件，创建函数checkNo()、checkPwd()、checkConfirm()、checkName()、checkPhone()和checkId()，使用它们分别验证帐号、密码、确认密码、用户名、手机号码和身份证号的格式。脚本代码如下： function checkNo($txtObj){ //验证帐号:必填，且长度在6到12之间 var len=$txtObj.val().length; if(len==0){ $txtObj.siblings(span).text(账号必填); return false; } if(len6||len12){ $txtObj.siblings(span).text(账号的长度在6到12位之间); return false; } .... } 14.1 重难点分析 实现步骤如下： （2）创建函数check()，在提交之前验证所有录入的数据的格式，如果均正确，则提交表单，否则阻止提交。 function check(){ var flag= checkNo($(#txtNo)) checkPwd($(#txtPwd)) checkConfirm($(#txtConfirmPwd)) checkName($(#txtName)) checkId($(#txtId)) checkPhone($(#txtPhone)); return flag; } … form onsubmit=return check() … 14.1 重难点分析 实现步骤如下： 创建函数getFocus()，设置文本框获取焦点时的样式。脚本代码如下： function getFocus($txtObj){ //参数$txtObj:文本框对象 //当前文本框的样式 $txtObj.removeClass(txtInit).addClass(txtFocus); //获取同胞元素span，去掉背景图片,等待失去焦点后重新验证 $txtObj.siblings(span).removeClass(spanBlurOk); } 14.1 重难点分析 实现步骤如下： 创建函数loseFocus()，设置文本框失去焦点时的样式。脚本代码如下： function loseFocus($txtObj){ //文本框失去焦点时的样式 $txtObj.removeClass(txtFocus“).addClass(txtInit); } 14.1 重难点分析 实现步骤如下： 在文档加载完成事件中，使用trigger()方法，自动触发帐号文本框获取焦点的事件。分别给用于输入帐号、密码、确认密码、用户名、身份证号和手机号的文本框的focus和blur事件绑定方法，实现样式特效、验证格式和提示的功能。脚本代码如下： $(function(){ //自动触发账号文本框的focus事件 $(#txtNo).trigger(focus); $(#txtNo).focus(function(){ //绑定账号文本框获取焦点事件的方法 getFocus($(this)); //设置当前文本框的样式 }); $(#txtNo).blur(function(){//绑定账号文本框丢失焦点事件的方法 loseFoc