1、module中引入ngMessages
2、页面代码
<form name="createVolumeForm" novalidate>
<div class="control-group" >
<label class="control-label">名称:</label>
<div class="controls">
<input type="text" class="form-controls" name="name" ng-model="volumeForm.name" placeholder="请输入云硬盘名称" ng-pattern="/^[a-zA-Z0-9_]{1,100}$/" required />
<div class="error-messages" ng-if="interacted(createVolumeForm.name)" ng-messages="createVolumeForm.name.$error" style="color: #e9322d;">
<div ng-message="required" class="volume-form-name-error">必填项</div>
<div ng-message="pattern" class="volume-form-name-error">请输入字符,允许有英文字母、数字和下划线</div>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">配置:</label>
<div class="controls">
<input type="text" class="form-controls" name="size" ng-model="volumeForm.size" placeholder="请输入云硬盘大小" ng-pattern="/^[0-9]$/" required />
</div>
<div class="error-messages" ng-if="interacted(createVolumeForm.size)" ng-messages="createVolumeForm.size.$error" style="color: #e9322d;">
<div ng-message="required" class="volume-form-size-error">必填项</div>
<div ng-message="pattern" class="volume-form-size-error">请输入大于或等于零的数字</div>
</div>
</div>
<div class="control-group">
<label class="control-label">描述信息:</label>
<div class="controls">
<textarea type="text" class="form-controls volume-text " name="description" style="height:50px;" ng-model="volumeForm.description" placeholder="请输入描述信息" />
</div>
</div>
</form>
注意,form和input元素要有name属性
3.controller
$scope.submitted=false;
$scope.interacted=function(field){
return self.submitted||field.$dirty;
}
分享到:
相关推荐
在AngularJS中,表单验证是一项关键功能,它允许开发者实时检查用户输入的数据,确保其符合预期的格式和规则,从而提高用户体验并减少服务器端的压力。AngularJS的表单验证机制是基于模型驱动的,这使得它在处理复杂...
AngularJS是前端开发流行框架,本Demo展示了表单验证的意义,及实现方法,掌握Angular基础指令,通过不同的指令元素可以拥有不同功能,并通过指令与表单合作验证,从而实现表单验证的敏捷化开发。
AngularJS表单验证可以让你从一开始就写出一个具有交互性和可相应的现代HTML5表单。在AngularJS中,有许多表单验证指令。在这里,我们将谈谈几个最流行指令,然后我们将讨论如何编写自定义的验证。
首先,了解AngularJS表单验证的基础是理解ngFormController和ngModelController的作用。在AngularJS中,每个表单元素都会关联到一个ngFormController实例,而每个输入元素(例如input, select, textarea等)都会关联...
自定义验证功能也是AngularJS表单验证中一个很重要的部分。虽然文章没有给出自定义验证的代码示例,但自定义验证通常包括创建一个自定义指令,然后在这个指令中注入表单控制器(`formController`)或者控件控制器(`...
**AngularJS 表单验证详解** AngularJS 是一个强大的前端JavaScript框架,主要用于构建动态Web应用。在AngularJS中,表单验证是一个至关重要的部分,它能够帮助开发者在用户提交数据之前进行实时验证,提高用户体验...
本文将深入探讨AngularJS表单验证的实例和常见验证指令。 1. **必填项验证**:通过在HTML5的输入字段上添加`required`属性,可以检查用户是否填写了该字段。例如: ```html ``` 如果用户未填写此字段,表单将...
提供的压缩包文件可能包含一个Eclipse工程,方便开发者在IDE中编辑和运行代码,同时也可以直接在浏览器中查看运行结果,这对于学习和调试AngularJS表单验证功能非常有用。 通过学习和实践这些知识点,你将能够熟练...
AngularJS表单验证 演示版 #目录 要求 jQuery的 AngularJS 浏览器支持 Chrome合金 火狐浏览器 快速配置 bower install sanji-validator 这会将bower_components -validator文件及其依赖项复制到bower_...
AngularJS中的表单验证是前端开发中的一项核心功能,它确保了用户输入的数据准确性和安全性。在AngularJS框架中,表单验证功能不仅包含了HTML5的原生表单验证属性,而且还提供了一系列自定义的验证指令,以满足复杂...
在本篇文章中,我们主要探讨了如何在AngularJS框架中对一个表单中的手机号输入进行验证,并且这个手机...通过学习和实践这些知识点,开发者可以更好地掌握AngularJS表单验证的技巧,并能够将其应用到实际开发项目中去。
当涉及到使用Ionic框架和AngularJS技术栈时,模板验证成为了实现表单验证的一种便捷方式。模板验证指的是直接在HTML模板中使用AngularJS内置的属性和指令来对用户输入进行验证。 在AngularJS中,模板验证主要依赖于...
AngularJS表单可以使用HTML原生的表单和控件,比如`<input>`、`<select>`、`<button>`和`<textarea>`等元素。AngularJS通过`ng-app`指令指定应用的范围,`ng-controller`用于指定视图对应的控制器,而`ng-model`则...
使用angularJS完成表单验证功能
开始学习AngularJS表单验证: 常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: 复制代码 代码如下:<<input type=”text” required /> 2....
angularjs 表单验证指令。 应用程序包含下一个验证指令: “货币” - “12.34”格式 “时间”-“12:34”格式 “整数” - 只有数字 "password = '{{length}}'" - 数字、大小写字母、长度 基于引导程序 3. 运行 $ ...