表单校验的方法

表单校验

       Why：减轻服务器压力   保证输入的数据符合要求

常用表单验证

  日期格式

  表单元素是否为空

  用户名和密码

1. mail地址

身份证号码

验证思路：

当数据不符合要求怎么编写脚本 :

1. 获得表单元素值2.使用JavaScript的一些方法对数据进行判断3.当表单提交时，触发事件，对获取的数据进行验证

 

表单选择器：

     :input 匹配所有input textarea select button元素 $(“#myform :input”)选取表单中所有的input，select和button元素

:text 匹配所有单行文本框  $(“#myform :text”)选取email和姓名两个input元素

:password  匹配所有密码框  $(“#myform :password”)选取所有type=“password”元素

:radio 匹配所有单选按钮 $(“#myform : radio”)选取type=“radio”元素

:checkbox 匹配所有复选框                           CheckBox

:submit  匹配所有提交按钮                           submit

：image         图像域                              image

：reset          重置按钮                           reset

：button        按钮                    选取button元素

：file            文件域                              file

：hidden         不可见元素，或者type为hidden的元素 $() 选取<input type=”hidden”/> 或者style=“display none”等元素

属性过滤选择器

   :enable  匹配所有可用元素   $(#userform :enabled)匹配form内部除编号输入框外的所有元素

   :disabled 匹配所有不可用元素  $(#userform :disabled)匹配编号输入框

   :checked 匹配所有被选中元素(复选框，单选按钮，select中的option) $(#userform :checked)匹配“性别”中的“男”选项和爱好中的编程选项

   :selected 匹配所有选中的option元素 $(#userform :selected)匹配“家乡”中的“北京”选项

使用string对象验证邮箱

      不能为空，格式正确

文本框验证：

      密码不能为空，不少于6个字符，姓名不能为空，不能有数字

文本框内容的验证

校验提示特效

  表单验证需要综合运用元素的事件和方法

     事件：  onblur  失去焦点，当光标离开某个文本框时触发

             Onfocus 获得焦点，当光标进入某个文本框时触发

     方法：blur()  从文本域中移开焦点

           Focus() 从文本域中设置焦点，即获得鼠标光标

           Select() 选取文本域中的内容，突出显示输入区域的内容

文本输入提示特效：

     

 

正则表达式

   为什么使用：

       简洁的代码  严谨的验证文本框中的内容

定义正则表达式

   普通方式 var reg=/表达式/附加参数

      Var reg=/white/

       Var reg=/white/g

 参数g代表可以全局匹配

      I代表不区分大小写

      M 表示可以进行多行匹配

构造函数 var reg=new RegExp（“表达式”，“附加参数”）

      Var reg=new RegExp(“white”)

      Var reg=new RegExp(“white”,”g”)

表达式模式

只能表示具体的匹配

  Var reg=/china/

   Var reg=/abc8/

复合模式

可以使用通配符表达更为抽象的规则模式

   Var reg=/^\w+$/

   Var reg=/^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$/

 

 ^表示已XX开头

 $表示已XX结尾

 \w代表英文字符，数字，下划线

 +代表一次或多次

RegExp对象的方法

   Exec 检索字符中是正则表达式的匹配，返回找到的值，并确定其位置

   Test 检索字符串中指定的值，返回true或false

 

RegExp对象的属性

Global  RegExp对象是否具有标志g

ignoreCase                      i

Multiline                        m

 

String对象的方法

    Match 找到一个或多个正则表达式的匹配

    Search 检索与正字表达式相匹配的值

    Replace 替换与正则表达式匹配的字符串

    Split   把字符串分割为字符串数组

 

正则表达式的符号

   /.../ 代表一个模式的开始和结束

   ^ 匹配字符串的开始

   $  匹配字符串的结束

   \s  任何空白字符

   \S  任何非空白字符

   \d  匹配一个数字字符，等价于[0-9]

  \D   除了数字之外的任何字符，等价于[^0-9]

  \w   匹配一个数字、下划线或字母字符，等价于[A-Z a-z 0-9 ]

  \W   任何非单字字符，等价于[^a-zA-Z0-9]

  .     除了换行之外的任意字符

 

{n}匹配前一项n次

   {n,}匹配前一项n次，或者多次

   {n,m}匹配前一项n次但是不能超过m次

   *   匹配前一项0次或多次，等价于{0,}

   +              1                 1     

   ?               0    1     也就是说前一项是可选的，等价于{0,1}

 

 

对年龄进行验证，年龄必须在0-120之间

   10-99这个范围都是两位数，正则表达式为[1-9]\d

   0-9  这个范围是一位数，正则表达式为\d

   100-119这个范围是三位数，正则表达式为1[0-1]\d

  所有年龄的个位都是[0-9],当百位是1，十位是0-1，正则表达式为(1[0-9]|[1-9])?\d

年龄120是单独的一种情况，需要单独列出来

 

使用HTML5方式验证表单

   HTML5新增属性

       Placeholder  提供一种提示(hint),输入域为空时显示，获得焦点输入内容后消失

       Require   规定输入域不能为空

       Pattern    规定验证input域的模式(正则表达式)

 

    Validity state属性

        valueMissing  表单元素设置了require特性，则为必填。如果必填项的值为空，就无法通过表单验证，valueMissing属性会返回true，否则返回false

        typeMismatch   输入值与type类型不匹配，HTML5新增的表单类型如：email、number、URL等都包含一个原始的类型验证。如果用户输入的内容与表单类型不符合，则typeMismatch属性将返回true，否则返回false

        patternMismatch  输入值与pattern特性的正则表达式不匹配，如果输入的内容不符合pattern验证模式的规则，则patternMismatch属性将返回true否则返回false

        tooLong          输入的内容超过了表单元素的maxLength特性限定的字符长度。虽然在输入的时候会限制表单内容的长度，但在某种情况下，如通过程序设置，还是会超出最大长度限制如果输入的内容超过了最大长度限制，则tooLong属性返回true否则返回false

        rangeUnderflow  输入的值小于min特性的值，如果输入的数值小于最小值，则rangeUnderflow属性返回true否则返回false

      rangeOverflow  输入的值大于max特性的值，如果输入的数值大于最大值，则rangeOverflow属性返回true否则返回false

 

       stepMismatch 输入的值不符合step特性所推算的规则，用于填写数值的表单元素可能需要同时设置min max 和step特性，这就限制了输入的值必须是最小值与step特性值的倍数之和，例如从0到10，step特性值为2，因为合法值为该范围内的偶数，其他数值均无法通过验证，如果输入值不符合要求，则stepMismatch属性值返回true否则返回false

       customError  使用自定义的验证错误提示信息，使用setCustomValidity（）方法自定义错误提示信息;setCustomValidity（message）会把错误提示信息自定义为message，此时customError属性值为true：setCustomValidity（“”）会清除自定义的错误信息，此时customError属性值为false