AngularJs表单验证实例详解表单验证实例详解
主要介绍了用AngularJs验证表单实例详解的相关资料,需要的朋友可以参考下
常用的表单验证指令常用的表单验证指令
1. 必填项验证必填项验证
某个表单输入是否已填写，只要在输入字段元素上添加HTML5标记required即可：
复制代码 代码如下:
<input type="text" required />
2. 最小长度最小长度
验证表单输入的文本长度是否大于某个最小值，在输入字段上使用指令ng-minleng= "{number}"：
复制代码 代码如下:
<input type="text" ng-minlength="5" />
3. 最大长度最大长度
验证表单输入的文本长度是否小于或等于某个最大值，在输入字段上使用指令ng-maxlength="{number}"：
复制代码 代码如下:
<input type="text" ng-maxlength="20" />
4. 模式匹配模式匹配
使用ng-pattern="/PATTERN/"来确保输入能够匹配指定的正则表达式：
复制代码 代码如下:
<input type="text" ng-pattern="/[a-zA-Z]/" />
5. 电子邮件电子邮件
验证输入内容是否是电子邮件，只要像下面这样将input的类型设置为email即可：
复制代码 代码如下:
<input type="email" name="email" ng-model="user.email" />
6. 数字数字
验证输入内容是否是数字，将input的类型设置为number：
复制代码 代码如下:
<input type="number" name="age" ng-model="user.age" />
7. URL
验证输入内容是否是URL，将input的类型设置为 url：
复制代码 代码如下:
<input type="url" name="homepage" ng-model="user.facebook_url" />
下面我们将这些表单验证放到具体的实现中来测试一下：下面我们将这些表单验证放到具体的实现中来测试一下：
<div class="col-md-6">
<form role="form" class="form-horizontal">
<div class="form-group">
<div class="col-md-4">
<label for="name">1.必填项</label>
</div>
<div class="col-md-8">
<input class="form-control" id="name" type="text" required ng-model='user.name' />
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<label for="minlength">2.最小长度=5</label>
</div>
<div class="col-md-8">
<input type="text" id="minlength" ng-minlength="5" ng-model="user.minlength" class="form-control" />
</div>
</div>
<div class="form-group">
<div class="col-md-4">
资源评论
