您的位置：名动网 > angularjs表单验证 AngularJS 输入验证

angularjs表单验证 AngularJS 输入验证

2023-04-18 03:20 AngularJS教程

angularjs表单验证

AngularJS 输入验证

AngularJS 表单和控件提供了验证功能，对与用户的输入进行判断，以辨别输入是否合法，如果不合法则进行警告。

AngularJS 表单和控件可以验证输入的数据。

输入验证

在前面的几个章节中，你已经学到关于 AngularJS 表单和控件的知识。

AngularJS 表单和控件可以提供验证功能，并对用户输入的非法数据进行警告。

	客户端的验证不能确保用户输入数据的安全，所以服务端的数据验证也是必须的。

应用代码

<!DOCTYPE html>
<html>

<body>
<h2>Validation Example</h2>

<form ng-app="" ng-controller="validateCtrl"
name="myForm" novalidate>

<p>Username:<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">Username is required.</span>
</span>
</p>

<p>Email:<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">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>

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

</form>

<script src="//apps.bdimg.com/libs/angular.js/1.2.15/angular.min.js" rel="external nofollow" ></script>
<script>
function validateCtrl($scope) {
$scope.user = "John Doe";
$scope.email = "john.doe@gmail.com";
}
</script>

</body>
</html>

	HTML 表单属性 novalidate 用于禁用浏览器默认的验证。

实例解析

AngularJS ng-model 指令用于绑定输入元素到模型中。

模型对象有两个属性： user 和 email。

我们使用了 ng-show指令， color:red 在邮件是 $dirty 或 $invalid 才显示。

文章详情

angularjs表单验证 AngularJS 输入验证

angularjs表单验证 AngularJS 输入验证

angularjs表单验证

AngularJS 输入验证

输入验证

应用代码

实例解析

相关阅读

vuecli部署nginx Vue CLI 部署

vue 介绍 Vue CLI 介绍

vue过渡效果在哪设置 Vue.js 2.0 过渡效果

vue.js安装教程 Vue.js 2.0 安装

nodejsurl模块 Node.js URL