您的位置：首页 > Web前端 > AngularJS

AngularJS 入门4-表单和验证

2017-06-18 13:37 513 查看

AngularJS
入门4-表单和验证

1.AngularJS 表单

①文本输入框

②复选框

checkbox 的值为 true
或 false，可以使用
ng-model 指令绑定

<input type="checkbox" ng-model="myVar">

③单选框

单选框使用同一个 ng-model
，可以有不同的值，但只有被选中的单选按钮的值会被使用。

<form>
选择一个选项:
<input type="radio" ng-model="myVar" value="dogs">Dogs
<input type="radio" ng-model="myVar" value="tuts">Tutorials
<input type="radio" ng-model="myVar" value="cars">Cars
</form>

④下拉菜单

ng-model 属性的值为你在下拉菜单选中的选项：

<form>
选择一个选项:
<select ng-model="myVar">
<option value="">
<option value="dogs">Dogs
<option value="tuts">Tutorials
<option value="cars">Cars
</select>
</form>

2.AngularJS 输入验证

实例：

<!DOCTYPE html>
<html>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<body>
<form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate>
<p>用户名:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">用户名是必须的。</span>
</span>
</p>

<p>邮箱:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">邮箱是必须的。</span>
<span ng-show="myForm.email.$error.email">非法的邮箱。</span>
</span>
</p>

<p>
<input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid || myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>

<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.user = 'John Doe';
$scope.email = 'john.doe@gmail.com';
});
</script>
</body>
</html>

①构建一个ng表单

1.确保form上标签有一个name属性，像下面的例子一样。最好再加一个novalidate=”novalidate”

2.form中不能有action属性。提交交由ng-submit处理

3.每个input一定要有ng-model，最好有一个name方便引用。然后用require或者ng-minlength之类才起作用

<form name="form" novalidate="novalidate">
<label name="email">Your email</label>
<input type="email" name="email" ng-model="email" placeholder="Email Address" />
</form>
注：novalidate屏蔽浏览器对表单的默认验证行为，它将会阻止默认的HTML5验证，因为这会由我们自己来做。

②增添验证规则

必填项验证	验证表单输入是否已填写，添加HTML5标记required即可 <input type="text" required />
最小长度	验证表单输入的文本长度是否大于某个最小值，添加指令ng-minleng= "{number}" <input type="text" ng-minlength="5" />
最大长度	验证表单输入的文本长度是否小于或等于某个最大值，添加指令ng-maxlength="{number}"： <input type="text" ng-maxlength="20" />
模式匹配	使用ng-pattern="/PATTERN/"来确保输入能够匹配指定的正则表达式： <input type="text" ng-pattern="/[a-zA-Z]/" />
电子邮件	验证输入内容是否是电子邮件，只要像下面这样将input的类型设置为email即可： <input type="email" name="email" ng-model="user.email" />
数字	验证输入内容是否是数字，将input的类型设置为number： <input type="number" name="age" ng-model="user.age" />
URL < 4000 /td>	验证输入内容是否是URL，将input的类型设置为 url： <input type="url" name="homepage" ng-model="user.facebook_url" />

注：用了type=”email”之类就不能用ng-minlength ng-pattern之类了，而且email验证的时候github上有人提出了其他问题，https://github.com/angular/angular.js/issues/5899，看来对于type=”email”和
url之类要使用的时候多注意，我的建议是尽量不用。如果需要请写自定义验证。下面我会介绍，确实是有够蛋疼之处。由于这种问题，所以我写的表单不会出现type=”email”
type=”url”
type=”number”之类。

③表单属性 $valid, $invalid, $pristine, $dirty，$error

属性类	应用的CSS类	描述
$valid	ng-valid	Boolean 告诉我们这一项当前基于你设定的规则是否验证通过
$invalid	ng-invalid	Boolean 告诉我们这一项当前基于你设定的规则是否验证未通过
$pristine	ng-pristine	Boolean 如果表单或者输入框没有使用则为True
$dirty	ng-dirty	Boolean 如果表单或者输入框有使用到则为True

访问表单属性

访问表单属性: <form name>.<angular property>

访问一个输入框属性: <form name>.<input name>.<angular property>

范例：

<form name="userForm" novalidate>
<input type="text" name="username" class="form-control" ng-model="username" ng-minlength="3" ng-maxlength="8">
<p ng-show="userForm.username.$valid" class="help-block">验证已通过</p>
<p ng-show="userForm.username.$invalid" class="help-block">验证未通过</p>
<p ng-show="userForm.username.$pristine" class="help-block">未修改过</p>
<p ng-show="userForm.username.$dirty" class="help-block">已修改过</p>
</form>

错误消息$error

1 普通用法

<form name="userForm" novalidate>
<input type="text" name="username" class="form-control" ng-model="username" ng-minlength="3" ng-maxlength="8">
<p ng-show="userForm.username.$error" class="help-block">用户名出错</p>
</form>
2 $error的具体类型

注：对于ng-minlength，ng-maxlength，ng-pattern的写法userForm.username.$error.minlength

<form name="userForm" novalidate>
<input type="text" name="username" class="form-control" ng-model="username" ng-minlength="3" ng-maxlength="8">
<p ng-show="userForm.username.$error.required" class="help-block">用户名是必须的</p>
<p ng-show="userForm.username.$error.minlength" class="help-block">用户名太短</p>
<p ng-show="userForm.username.$error.maxlength" class="help-block">用户名太长</p>
</form>

④设置样式

AngularJS根据表单属性状态自动添加和删除CSS类，例如当某个字段中的输入非法时，.ng-invlid类会被添加到这个字段上。你可以编辑自己喜欢的CSS
. 你可以私有定制化这些类来实现特定的场景应用.

input.ng-invalid {
border: 1px solid red;
}
input.ng-valid {
border: 1px solid green;
}

输入状态	应用的CSS类
$invalid	ng-invalid
$valid	ng-valid
$pristine	ng-pristine
$dirty	ng-dirty
required	ng-valid-required或ng-invalid-required
min	ng-valid-min或ng-invalid-min
max	ng-valid-max或ng-invalid-max
pattern	ng-valid-pattern或ng-invalid-pattern
url	ng-valid-url或ng-invalid-url
email	ng-valid-email或ng-invalid-email
date	ng-valid-date或ng-invalid-date
number	ng-valid-number or ng-invalid-number

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航