继上篇文章中我们了解了什么是AngularJS以及有关他的历史，今天源码时代H5的老师就再来谈谈AngularJS的表单验证及其用法。

一提到表单验证，大家肯定第一想到了正则表达式，以及JQ里的validate。没错，绝大部分时候都不需要我们自己去一条一条地写正则表达式来依依匹配我们的验证算法，而我们用得比较多的就是我们的validate。但也有那么一些时候，迫于性能的考虑，我们不得不放弃使用JQ（比如手机端），那这个时候我们的表单验证怎么处理呢，难道真要我们亲自操刀，一个一个的原生正则表达式写起吗？答案是不用的，我们还有很多可选的备用方案，比如我们万能的AngularJS。好吧，下面开始进入正题。首先准备表单如下。

此时点击注册，页面将刷新并提交，即并没有验证。以下为效果图。

接下来我们在现有基础上引入AngularJS，以便为后续验证做准备。

申明根元素：

创建主控制器：

建立关联：

接下来我们要阻止浏览器默认的验证（浏览器的这个默认功能真的是鸡肋）

准备工作都做好了，开始验证。

一、用户名

分别建立各个输入框的数据模型（如用户名输入框）

a）必填项标记“*”

显示逻辑为，没有填入内容时显示“*”，当获取焦点，输入值时“*”消失。

实现方式：可以通过 formName.inputFieldName.property 来访问表单字段的验证状态比如formName.inputFieldName.$error.Object类型，存储表单字段验证项的通过与否，用在这里我们可以采用myForm.userName.$error.required，这个Boolean类型表示表单字段是否填写内容即是否为空，如果为空则显示后面的内容，命令语句为：

那么我们用同样的方法来完成剩下的逻辑。

b)设计用户名的验证逻辑（4~20位）。此处用到AngularJS的ng-minlength和ng-maxlength指令。

接下来考虑出错提示：

结合长短限制，设置对应的提示信息。

到此我们就完成了用户名输入的验证。依葫芦画瓢，接下来完成手机号、邮箱、密码、确认密码这几项的输入验证。

用户名验证效果图：

二、手机号

同样创建手机号的数据模型如下：

和用户名验证一样，我们仍然需要是否为空验证：

对于手机号的验证，我们需要引入对应的正则表达式 “/^1[3|4|5|7|8]\d{9}$/”如下，并设置相对应的错误提示。

手机号验证效果图：

三、邮箱验证

邮箱验证与用户名验证大同小异，只需要用myForm.email.$error.email语句来判定输入是否为合法邮箱名就可以了，如下图：

四、密码验证

密码验证比较简单，只需要确定输入的最少位数即可，但此处有一点需要格外注意，因为接下来要对输入密码进行再次输入确认，故需要把次输入框和确认密码框绑定，故此处需要对密码输入框设置唯一ID号（此处id为pwd）。

五、确认密码

如上所说，我们需要将此输入框和上一个输入框绑定在一起以便对输入内容进行异同匹配。这里需要用到 compare-pwd="pwd" ，其中属性里的pwd 即为上面密码框里的id值。另外，其与上面密码输入框的比较用到 user.password != pwd2 ， 如图：

至此，我们的验证已经完成。

效果图如下：

是不是觉得再也不用长篇大论地自己手写正则表达式了，也不用在绕来绕去地写复杂的验证判断逻辑关系了。AngularJS的表单验证就是这样简单，要不要动手自己试一试呢！

附源码如下：

感谢源码时代H5学科讲师提供此文章！

本文为原创文章，转载请注明出处（）！