表单验证.docx

表单验证.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=””;表示验证之前清空。

同上

使用正则表达式实现字符串的搜索或替换

这个三个方法不是正则表达式的

视频演示：

函数代码

总结：