表单验证

表单验证

为什么要进行表单验证？

 使用JavaScript可以十分快捷的进行表单验证，他不但能有效地检查用户
  输入的无效和错误数据，还能检查用户遗漏的必选项，从而减轻服务端的压力
  避免服务器短的信息出现错误。

表单验证的思路
 1.首先获取表单元素的值，这些值一般都是字符串，包含数字、下划线等
 2.使用JavaScript中的一些方法对获取的string类型的数据进行判断。
 3.表单form有一个事件onsubmit，他是在提交表单之前调用的，因此可以在
 提交表单之前触发onsubmit事件，然后对获取的事件进行验证。

表单选择器
 他是一种只能作用在表单上的选择器。

 一、1.：input匹配所有input元素
    2.：text选择所有单行文本框
    3.：password选择所有密码框
    4.：radio选择所有单选按钮
    5.：checkbox选择所有复选框
    6.：submit选择所有提交按钮
    7.：image选择所有图像域
    8.：reset选择所有重置按钮
    9.：button匹配所有按钮
    10.：file匹配所有文件域
    11.：hidden匹配所有不可见元素
  二、表单过滤选择器
   1.：enabled匹配所有可用元素
   2.：disabled匹配所有不可用元素
   3.：checked匹配所有被选中元素（单选按钮，复选框，select中的option）
   4.：selected匹配所有选中的option

表单验证事件和方法
 事件： 1.onblur;失去焦点
    2.onfocus：获得焦点
 方法： 1.blur（）失去焦点
    2.focus（）获取焦点

正则表达式

 什么式正则表达式：
  正则表达式是一个描述字符模式的对象，他是有一些特殊的字符组成这些符号和在SQLServer中学过的一样
  其组成的字符模式用来匹配各种表达式。

  RegExp是Regular Expression的缩写，他是对字符串执行模式匹配的强大工具。

  1）定义正则表达式：
   1.普通方法：
    表达式：一个字符串代表了某种规则，其中可以使某些特殊字符定义某种特殊的规则。
    附加参数：用来扩展表达式的含义： 1.g： 全局匹配  （global）
            2.i： 不区分大小写    （ignoreCase）
            3.m： 多行匹配    （multiline）
    语法1：var reg=/表达式/附加参数；
    注：附加参数可以随意匹配例如：
           var reg=/monkey/img；//代表查找monkey这个字符串，并且
                //不区分大小写可以多行匹配且全局匹配
   2..构造函数：
    语法2：var reg=new （"表达式","附加参"）；
    /*普通方法中只能是一个常量字符串，而构造函数中可以是常量字符串也可以是JavaScript中定义的变量*/；
  2）表达式模式：
   1.简单模式：
    简答模式是指通过普通字符的组合来表达的模式：var reg=/monkey/；
   2.符合模式：
    符合模式是指通过含有通配符来组成的表达模式：var reg=/\d[0-9]/；

   RegExp中的方法：
    1.exec（）（检索字符中式正则表达式的匹配，返回找的值，并确定其位置）；
    2.test（） //检索字符串中的值，返回boolean（true或者false）；

   String对象的方法：
    1.match（reg）//找到一个或者多个正则表达式的匹配
    2.search（）//检索正则表达式相匹配的值
    3.repace（reg，str）//替换与正则表达式想匹配的值
    4.split（"分隔符"，n）//把字符串分割成字符数组（n式限制输出数组的个数）
  3）正则表达式的符号
   常用符号：
     1./.../代表一个模式的开始和结束
     2.^ 匹配字符串的开始
     3.$ 匹配字符串的结束
     4.\s 任何空白字符
     5.\S 任何非空白字符
     6.\d 任何一个数字字符
     7.\D 任何一个非数字字符
     8.\w 匹配一个数字、下划线或者字母字符
     9.\W 任何非单字字符
     10. . 除了换行符之外的任意字符

   正则表达式的重复字符：
     1.{n} 匹配前一项n次
     2.{n，}匹配前一项n次或者多次
     3.{n，m}匹配前一项至少n次，单不能超过m次
     4.* 匹配前一项0次或者多次
     5.+匹配前一项1次或者多次
     6.？匹配前一项0次或者1次，也就是说前一项式可选的。

使用HTML5方式验证表单：
 1.HTML5新增的属性：
  placeholder:提供一种提示，输入域为空时显示，获得焦点输入内容是消失
  required:  规定输入域不能为空
  pattern:   规定验证input域的模式（正则表达式）
 2.validity属性
  validity属性可以获取表单的validityState对象；
  语法： var valdityState=document.getElementById（"uName"）.valdity;

  validityState对象：
       1.valueMissing 　　必填项，返回布尔值
       2.typeMismatch　　 判断输入值与表单规定的type的类型是否匹配，返回布尔值
       3.patternMismatch　　 判断输入值是否与pattern规定的正则表达式是非匹配，返回布尔值
       4.toolong 　　判断输入内容是否唱出了表单maxLength特性限定的字符长度，返回布尔值
       5.rangeUnderflow　　 判断是佛小于min特性的值，返回布尔值
       6.rangeOverflow　　 判断输入值是否大于max特性值
       7.stepMismatch　　 判断输入值是否符合step属性规定的特性值，返回布尔值
       8.customError　　 使用自定义的验证错误提示信息。

   ///////////////////////使用setCustomValidity（）方法自定义的错误提示信息：setCustomValidity(monkey)
            //会把错误信息自定义为monkey，此时customError属性为true，
            //setCustomValidity（""）会清空自定义提示信息，此时为false。