第九章表单效验

Myth丶恋晨 2021-12-23 11:25 232阅读 0赞

# 表单效验的重要性： #

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

**表单选择器**

:input：匹配所有input，textarea，select和button元素；

:text：匹配所有单行文本框；

:password：匹配所有密码框；

:radio：匹配所有单项按钮；

:checkbox：匹配所有复选框；

:submit：匹配所有提交按钮；

:image：匹配所有图像域；

:reset：匹配所有重置按钮；

:button：匹配所有按钮；

:file：匹配所有文件域；

:hidden：匹配所有不可见元素，或者type为hidden的元素

![1508365-20190622140920838-1518539387.png][]

**表单属性过滤器**

:enabled：匹配所有可用元素；

:disabled：匹配所有不可用元素；

:checked：匹配所有被选中元素（复选框，单项按钮，select中的option）；

:selected：匹配所欲选中的option元素；

**表单验证事件的方法**

事件：

onblur：失去焦点，当光标离开某个文本框是触发；

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

方法：

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

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

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

![1508365-20190622141041210-1509312571.png][]

![1508365-20190622141102286-896536197.png][]

**正则表达式：**

**定义正则表达式：**

**普通方法：**

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

表达式：一个字符串代表了某种规则，其中可以使用某些特殊字符来代表特殊的规则

附加参数：用来扩展表达式的含义；

参数：

**g：**代表可以进行全局匹配；

**　　i：**代表不区分大小写匹配；

**　m：**代表可以进行多行匹配；

**　实例：**

var reg=/white/;

var reg=/white/g;

**　构造函数：**

var reg=new RegExp("white");

var reg=new RegExp("white","g");

**　说明：**

普通方式中的表达式必须是一个常量字符串，而构造函数中的表达式可以是常量字符串，也可以是一个JavaScript变量。

**　表达式的模式：**

**简答模式：**

简答模式是指通过普通字符的组合来表达模式。

var reg=/china/;

var red=/abc8/;

**复合模式：**

复合模式是指定有通配符来表达的模式

var reg=/^w+$/;

**　RegExp对象：**

**exec()：**检索字符中是正则表达式的匹配，返回找到的值，并确定其位置；

**　test()：**检索字符串中指定的值，返回true过false;

var str="my cat";

var reg=/cat/;

var result=reg.test(str);

**　　String对象的方法：**

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

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

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

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

**　　　　match()方法：**

var str="my cat";

var reg=/cat/;

var result=str.match(reg);

**　replace()方法：**

var str="my little white cat,is really a very lively cat";

var result=str.replace(/cat/,"dog");

var results=str.replace(/cat/g,"dog");

**　split()方法：**

var str="red.blue,green,white";

var result=str.split(",");

var string="";

for(var i=0;i<result.length;i++)\{

string+=result\[i\]+"\\n";

alert(string);

**　　RegExp对象的属性：**

global：RegExp对象是否具有标志g;

ignoreCase：RegExp对象是否具有标志i;

multiline：RegExp对象是否具有标志m;

**正则表达式**

**正则表达式的常用符号：**

![1508365-20190622161102347-868180354.png][]

**　正则表达式的重要字符：**

![1508365-20190622161137031-340072266.png][]

**　正则表达式(),\[\],\{\}的区别：**

()：为了提取匹配的字符串，表达式中有几个()就有几个相应的匹配字符串；

\[\]：定义匹配的字符串；

\{\}：用来匹配长度；

**　实例：**

![1508365-20190622161442222-1223685880.png][]

![1508365-20190622161505726-1038206845.png][]

**使用HTML5的方式验证表单**

**HTML5新增验证属性**

![1508365-20190622162457894-965466651.png][]

**　placeholder：**

![1508365-20190622162557645-194482940.png][]

**required：**

![1508365-20190622162640320-140099608.png][]

**pattern：**

![1508365-20190622162751733-2058918339.png][]

**validity属性：**

![1508365-20190622163211747-1547346618.png][]

![1508365-20190622163343199-1466670925.png][]

![1508365-20190622163422056-183649217.png][]

**　实例：**

![1508365-20190622163520333-55903115.png][]

转载于:https://www.cnblogs.com/tinghao/p/11069444.html

[1508365-20190622140920838-1518539387.png]: /images/20211223/740f6ce1e6904d31a1b164616d2903d3.png
[1508365-20190622141041210-1509312571.png]: /images/20211223/26c22d9e0123471d8bed5f835c0661e0.png
[1508365-20190622141102286-896536197.png]: /images/20211223/ad77a9fc9f7240f98c64d17d046ae8e9.png
[1508365-20190622161102347-868180354.png]: /images/20211223/aeb548a3cee949b7ada193601bf94efb.png
[1508365-20190622161137031-340072266.png]: /images/20211223/27746a7a82974f2884c1473d19894b87.png
[1508365-20190622161442222-1223685880.png]: /images/20211223/222101eb7a8440298fb598bf9df533bb.png
[1508365-20190622161505726-1038206845.png]: /images/20211223/66bcc70111ee4ac1836995c94fc7f513.png
[1508365-20190622162457894-965466651.png]: /images/20211223/5a2ac660cf1443d3b2d241056e7152f2.png
[1508365-20190622162557645-194482940.png]: /images/20211223/b532b0c248844d3c92d2a8a7b44a7f8d.png
[1508365-20190622162640320-140099608.png]: /images/20211223/d4480b5057a04e549db265fdc6bafce3.png
[1508365-20190622162751733-2058918339.png]: /images/20211223/f64a70e2166d416082c9ffc1115f5c6e.png
[1508365-20190622163211747-1547346618.png]: /images/20211223/6b346cc2f75e4813be3f5c00944be35b.png
[1508365-20190622163343199-1466670925.png]: /images/20211223/f7ff33c69c284b80954772c575ecb691.png
[1508365-20190622163422056-183649217.png]: /images/20211223/920aa06cfea34560bf3084400ab6eb33.png
[1508365-20190622163520333-55903115.png]: /images/20211223/105e3f8ea2f145aab28e176562dab471.png