JS表单效验

152 阅读3分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 2 月更文挑战」的第 4 天,点击查看活动详情

`什么需要表单验证?

 

  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("")  清空信息