一、学习目的
掌握String对象的用法
会使用表单选择器选择页面元素
会使用正则表达式验证页面输入内容
会使用HTML5的方式验证表单内容
表单校验的目的:减轻服务器的压力、保证输入的数据符合要求。
二、表单选择器
常用的表单验证:日期格式、表单元素是否为空、用户名和密码、e-mail地址、身份证号码。
表单验证的思路:获取表单元素值,然后进行一系列的验证,表单提交时,对获取数据进行验证。
:input:匹配所有input、textarea、select和button 元素。
:text:匹配所有单行文本框,选取email和姓名两个input元素。
:password:匹配所有密码框。
:radio:匹配所有单项按钮。
:checkbox:匹配所有复选框。
:submit:匹配所有提交按钮。
:image:匹配所有图像域。
:reset:匹配所有重置按钮。
:button:匹配所有按钮。
:file:匹配所有文件域。
:hidden:匹配所有不可见元素,或者type 为hidden的元素。
属性过滤选择器:
:enabled:匹配所有可用元素,匹配内部除编号输入框外的所有元素。
:disabled:匹配所有不可用元素,匹配编号输入框。
:checked:匹配所有被选中元素(复选框、单项按钮、select 中的option)。
:selected:匹配所有选中的option 元素。
三、字符串验证
非空验证:if(mail == ""){函数体 return false;}
字符串查找:indexOf():查找某个指定的字符串值在字符串中首次出现的位置(若有则返回位置的数字,若没有则返回-1)。
长度验证:if(pwd.length<6){函数体 return false;}
判断字符串是否有数字:使用for循环和substring()方法依次截断单个字符,再判断每个字符是否是数字。
substring():返回位于 String 对象中的指定位置的子字符串。
for (var i = 0; i < user.length; i++) {
var j = user.substring(i, i + 1);
if (isNaN(j) == false) {
alert("姓名中不能包含数字");
return false;
}
}
四、表单验证事件和方法
事件:
onblur:失去焦点,当光标离开某个文本框时触发。
onfocus:获得焦点,当光标进入某个文本框时触发。
方法:
blur():从文本域中移开焦点。
focus():在文本域中设置焦点,即获得鼠标光标。
select():选取文本域中的内容,突出显示输入区域的内容。
五、正则表达式(简洁的代码、严谨的验证文本框中的内容)
/…/:代表一个模式的开始和结束。
^:匹配字符串的开始。
$:匹配字符串的结束。
\s:任何空白字符。
\S:任何非空白字符。
\d:匹配一个数字字符,等价于[0-9]。
\D:除了数字之外的任何字符,等价于[^0-9]。
\w:匹配一个数字、下划线或字母字符,等价于[A-Za-z0-9_]。
\W:任何非单字字符,等价于[^a-zA-z0-9_]。
.:除了换行符之外的任意字符。
{n}:匹配前一项n次。
{n,}:匹配前一项n次,或者多次。
{n,m}:匹配前一项至少n次,但是不能超过m次。
*:匹配前一项0次或多次,等价于{0,}。
+:匹配前一项1次或多次,等价于{1,}。
?:匹配前一项0次或1次,也就是说前一项是可选的,等价于{0,1}。
html5新增的属性(一般是在表单中直接使用 ):
placeholder:提供一种提示(hint),输入域为空时显示,获得焦点输入内容后消失。
required:规定输入域不能为空。
pattern:规定验证input域的模式(正则表达式)。
六、总结
这章的内容其实跟之前的表单验证是有关系的,只是jQuery是封装的JavaScript,这样的话可以更加高效的实现表单的验证。学到这里,之前的css其实会发现会有部分的遗忘,所以还是要回去多记忆记忆,基础不牢,地动山摇。