表单的校验

一、学习目的

掌握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其实会发现会有部分的遗忘，所以还是要回去多记忆记忆，基础不牢，地动山摇。