表单验证和正则表达式
正则表达式和表单验证
主要内容
?什么是表单的验证
?表单的操作
?表单的验证
?正则表达式的定义
?正则表达式验证
(一)什么是表单的验证
表单的验证
在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. 长度限制
2. 只能是汉字 3." 只能是英文 2. 只能是汉字 3." 只能是英文Javascript表单验证案例
Javascript表单验证案例 一、前期准备 站点目录:E:\Mywebsite 站点中的页面: E:\Mywebsite\reg.html 用户注册的表单页面 E:\Mywebsite\getData.html 点击“注册”按钮后跳转的用于模拟接收数据的页面reg.html效果图: getData.html效果图: 运行效果图:
二、表单验证页面(reg.html)完整代码