表单验证.docx
- 文档编号:4729819
- 上传时间:2022-12-08
- 格式:DOCX
- 页数:11
- 大小:1.92MB
表单验证.docx
《表单验证.docx》由会员分享,可在线阅读,更多相关《表单验证.docx(11页珍藏版)》请在冰豆网上搜索。
表单验证
为什么表单验证要放在客户端
减轻服务端压力
表单验证哪些内容
表单验证的思路
客户端先向服务器端发出请求,然后服务器在返回给客户端一张带有javaScript验证脚本的HTML页面,之后呢这里的脚本会在客户端运行。
从而达到验证的目的
两点要注意:
获取文本框输入的文本,不管用户输入的什么它的格式都是字符串形式的。
获取字符串之后,我们根据我们的业务规则对字符串进行判断是否合法
Form表单的onsubmit提交事件,就是这个onsubmit里判断验证,调用一个函数
出了String对象验证以外,还有一个正则表达式。
String对象
charAt参数index表示的是字符串中指定的位置。
indexOf表示我们要查找的字符串在目标字符串中首次出现的位置。
第一个参数就是我们要查找的字符串,第二个参数表示我们要查找的起始位置(可以省略)。
例子:
selectSecond返回的-1表示不存在,因为12超出了查找的范围。
演示:
验证用户注册页面
如何利用String对象验证注册页面
效果图
form表单HTML代码:
红线onsubmit是form标签的一个事件,并不是提交按钮的一个事件
javaScript函数代码:
isNaN()方法检查是否是数字如果是数字,false表示是数字,true表示不是数字。
制作输入提示特效的思路
DOM把文本框看成一个Textbox对象,利用该对象的一些属性和方法来对这个文本框进行操纵。
当输入点离开这个文本框的时候它会产生一个事件(失去焦点事件onblur)
当触发这个事件的时候调用验证函数就可以了。
错误提示信息我们可以在文本框的后面添加一个div,然后在利用innerHTML这个属性来动态添加错误信息。
HTMLDOM:
Textbox文本框对象
演示:
制作输入提示特效
第一种写法:
利用onblur事件调用checkEmail()函数
添加一个span标签存放错误提示信息。
也可以添加一个div标签
然后写验证函数:
第二种写法:
其余不部分,一样的
这里我们还要对表单函数进行验证如果有一个项是false就不能通过,所以还要给每一个函数添加一个最后返回的结果true。
使用正则表达式实现复杂验证
什么是正则表达式
正则表达式作为一个模板,将某个字符模式与所搜索的字符串进行匹配。
正则表达式就是用某种模式去匹配一类字符串的公式,主要用来描述字符串匹配的工具。
例如:
QQ是5到12位的一组数字,用正在表达式怎么表示。
类似的符号还很多。
元字符
这里范围从上到下逐渐扩大的
出现的次数(匹配符)
完整的邮箱正则表达式:
正则表达式RegExp对象
如何创建一个正则表达式的RegExp对象
等于第二种
视频演示:
固定电话栏HTML
电子邮件地址HTML
固定电话验证的函数
验证邮箱格式的函数email_prompt.innerHTMl=””;表示验证之前清空。
同上
使用正则表达式实现字符串的搜索或替换
这个三个方法不是正则表达式的
视频演示:
函数代码
总结:
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 表单 验证
![提示](https://static.bdocx.com/images/bang_tan.gif)