一、表单验证的必要性
01、节约时间,提升用户体验
02、减轻服务器压力
二、表单验证的方式
01、使用String对象验证
02、使用HTML的方式验证表达式
03、表单框架验证表单
三、表单属性过滤选择器
:input 匹配所有inout、textarea、select、button元素
:text 匹配所有单行文本框
:password 匹配所有密码框
:radio 匹配所有单项按钮
:checkbox 匹配所有复选框
:submit 匹配所有提交按钮
:image 匹配所有图像域
:reset 匹配所有重置按钮
:button 匹配所有按钮
:file 匹配所有文件域
:hidden 匹配所有不可见元素,或者type为hidden的元素 (style="display:none"和type="hidden"的都可以)
:enabled 匹配所有可用元素 $("form :enabled")匹配form内部除编号输入框外的所有元素
:disabled 匹配所有不可用元素 $("form :disabled")匹配 编号输入框
:checked 匹配所有被选中元素 (复选框、单项按钮、select中的option)
:selected 匹配所有选中的option元素
四、表单事件和方法
事件:
onblur 失去焦点,当光标离开某个文本框时触发
onfocus 获得焦点,当光标进入某个文本框时触发
方法:
blur() 从文本域中移开焦点
focus() 在文本域中设置焦点,即获得光标
select() 选取文本域中的内容,突出显示输入区域的内容
五、正则表达式
01、优势:
可以简化验证代码
使验证的内容更加准确
02、定义:
正则表达式是描述字符模式的对象,它由一些特殊的符号组成。RegExp对象是Regular Expression(正则表达式)的缩写
03、定义正则表达式
普通方式:
语法: var reg=/表达式/附加参数
普通方式的表达式必须是一个常量字符串
附加参数可选,主要有3个:
g 代表可以进行全局匹配
i 代表不区分大小写匹配
m 代表可以进行多行匹配
构造函数:
语法: var reg=new RegExp("表达式","附加参数")
构造函数的表达式可以是常量字符串,也可以是一个JavaScript变量
04、表达式的模式
简单模式:
简单模式是指通过普通字符的组合来表达的模式
复合模式:
复合模式是指含有通配符来表达的模式
六、使用HTML5方式验证表单
placeholder 输入一种提示
required 输入域不能为空
pattern 规定输入域的模式(正则表达式)