什么需要表单验证?
1.减轻服务器的压力
2.保证数据的完整性、有效性
表单效验的步骤:
1.获取表单元素输入的值
2.对表单数据进行判断处理
3.使用事件对数据进行提交
表单选择器:
$(":input") 选中所有input元素
$(":text") 选中所有的文本框
$(":paassword") 选中所有的密码框
$(":radio") 选中所有的单选按钮
$(":checkbook") 选中所有的复选框
$(":file") 选中所有的文件域
$(":image") 选中所有的图片按钮
$(":button") 选中所有的普通按钮
$(":submit") 选中所有的提交按钮
$(":bidden") 选中所有的隐藏元素
$(":email") 选中所有的邮箱
$(":reset") 选中所有的重置按钮
表单属性过滤选择器:
$(":enabled") 选中所有可用元素
$(":disabled") 选中所有的不可用元素
$(":checked") 选中所有单选、复选中被选中的元素
$(":selected") 选中下拉列表选中的元素
获取和失去焦点事件
事件: onfocus 获取焦点
onblur 失去焦点
方法(jQuery):
focus() 获取焦点方法
blur() 失去焦点的方法
select() 选中列表时的方法
正则表达式:
1、代码简洁
2、对输入的格式验证更严谨,更加安全
语法 : /表达式/附加参数 列如:var reg=/java/g;
表达式指的是需要匹配的内容 验证的内容
附加参数指的是匹配的方式
g:全局匹配 匹配一次后继续匹配
i:大小写匹配 忽略大小写匹配
m:换行模式下匹配
正则验证方法:
exec() 验证字符串中是否含有字符,得到字符串 否则得到null
test() 验证字符串中是否含有字符,得到true 否则得到false
字符串验证方法:
正则表达式:
1、代码简洁
2、对输入的格式验证更严谨,更加安全
语法 : /表达式/附加参数 列如:var reg=/java/g;
表达式指的是需要匹配的内容 验证的内容
附加参数指的是匹配的方式
g:全局匹配 匹配一次后继续匹配
i:大小写匹配 忽略大小写匹配
m:换行模式下匹配
var str="1张三2张三3张三1张三2张三3";
var reg1=/张三/g;
匹配到了返回字符数组,保存所有匹配当前的值 否则返回null
var test = str.match(reg1);
匹配到了返回当前值的下标 匹配不到得到 -1
var arr = str.search(reg1);
将正则表达式匹配到的值给替换掉
var str1 = str.replace(reg1,"李四");
将字符串分割为字符串数组
var arr = str.split("");
/......./ 规则的开始和结束
^ 表达式的开始
$ 表达式的结束
\s 匹配空白字符(换行、空格)
\S 匹配非空白字符
\d 匹配一个数字 [0-9]之间
\D 匹配一个非数字
\w 匹配数字字母下划线[A-Za-z0-9_]
\W 匹配除了数字字母下划线[A-Za-z0-9_]
. 匹配除了换行符其他的符号
{n} 匹配几次 规定写几个
{n,} 至少匹配n次 多次(上不封顶)
{n,m} 至少匹配n次,不超过m次 数量在n到m之间
* 至少匹配0次 多次(上不封顶)
+ 至少匹配1次 多次(上不封顶)
? 至少匹配0次 至多1次
[] 可选项
HTML5新验证属性
required 非空验证
placeholder 表单提示性文字
pattern 正则表达式 例如:pattern="\d"
判断验证结果
元素.validity.valueMissing 接收非空验证结果 注意:只能判断设置了required属性
元素.validity.typeMismatch 接收新元素验证结果 只能验证类型:url number email等
元素.validity.patternMismatch 接收正则表达式验证结果 注意:设置了pattern=""属性
元素.validity.tooLong 长度不规范时验证结果 注意:设置了maxlength=""属性
元素.validity.rangeOverflow 不符合最小值验证结果 注意:设置了min=""属性
元素.validity.rangeUnderflow 不符合验最大证结果 设置了max=""属性
设置提示信息
元素.setCustomValidity("提示信息")
元素.setCustomValidity("") 清空信息