表单验证和正则表达式

正则表达式和表单验证

主要内容

✓什么是表单的验证

✓表单的操作

✓表单的验证

✓正则表达式的定义

✓正则表达式验证

(一)什么是表单的验证

表单的验证

在JavaScript之前，所有的验证都是发生在服务器上，增加了反应

时间

使用JavaScript验证，则在数据提交到服务器端之前进行一系列的

判断，比如数据不全或无效则取消提交，同时再提示重新输入.

表单的验证一般有两种形式

一个是在button按钮的onclick事件上完成，如果返回false则取消

提交

在提交按钮的onsubmit事件完成，如果返回false，表单不提交

常见的验证

文本框是否为空?

选择型的表单是否选择?

用户输入的邮件地址是否合法？

用户是否已输入合法的日期？

(二)表单的操作

引用表单域

根据表单的名字获取表单的引用

var myForm = doucument.forms[“name”];

根据表单数组获取

var myForm = document.forms[0];

表单中的属性

表单中的方法

表单中的事件

表单域中的通用属性

disabled属性

name属性:name的属性值是可以通过JavaScript改变

form属性:通过form属性可以获得一个表单域所在的表单

表单域中的通用方法

⏹focus()方法

⏹blur()方法

表单域中的通用事件

onfocus和onblur事件

onclick、onkeydown、onkeyup和onkeypress事件

onmouseover、onmouseout、onmousedown、和onmouseup事件

onchange事件

使用文本域

获取和设置文本域的值

使用select方法选中文本

使用按钮类表单域

简单按钮:最常用的方法捕获onclick事件，然后执行代码

复选按纽:通过checked属性获取，选中时是true，否则为false.

单选按钮:通过checked属性获取，选中时是true，否则为false.

使用下拉列表框

获取和设置下拉列表框的值

下拉列表框的值表示被选中的option标记的value属性

获取选项的个数

select对象有一个length属性，表示选项的个数

获取当前选项的索引

select对象中使用selectedIndex属性获取当前选中的option对象的索引

获取所有选项的集合

用options属性表示所有option组成的集合,option的value代表其值，text属性

代表其中间的文本，selected属性决定该option是否被选中

为select动态添加选项

在所有的option后面添加一个新的选项

Select.options[select.length] = new Option(“optiontext”,”value”);

从select中删除一个选项

⏹Select.options[1] = null;

清空一个select

替换一个选项

Select.options[0] = new Option(“optiontext”,”value”);

举例

(三)表单的验证举例

验证文本框中内容是否为空

验证选择域是否选择

验证单选按钮是否选择

(四)正则表达式定义

什么是正则表达式

⏹正则表达式就是一种字符串

⏹描述字符串结构模式的表达方法

⏹匹配字符的格式

(五)正则表达式的验证举例