第九章 表单校验.pptx

第九章 表单校验预习检查集中测试为什么需要进行表单验证？列出String 对象和表单验证有关的成员$(":input")能匹配页面中的哪些元素？如何表示一个正则表达式的开头和结尾？/48回顾及作业点评val()方法和attr()方法分别有什么作用？html()方法和text()方法有什么区别？获取子元素和获取父元素分别用什么方法？提问/48本章任务验证注册页面中的电子邮箱实现贵美商城注册页面验证实现博客园注册页面验证/48本章目标掌握String对象的用法会使用表单选择器选择页面元素会使用正则表达式验证页面输入内容会使用HTML5的方式验证表单内容/48为什么要表单验证减轻服务器的压力保证输入的数据符合要求/48常用的表单验证日期格式表单元素是否为空用户名和密码E-mail地址身份证号码/48表单验证的思路问题 当输入的表单数据不符合要求时，如何编写脚本来进行提示？分析获得表单元素值使用JavaScript的一些方法对数据进行判断当表单提交时，触发事件，对获取的数据进行验证/48为什么使用表单选择器表单选择器用于选取某些特定的表单元素，比如所有单选按钮或隐藏的元素演示示例1：表单选择器/48表单选择器3-1语法描述示例:input匹配所有input、textarea、select和button 元素$("#myform :input")选取表单中所有的input、select和button元素:text匹配所有单行文本框$("#myform :text")选取email 和姓名两个input 元素:password匹配所有密码框$("#myform :password"?)选取所有<input type="password" />元素:radio匹配所有单项按钮$("#myform :radio")选取<input type="radio" />元素:checkbox匹配所有复选框$(" #myform :checkbox "?)选取<input type="checkbox " />元素:submit匹配所有提交按钮$("#myform :submit "?)选取<input type="submit " />元素/48表单选择器3-2语法描述示例:image匹配所有图像域$("#myform :image"?)选取<input type=" image" />元素:reset匹配所有重置按钮$(" #myform :reset "?)选取<input type=" reset " />元素:button匹配所有按钮$("#myform :button"?)选取button 元素:file匹配所有文件域$(" #myform :file"?)选取<input type=" file " />元素:hidden匹配所有不可见元素，或者type 为hidden的元素$("#myform :hidden"?)选取<input type="hidden " />、style="display: none"等元素/48表单选择器3-3属性过滤选择器语法描述示例:enabled匹配所有可用元素$(" #userform :enabled"?)匹配form内部除编号输入框外的所有元素:disabled匹配所有不可用元素$(" #userform :disabled"?)匹配编号输入框:checked匹配所有被选中元素（复选框、单项按钮、select 中的option）$(" #userform :checked"?)匹配“性别”中的“男”选项和“爱好”中的“编程”选项:selected匹配所有选中的option 元素$(" #userform :selected"?) 匹配“家乡”中的“北京”选项演示示例2：表单过滤选择器/48验证表单内容使用String 对象验证邮箱不能为空，格式正确文本框内容的验证密码不能为空，不少于6个字符，姓名不能为空，不能有数字/48使用String 对象验证邮箱实现思路使用val( )方法获取文本框的值使用indexOf( ) 来判断字符串是否包含“@”和“.”使用方法submit( )提交表单根据返回值是true还是false来决定是否提交表单/48字符串验证检测Email是否为空非空验证if (mail == "") { alert("Email不能为空"); return false;}字符串查找indexOf()：查找某个指定的字符串值在字符串中首次出现的位置var str="this is JavaScript";var selectFirst=str.indexOf("Java");var selectSecond=str.indexOf("Java",12);返回8返回-1/4