1.背景介绍

JavaScript 可在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。以减轻后台数据传送压力，提高数据传送的质量和效率。

2.知识剖析

常见的表单验证内容

1.是否填写

2.长度限制

3.数据类型是否正确

3.常见问题

1.有哪些方法可以写表单验证?

2.不同的方法分别是什么写法?

4.解决方案

主要介绍三大类写法，分别是：js原生写法、各类表单插件的写法、angular js的表单验证写法。

1.js原生写法

js原生写法主要用到if语句，配合正则表达式。代码量大，验证步骤复杂。

2.Bootstrap-Validator插件写法

首先需下载插件库：Validator

调用插件后，就可以直接使用相应指令进行表单验证，如：message、fields、feedbackIcons

3.angularJs ng-show写法

利用ng-show指令，规定满足某些情况时，出现展示信息；用该指令内的$dirty、$valid 、$invalid 、$pristine属性来确定具体的情况

4.angularjs ng-message（angular表单验证插件）

需引用angular-messages.js文件，然后就可以直接用ng-messages. ng-message. 指令进行直接验证和显示。

这种方法是代码量最少，验证步骤最直观的，但前提是你所写的页面需要用到angular框架。

5.代码实战

1.js原生写法

2.Bootstrap-Validator插件写法

3.angularJs ng-show写法

4.angularjs ng-message（angular表单验证插件）

6.拓展思考

正则表达式怎么用？怎么写？

7.参考文献

参考一：JavaScript的表单验证

参考二：Bootstrap-Validator

参考三：AngularJS 的表单验证

8.更多讨论