JS表单效验

Posted 2022-12-30

什么需要表单验证？

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