Web前端技术 课件 模块四 任务4 登录页面表单验证功能实现_第1页
Web前端技术 课件 模块四 任务4 登录页面表单验证功能实现_第2页
Web前端技术 课件 模块四 任务4 登录页面表单验证功能实现_第3页
Web前端技术 课件 模块四 任务4 登录页面表单验证功能实现_第4页
Web前端技术 课件 模块四 任务4 登录页面表单验证功能实现_第5页
已阅读5页，还剩19页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

登录页表单验证功能实现Web前端技术主讲老师：何成芊延时符CONTENTS目录01任务描述03知识点导图02学习目标

04相关知识05任务实施延时符任务描述延时符任务描述在上一个任务中，我们制作了登录页面。但是没有实现登录的功能，本次任务我们将运用用JavaScript中函数，关系运算，焦点事件等知识继续完善上一任务的登录页面中手机号码验证和输入密码验证功能。下面，我们将学习如何使用JavaScript相关知识完成用户登录页面验证任务。效果如图4-4-1所示。延时符学习目标延时符学习目标掌握自定义函数的方法；掌握比较、逻辑和条件运算符的使用；掌握焦点事件的使用方法；知识目标能够编写自定义函数；能够熟练使用比较、逻辑和条件运算符；能够合理使用this；技能目标延时符培养模块化编码理念；培养踏实的工作态度；培养思维逻辑能力；培养团队合作的意识。素养目标知识点导图延时符知识点导图延时符相关知识延时符函数比较运算逻辑运算条件运算焦点事件JavaScript中的函数是可重复使用的代码块，它主要由事件驱动的或者被调用时执行。常用定义函数的基本语法如下：根据这样的基本语法，我们可以尝试定义一个简单的自定义函数myFunction(),代码如右方所示：函数延时符1.<script>2.//函数定义（无参数）3.functionmyFunction()4.{5.alert("HelloWorld!");6.}7.</script>8.</head>9.10.<body>11.<!--通过按钮单击事件进行函数的调用-->12.<buttononclick="myFunction()">点我</button>function函数名(){//函数体}前文代码在浏览器中运行，点击按钮“点我”，可以通过onclick事件驱动函数myFunction()，执行函数中的代码块alert(“HelloWorld!”)，运行效果如图4-4-4所示：函数（续1）延时符在调用函数时，可以向其传递值，这些值被称为参数。这些参数可以在函数中使用。可以向函数发送任意多的参数，参数之间由逗号(,)分隔，语法如下：JavaScript函数中变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推。所以可以创建一个包含参数的函数，代码如右方所示：函数（续2）延时符1.1.<p>点击这个按钮，来调用带参数的函数。</p>2.<buttononclick="myFunction('BillGates','teacher')">点击这里</button>3.<script>4.//函数定义(有两个参数,无返回值)5.functionmyFunction(name,job){6. alert("Welcome"+name+",the"+job);7.}8.</script>myFunction(argument1,argument2)在浏览器中运行，点击按钮“点击这里”，可以通过onclick事件驱动函数myFunction()，执行函数中时按照参数顺序将“BillGates”和“teacher”依次传递执行，运行效果如下图4-4-5所示：有时，我们会希望函数将值返回调用它的地方。通过使用return语句就可以实现。在使用return语句时，函数会停止执行，并返回指定的值。比如以下代码：最终将会计算出4和3的乘积，并返回给调用函数的位置。本例中将会赋值给id=”demo”的p元素。函数（续3）延时符1.1.<p>本例调用的函数会执行一个计算，然后返回结果：</p>2.<pid="demo"></p>3.<script>4.//函数定义(有两个参数,有返回值)5.functionmyFunction(a,b){6. returna*b;7.}8.document.getElementById("demo").innerHTML=myFunction(4,3);9.</script>比较运算延时符JavaScript的比较运算符有==、===、!=、!==、<、>、<=和>=，通常用于逻辑语句，以判定变量或值是否相等，它的返回值为布尔型（true或false），最常见的使用场景就是在分支和循环控制语句中的使用。表格4-4-1是x=7情况下是各类比较运算的结果：运算符说明案例返回值==等于x==8x==7falsetrue===绝对等于(类型数值都相同)x===”7”x===7falsetrue!=不等于x!=8true!==不绝对等于（值和类型有一个不相等，或两个都不相等）x!===”7”x!===7truefalse<小于x<8true>大于x>8false<=小于等于x<=8true>=大于等于x>=8false逻辑运算延时符逻辑运算符用于测定变量或值之间的逻辑，逻辑运算通常和比较运算配合使用。表格4-4-2是x=6以及y=3情况下是各类逻辑运算运算的结果：运算符说明案例返回值&&and与x<10&&y>1true||or或x==5||y==5false!not非!(x==y)true条件运算延时符JavaScript还包含了基于某些条件对变量进行赋值的条件运算符。语法如下所示：例如：variablename=(condition)?value1:value21.c=(temperature<37.3)?"体温正常":"发热";

//当变量temperature值小于37.3时条件运算结果为“体温正常”，否则结果为“发热”。焦点事件延时符焦点事件主要有两类事件组成，一类是得到焦点事件onfocus；一类是失去焦点事件onblur。通常用于<input>和<select>等表单元素或者<a>元素中。例如如下代码能够文本框实现得到焦点时背景色改为红色，失去焦点时还原为白色。运行效果如下图4-4-6所示：1.输入您的姓名:<inputtype="text"id="fname">2.<script>3.document.getElementById("fname").addEventListener("focus",myFocus);4.functionmyFocus(){5.document.getElementById("fname").style.backgroundColor="red";6.}7.document.getElementById("fname").addEventListener("blur",myBlur);8.functionmyBlur(){9.document.getElementById("fname").style.backgroundColor="white";10.}11.12.</script>焦点事件讲解任务实施延时符任务分析技术分析与实现完成代码任务分析延时符用户登录验证任务，需要对输入手机号码合理性进行验证，比如手机号码是不是11位，将此项功能定义为函数checkPhone；也对输入密码正确性进行验证（教材中使用手机号码后六位作为默认密码），将此项功能定义为函数checkPw；另外可以使用焦点函数改变当前编辑文本框或者密码框的样式。所以这项任务的主要任务可以分解为3项子任务如右图4-4-3所示：：技术分析与实现：步骤1延时符步骤1：定义手机号码合理性验证函数，手机号码合理性包括以下3个方面：合理的手机号码是11位；合理的手机号码是全部为数字；合理的手机号码首位数字为1；以上功能定义为函数checkPhone()，代码如右侧所示：1.1.functioncheckPhone(){2. if(phone.value.length!=11){3. str="手机号码位数错误!";4. txt.className+='red';5. }elseif(phone.value.charAt(0)!='1'){6. str="手机号码首位数字不为1错误！";7. txt.className+='red';8. }elseif(isNaN(Number(phone.value,10))){9. str="手机号码中包含非数字！";10. txt.className+='red';11. }else{12. str="手机号码符合格式要求！";13. }14.}技术分析与实现：步骤2延时符步骤2：定义密码正确性验证函数。密码正确性验验证首先需要通过用户输入的手机号码进行默认密码的动态生成（手机号码后6位）。然后将输入的密码和默认密码进行比对即可。以上功能定义为函数checkPw()，代码如下：1.1.functioncheckPw(){2. varpass=phone.value.substr(5,6);3. if(phone.value.length!=11){4. str="手机号码位数错误!";5. txt.className+='red';6. }elseif(pw.value!=pass){7. str='密码错误！'8. txt.className+='red';9. }else{10. str='密码正确！';11. txt.className='reg';12. }13.}

技术分析与实现：步骤3延时符步骤3：焦点事件处理。焦点事件处理包括以下4个方面：文本框得到焦点时修改背景样式；文本框失去焦点时恢复背景样式，并调用checkPhone()做合理性验证；密码框得到焦点时修改背景样式，并调用checkPhone()做合理性验证；密码框失去焦点时恢复背景样式；以上功能代码如右侧：1.//文本框得到焦点时修改背景样式2.phone.onfocus=function(){3. this.className='in';4.}5.//文本框失去焦点时恢复背景样式，并调用checkPhone()做合理性验证6.phone.onblur=function(){7. checkPhone();8. txt.innerHTML=str;9. this.className='';10.}11.12.//密码框得到焦点时修改背景样式，并调用checkPhone()做合理性验证13.pw.onfocus=function(){14. checkPhone();15. txt.innerHTML=str;16. this.class

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论