表单校验及正则表达式

Posted 2020-12-16 cherry-balls

1.常用的表单选择器

　　input:匹配所有input、textarea、select和button元素

　　text：匹配所有单行文本框

　　password：匹配所有密码框

　　radio：匹配所有单项按钮

　　checkbox:匹配所有复选框

　　submit：匹配所有提交按钮

　　image：匹配所有图像域

　　reset：匹配所有重置按钮

　　button：匹配所有按钮

　　file：匹配所有文件域

　　hidden：匹配所有不可见元素

2.属性过滤选择器

　　enabled：匹配所有可用元素

　　disabled：匹配所有不可用元素

　　checked：匹配所有被选中元素

　　select：匹配所有选中的option元素

 3.验证表单内容

　　使用String对象验证邮箱

　　不能为空

　　格式正确

　　本框内容的验证

　　密码不能为空

　　不少于6个字符

　　姓名不能为空

　　不能有数字

 4.使用string对象验证邮箱

　　非空验证

　　　　if (mail == "") {          email是否为空

　　　　　　alert("Email不能为空");

　　　　　　return false;

　　　　}

　　字符创查找

　　　　indexOf()：查找某个指定的字符串值在字符串中首次出现的位置

　　　　var str="this is javascript";

　　　　var selectFirst=str.indexOf("Java");              返回8，从0开始

　　　　var selectSecond=str.indexOf("Java",12)；

5.文本框内容的验证

　　length属性可以获取字符串长度

　　substring()方法依次截取单个字符

　　isNaN()判断每个字符是否是数字

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

　　事件：onblur  失去焦点

          　　onfoces 获得焦点

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

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

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

7.为什么需要正则表达式？

　　简洁的代码

　　严谨的验证文本框中的内容

　　生产环境中更为常用的方式

8.定义正则表达式

 　　普通方法

　　　　var reg=/表达式/附加参数

　　构造函数

　　　　var reg=new RegExp("表达式","附加参数");

9.表达式的模式

　　简单模式

  　　　　只能表示具体的匹配

　　复合模式

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

　　RegExp对象的方法

　　　　exec()      检索字符中是正则表达式的区配  

　　　　test ()      检索字符串中指定的值

　　RegExp对象的属性

　　　　global       RegExp对象是否具有标志g，表示全局匹配

　　　　ignoreCase    RegExp对象是否具有标志i，表示不区分大小写

　　　　multiline   RegExp对象是否具有标志m，表示多行匹配

　　　　string对象的方法

　　　　match()      找到一个或多个正则表达式的匹配

　　　　search()      检索与正则表达式相匹配的值

　　　　replace()      替换与正则表达式匹配的字符串

　　　　split()     把字符串分割为字符串数组

　　使用html5的方式验证表单

10.HTML5新增属性

　　placeholder

　　required

　　validity属性

　　stepMismatch

　　customError

11.HTML5新增验证属性

　　placebholder    提示功能

　　require   规定输入域不能为空

　　pattern   规定验证input域的模式（正则表达式）