搜索
正则表达式和表单辅助特效第二十章回顾与作业点评如何验证电子邮箱地址中有字符@？如何验证电子邮箱地址中有字符“.”，并且该字符不在最后一位？对文本框中的内容进行验证时，当鼠标离开文本框中时，如果内容不符合要求，使用什么事件可以即时提示错误信息，？预习检查正则表达式有几种构造方式，分别是什么？RegExp对象使用什么方法匹配正则表达式？如何创建数组并为数组赋值，使用数组的什么属性可以获取数组中的元素个数？本章任务制作严谨的电子邮箱验证页面制作省市级联效果本章目标使用innerHTML动态改变DIV的内容使用正则表达式验证页面输入的内容使用数组实现级联的下拉列表框效果正则表达式为什么需要正则表达式简洁的代码严谨的验证文本框中的内容什么是正则表达式正则表达式是一个描述字符模式的对象定义正则表达式表达式的模式定义正则表达式普通方式varreg=newRegExp(white);varreg=newRegExp(white,g);构造函数varreg=/表达式/附加参数varreg=newRegExp(表达式,附加参数)varreg=/white/;varreg=/white/g;表达式的模式简单模式复合模式varreg=/china/;varreg=/abc8/;varreg=/^\w+$/;varreg=/^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$/;RegExp对象RegExp对象的方法方法描述exec检索字符中是正则表达式的区配，返回找到的值，并确定其位置test检索字符串中指定的值，返回true或falseString对象String对象的方法方法描述match找到一个或多个正则表达式的匹配search检索与正则表达式相匹配的值replace替换与正则表达式匹配的字符串split把字符串分割为字符串数组RegExp对象的属性RegExp对象的属性属性描述globalRegExp对象是否具有标志gignoreCaseRegExp对象是否具有标志imultilineRegExp对象是否具有标志m正则表达式符号正则表达式常用符号正则表达式重复字符符号描述/…/代表一个模式的开始和结束^匹配字符串的开始$匹配字符串的结束\s任何空白字符\S任何非空白字符\d匹配一个数字字符，等价于[0-9]\D除了数字之外的任何字符，等价于[^0-9]\w匹配一个数字、下划线或字母字符，等价于[A-Za-z0-9_]\W任何非单字字符，等价于[^a-zA-z0-9_].除了换行符之外的任意字符符号描述{n}匹配前一项n次{n,}匹配前一项n次，或者多次{n,m}匹配前一项至少n次，但是不能超过m次*匹配前一项0次或多次，等价于{0,}+匹配前一项1次或多次，等价于{1,}？匹配前一项0次或1次，也就是说前一项是可选的，等价于{0,1}正则表达式的应用用户名、密码、电子邮箱、手机号码、身份证号码、生日、邮政编码、固定电话验证邮政编码和手机号码验证邮政编码和手机号码1.中国的邮政编码都是6位2.手机号码都是11位，并且第1位都是13.邮政编码和手机号码的验证的正则表达式varregCode=/^\d{6}$/;varregMobile=/^1\d{10}$/;演示示例：验证邮政编码和手机号码验证年龄对年龄进行验证，年龄必须在0－120之间1.10-99这个范围都是两位数，十位是1-9，个位是0-9，正则表达式为[1-9]\d。2.0-9这个范围是一位，正则表达式为\d。3.100-119这个范围是三位数，百位是1，十位是0-1，个位是0-9，正则表达式为1[0-1]\d。4.根据以上可知，所有年龄的个位都是0-9，当百位是1时十位是0-1，当年龄为两位数时十位是1-9，因此0-119这个范围的正则表达式为(1[0-1]|[1-9])?\d5.年龄120是单独的一种情况，需要单独列出来演示示例：验证年龄练习-验证注册页面需求说明使用正则表达式验证博客园注册页面，验证用户名、密码、电子邮箱、手机号码和生日用户名只能由英文字母和数字组成，长度为4-16个字符，并且以英文字母开头密码只能由英文字母和数字组成，长度为4-10个字符生日的年份在1900-2009之间，生日格式为1980-5-12或1988-05-04的形式完成时间：30分钟查看完整代码共性问题集中讲解常见调试问题及解决办法代码规范问题共性问题集中讲解小结下面正则表达式中（）能正确验证身份证号，身份证号码由15位或18位数字组成。A.varregMycard=/^\d{15}$|^\d{18}$/;B.varregMycard=/^\d{15}|\d{18}$/;C.varregMycard=/^\d{15,18}$/;D.varregMycard=/^\[0-9]{15}$|^\[0-9]{18}$/;使用下拉列表框实现级联效果如何使用下拉列表框实现城市级联1.select对象2.option对象下拉列表框对象Select对象常用事件、方法和属性类别名称描述事件onchange当改变选项时调用的事件方法add()向下拉列表中添加一个选项属性options[]返回包含下拉列表中的所有选项的一个数组selectedIndex设置或返回下拉列表中被选项目的索引号length返回下拉列表中的选项的数目Option对象常用属性text：设置或返回某个选项的纯文本值value：设置或返回被送往服务器的值Select对象的属性演示functionget(){varindex=document.getElementById(fruit).selectedIndex;varlen=document.getElementById(fruit).length;varshow=document.getElementById(show);show.innerHTML=被选选项的索引号为：+index+br/下拉列表选项数目为：+len;}演示示例：select对象的属性演示add()下拉列表框对象.add(new,old)简单的添加下拉菜单varprovince=document.getElementById(selProvince).value;varcity=document.getElementById(selCity);city.options.length=0;switch(province){case河南省:city.add(newOption(郑州市,郑州市),null);city.add(newOption(洛阳市,洛阳市),null);break;……}演示示例：简单的添加下拉菜单数组创建数组var数组名称=newArray(size);表示数组的关键字表示数组中可存放的元素总数为数组元素赋值varfruit=newArray(apple,orange,peach,bananer);varfruit=newArray(4);fruit[0]=apple;fruit[1]=orange;fruit[2]=peach;fruit[3]=bananer;访问数组数组名[下标]数组的属性和方法数组的常用属性和方法类别名称描述属性length设置或返回数组中元素的数目方法join()把数组的所有元素放入一个字符串，通过一个的分隔符进行分隔sort()对数组的元素进行排序数组方法的应用制作省市级联效果varfruit=newArray(4);fruit[0]=apple;fruit[1]=orange;fruit[2]=peach;fruit[3]=bananer;fruit.sort();varstr=fruit.join(-);document.write(str);下拉列表框的索引号（selectedIndex）与数组下标能准确对应吗？修改、增加或删除一个省时，对应的数组中的城市的数组下标会错位吗？数组的文字下标varcityList=newArray();cityList['河北省']=['邯郸市','石家庄市'];cityList['河南省']=['郑州市','洛阳市'];cityList['湖北省']=['武汉市','宜昌市'];如何读取数组中的元素值呢？for(variincityList){document.getElementById(show).innerHTML+=i+br/;}for(varjincityList){for(varkincityList[j]){document.getElementById(show).innerHTML+=cityList[j][k]+ ;}document.getElementById(show).innerHTML+=br/“;}省市级联效果实现思路创建两个下拉列表框，分别显示省份和城市选择某一个省份时，使用onchange事件调用函数（changeCity()）使城市下拉列表框中显示对应的城市页面加载时把省份名称添加到表示省份的下拉列表框中演示示例：制作省市级联效果练习－制作地址选择需求说明使用下拉列表框对象和数组制作贵美购物页面中地址选择的级联效果完成时间：30分钟查看完整代码共性问题集中讲解常见调试问题及解决办法代码规范问题共性问题集中讲解总结正则表达式中的“+”表示什么？正则表达式中“\d”和“\w”分别表示什么？根据班级名称选择对应班级的学生姓名，例如选择二班时对应所有二班学生姓名，选择三班时对应所有三班学生姓名，如图所示