使用JavaScriptjQuery实现页面特效第六章-实践.pptVIP

* 实践六 正则表达式 实践目标 使用正则表达式，完成搜索并替换 使用正则表达式，实现注册表单的验证 在页面的文章中搜索输入的关键字，如果搜索到则高亮显示；否则提示“已经完成搜索，未找到搜索项”。 （1）用户输入关键字后，在页面的文章中进行搜索，如果搜索到，则在文章中高亮显示关键字。 （2）在文章中没有搜索到关键字时，则给予提示。 任务一：使用正则表达式，完成搜索并替换 （1）声明全局变量，保存初始的文章内容和样式，以便在未找到关键字时，恢复文章初始的效果。 （2）声明函数searchInfo()，在函数体中，根据输入的关键字，创建正则表达式即搜索的模式，调用String对象的match()方法进行搜索。如果match()方法的返回值是null，则提示“已经完成搜索，未找到搜索项”，且恢复文章原有的样式；否则，将所有搜索到的关键字，在文章中进行高亮显示。 （3）将“搜索”按钮onclick事件关联searchInfo()方法。 任务一：使用正则表达式，完成搜索并替换 任务一：使用正则表达式，完成搜索并替换 var initData; initData=document.getElementById(content).innerHTML; function searchInfo(){ var findText=document.getElementById(txtFind).value; var wordText=initData; var reg=eval(/+findText+/g); var resultArr=wordText.match(reg); if(resultArr==null){ document.getElementById(content).innerHTML=initData; alert(已经完成搜索，未找到搜索项); }else{ var newText=wordText.replace(reg,span style=color:red+findText+/span); document.getElementById(content).innerHTML=newText; } } （1）页面加载完毕后 ，用户单击“查找并替换”的按钮，首先对提供输入查找内容的文本框进行非空验证，如果没有录入，则给予提示。 任务一：使用正则表达式，完成搜索并替换 （2）确定录入查找的内容后，如果在文章中能找到要查找的关键字并且用户也输入了要替换的内容则被新内容替换，并提示替换的次数。 任务一：使用正则表达式，完成搜索并替换 （3）如果在文章中没有查找到输入的关键字，则给予提示。 任务一：使用正则表达式，完成搜索并替换 验证网易通行证的注册表单，要求用户输入的用户名、昵称、邮箱、密码、手机号码和身份证必须符合格式要求，当输入的表单数据不符合要求时，即时提示错误信息。当输入均正确，则提交表单。 （1）用户名、昵称的格式要求。 任务二：使用正则表单式，实现注册表单的验证 （2）当输入完毕，文本框失去焦点时，即时提示。如果数据不符合要求，说明原因。 （3）根据格式是否都正确来决定是否提交表单。 任务二：使用正则表单式，实现注册表单的验证 （1）声明函数checkName()、checkNick()，分别按照图6.2.7所示的格式要求来验证用户名、昵称是否合法，并给予提示。 （2）声明函数checkForm()，提交之前，验证所有录入的数据的格式。如果均正确，则提交表单；否则阻止提交。 （3）事件和处理程序的绑定。例如：表单的onsubmit事件和checkForm()函数绑定、录入用户名的文本框onblur事件和checkName()函数的绑定等。 任务二：使用正则表单式，实现注册表单的验证 任务二：使用正则表单式，实现注册表单的验证 function checkName() { var name = $(txtName).value; var name_prompt = $(span_name); var nameReg = /^[0-9a-zA-Z][0-9a-zA-Z_.-]{2,16}[0-9a-zA-Z]$/; if (!nameReg.test(name)) { name_prompt.innerHTML = 错误，由字母、数字、下划线、点和减号组成的4-18位字符，以数字、字母开头或结尾; return false; } name_prompt.i