8.表单验证

创建节点元素

工厂函数$（）用于获取或创建节点

$(selector) 通过选择器获取节点

$(element) 把DOM节点转化成jQuery节点

$(html) 使用hTML字符串创建jQuery节点

 

元素内部插入子节点A-B

append(content) 将B追加到A中

appendTo(content) 把A追加到B中

prepend(content)将B前置插入到A中

prependTo(content) 将A前置插入到B中

 

元素外部插入同辈节点A-B

after(content) 将B插入到A之后

insertAfter(content)将A插入到B之后

before(content) 将B插入到A之前

insertBefore(content)将A插入到B之前

 

删除节点

remove() 删除整个节点

empty() 清空节点内容

detach() 删除整个节点 保留元素的绑定事件 附加的数据

 

替换节点

replaceWith() 和replaceAll()用于替换某个节点A-B，前A后B！

replaceWith()：用B替换A；

replaceAll()： 用A代替所有的B。

 

表单验证

思路：当输入的表单数据不符合要求时

1.获得表单元素值

2.使用JavaScript的一些方法对数据进行判断

3.当表单提交时 触发事件 对获取的数值进行验证

 

为什么使用表单选择器

  表单选择器用于选取某些特定的表单元素 比如所有单选按钮或隐藏的元素

 

表单选择器

:input 匹配所有Input textarea select 和button元素

:text 匹配所有单行文本框

:password 匹配所有密码框

:radio 匹配所有单项按钮

:checkbox 匹配所有复选框

:submit 匹配所有提交按钮

 

:image 匹配所有图像域

:reset 匹配所有重置按钮

:button 匹配所有按钮

::file 匹配所有文件域

 

属性过滤选择器

:enabled 匹配所有可用元素

:disabled 匹配所有不可用元素

:checked 匹配所有被选中元素

:selected 匹配所有选中的option元素

 

验证表单内容

使用String对象验证邮箱

不能为空 格式正确

1.使用val() 方法获取文本框的值

2.使用indexOf()来判断字符串是否包含%

3.使用方法submit()提交表单

4.根据返回值时true还是false来决定是否提交表单

   文本框内容的验证

xxx

1.使用string对象的length属性验证密码的长度

2.验证两次输入密码是否一致

3.使用length属性获取文本长度 然后使用for循环和substring()方法一次截断单个字符

最后判断每个字符是否是数字

 

表单验证事件和方法

表单验证需要综合运用元素的事件和方法

事件

onfocus 获得焦点 当光标进入某个文本框时

onblur 失去焦点 光标离开某个文本框

方法

blur() 从文本域中移开焦点

focus() 在文本域中设置焦点

select()选取文本域中的内容 突出显示输入区域的内容

 

文本输入提示特效

 把错误信息显示在span中 使用html()方法 设置span之间的内容

 编写脚本验证函数

 鼠标失去焦点时(blur事件)调用验证函数

 

 

正则表达式

为什么要使用正则表达式

简洁的代码

严谨的验证文本框

定义正则表达式

  普通方式

var reg = /表达式/附加参数

  构造函数

var reg = new RegExp("表达式","附加参数")

简单模式

只能表示具体的匹配

复杂模式

可以使用通配符表达更为抽象的规则模式

 

RegExp对象的方法

exec 检索字符中是正则表达式的匹配 返回找到的值的位置

test 检索字符串中指定的值 返回true或false

 

String对象

match()找到一个或多个正则表达式的匹配

search()检索与正则表达式相匹配的值

replace()替换与正则表达式相匹配的字符串

split()把字符串分割为字符串数组

 

/.../代表一个模式的开始和结束

^  匹配字符串的开始

$  匹配字符串的结束

\s 任何空白字符

\S 任何非空白字符

\d 匹配一个数字字符 0-9

\D 除了数字之外的任何字符

\w 匹配一个数组 下划线 或字母字符

\W任何非单字字符

. 除了换行符之外的任意字符

 

正则表达式符号

{n}匹配前一项n次

{n,}匹配前一项n次 或者多次

{n,m}匹配前一项至少n次 不超过m次

* 匹配前一项0次或多次

+ 匹配前一项1次或多次

？匹配前一项0次或1次

 

验证邮箱

/^d{6}&\

验证手机号

/^1d{10}&\

验证年龄

10-99 [1-9]\d

0-9   \d

100-119 1[0-9]\d

0-9 (1[0-1]|[1-9])?\d

 

 

使用HTML5的方式验证表单

HTML5新增属性

placeholder 提供一种提示 输入域为空时显示 获取焦点或输入内容后消失

required 灰顶输入域不能为空

pattern 规定验证input域的模式

 

validity属性

valueMissing 必填项

typeMismatch 输入值与type类型不匹配

patternMismatch 与正则表达式不匹配

stepMismatch 不符合step特性所推算出的规则

customError 使用自定义的验证错误提示信息