1:为什么要进行表单验证?

减轻服务器的压力 保证输入的数据符合要求

2:常用的表单验证

日期格式 表单元素是否为空 用户名和密码 E-mail地址 身份证号码

3:为什么使用表单选择器

表单选择器用于选取某些特定的表单元素

所有单选按钮或隐藏的元素

4:非空验证

if (mail == "") {

alert("Email不能为空");

return false; }

5:字符串查找

indexOf():查找某个指定的字符串值在字符串中首次出现的位置

eg:

var str="this is JavaScript";

var selectFirst=str.indexOf("Java");

var selectSecond=str.indexOf("Java",12);

6:长度验证

if(pwd.length<6){

alert("密码必须等于或大于6个字符");

return false; }

7:判断字符串是否有数字

使用for循环和substring()方法依次截取单个字符,再判断每个字符是否是数字

for (var i = 0; i < user.length; i++) { var j = user.substring(i, i + 1);

if (isNaN(j) == false) {

alert("姓名中不能包含数字"); return false;

} }

8:表单验证事件和方法

事件:

onblur:失去焦点,当光标离开某个文本框时触发

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

方法:

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

focus():在文本域中设置焦点,即获得鼠标光标

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

9:为什么需要正则表达式?

简洁的代码 严谨的验证文本框中的内容 生产环境中更为常用的方式

10:定义正则表达式

普通方式:

语法:var reg=/表达式/附加参数;

eg:

var reg=/white/;

var reg=/white/g;

构造函数

语法:

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

eg:

var reg=new RegExp("white");

var reg=new RegExp("white","g");

11:表达式的模式

简单模式

只能表示具体的匹配

eg:

var reg=/china/; var reg=/abc8/;

复合模式

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

eg:

var reg=/^\w+$/; var reg=/^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$/;

 

12:文本输入提示特效
实现思路
把错误信息显示在<span>中,然后使用html()方法,设置<span>和
</span>之间的内容
编写脚本验证函数
鼠标失去焦点时(blur事件)调用验证函数

 

 

13:RegExp对象

RegExp对象的方法

exec( ):检索字符中是正则表达式的区配,返回找到的值,并确定其位置

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

RegExp对象的属性

global:RegExp对象是否具有标志g,表示全局匹配

ignoreCase:RegExp对象是否具有标志i,表示不区分大小写

multiline:RegExp对象是否具有标志m,表示多行匹配

 

14:String对象

String对象的方法

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

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

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

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

 

15:正则表达式符号

/…/

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

^

匹配字符串的开始

$

匹配字符串的结束

\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}

 

16:HTML5新增属性

placeholder

required …

 

17:validity属性

stepMismatch

customError …

 

18:HTML5新增验证属性

placeholder

提供一种提示(hint),输入域为空时显示,获得焦点输入内容后消失

required

规定输入域不能为空

pattern

规定验证input域的模式(正则表达式)

 

posted on 2020-07-05 16:46  吅^O^  阅读(188)  评论(0编辑  收藏  举报