表单验证和正则表达式

正则表达式和表单验证

主要内容

?什么是表单的验证

?表单的操作

?表单的验证

?正则表达式的定义

?正则表达式验证

(一)什么是表单的验证

表单的验证

在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”);

举例

(三)表单的验证举例

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

验证选择域是否选择

验证单选按钮是否选择

(四)正则表达式定义

什么是正则表达式

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

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

?匹配字符的格式

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

JS正则表达式大全

JS正则表达式大全 JS正则表达式大全【1】 正则表达式中的特殊字符【留着以后查用】字符含意 \ 做为转意，即通常在"\"后面的字符不按原来意义解释，如/b/匹配字符"b"，当b前面加了反斜杆后/\b/，转意为匹配一个单词的边界。 -或- 对正则表达式功能字符的还原，如"*"匹配它前面元字符0次或多次，/a*/将匹配a,aa,aaa，加了"\"后，/a\*/将只匹配"a*"。 ^ 匹配一个输入或一行的开头，/^a/匹配"an A"，而不匹配"An a" $ 匹配一个输入或一行的结尾，/a$/匹配"An a"，而不匹配"an A" * 匹配前面元字符0次或多次，/ba*/将匹配b,ba,baa,baaa + 匹配前面元字符1次或多次，/ba*/将匹配ba,baa,baaa ? 匹配前面元字符0次或1次，/ba*/将匹配b,ba (x) 匹配x保存x在名为$1...$9的变量中 x|y 匹配x或y {n} 精确匹配n次 {n,} 匹配n次以上 {n,m} 匹配n-m次 [xyz] 字符集(character set)，匹配这个集合中的任一一个字符(或元字符) [^xyz] 不匹配这个集合中的任何一个字符 [\b] 匹配一个退格符 \b 匹配一个单词的边界 \B 匹配一个单词的非边界 \cX 这儿，X是一个控制符，/\cM/匹配Ctrl-M \d 匹配一个字数字符，/\d/ = /[0-9]/ \D 匹配一个非字数字符，/\D/ = /[^0-9]/ \n 匹配一个换行符 \r 匹配一个回车符 \s 匹配一个空白字符，包括\n,\r,\f,\t,\v等 \S 匹配一个非空白字符，等于/[^\n\f\r\t\v]/ \t 匹配一个制表符 \v 匹配一个重直制表符 \w 匹配一个可以组成单词的字符(alphanumeric，这是我的意译，含数字)，包括下划线，如[\w]匹配

js表单验证代码全集

js表单验证代码全集 2008年06月25日星期三下午 03:23 1:js 字符串长度限制、判断字符长度、js限制输入、限制不能输入、textarea 长度限制 2.:js判断汉字、判断是否汉字、只能输入汉字 3:js判断是否输入英文、只能输入英文 4:js只能输入数字,判断数字、验证数字、检测数字、判断是否为数字、只能输入数字 5:只能输入英文字符和数字 6: js email验证、js 判断email 、信箱/邮箱格式验证 7:js字符过滤,屏蔽关键字 8:js密码验证、判断密码 2.1: js 不为空、为空或不是对象、判断为空、判断不为空 2.2:比较两个表单项的值是否相同 2.3:表单只能为数字和"_", 2.4:表单项输入数值/长度限定 2.5:中文/英文/数字/邮件地址合法性判断 2.6:限定表单项不能输入的字符 2.7表单的自符控制 2.8:form文本域的通用校验函数 2.9：js验证手机号,含158,159段的 1. 长度限制