`

angularJS表单验证

阅读更多
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的表单验证机制是基于模型驱动的,这使得它在处理复杂...

    angularjs表单验证Demo

    AngularJS是前端开发流行框架,本Demo展示了表单验证的意义,及实现方法,掌握Angular基础指令,通过不同的指令元素可以拥有不同功能,并通过指令与表单合作验证,从而实现表单验证的敏捷化开发。

    AngularJS实现表单验证

    AngularJS表单验证可以让你从一开始就写出一个具有交互性和可相应的现代HTML5表单。在AngularJS中,有许多表单验证指令。在这里,我们将谈谈几个最流行指令,然后我们将讨论如何编写自定义的验证。

    AngularJS表单验证功能分析

    首先,了解AngularJS表单验证的基础是理解ngFormController和ngModelController的作用。在AngularJS中,每个表单元素都会关联到一个ngFormController实例,而每个输入元素(例如input, select, textarea等)都会关联...

    AngularJS表单验证中级篇(3)

    自定义验证功能也是AngularJS表单验证中一个很重要的部分。虽然文章没有给出自定义验证的代码示例,但自定义验证通常包括创建一个自定义指令,然后在这个指令中注入表单控制器(`formController`)或者控件控制器(`...

    AngularJs demo 例子(表单验证) form

    **AngularJS 表单验证详解** AngularJS 是一个强大的前端JavaScript框架,主要用于构建动态Web应用。在AngularJS中,表单验证是一个至关重要的部分,它能够帮助开发者在用户提交数据之前进行实时验证,提高用户体验...

    AngularJs表单验证实例详解

    本文将深入探讨AngularJS表单验证的实例和常见验证指令。 1. **必填项验证**:通过在HTML5的输入字段上添加`required`属性,可以检查用户是否填写了该字段。例如: ```html ``` 如果用户未填写此字段,表单将...

    AngularJS 学习笔记(表单验证篇)

    提供的压缩包文件可能包含一个Eclipse工程,方便开发者在IDE中编辑和运行代码,同时也可以直接在浏览器中查看运行结果,这对于学习和调试AngularJS表单验证功能非常有用。 通过学习和实践这些知识点,你将能够熟练...

    sanji-validator:AngularJS表单验证

    AngularJS表单验证 演示版 #目录 要求 jQuery的 AngularJS 浏览器支持 Chrome合金 火狐浏览器 快速配置 bower install sanji-validator 这会将bower_components -validator文件及其依赖项复制到bower_...

    AngularJS表单验证功能

    AngularJS中的表单验证是前端开发中的一项核心功能,它确保了用户输入的数据准确性和安全性。在AngularJS框架中,表单验证功能不仅包含了HTML5的原生表单验证属性,而且还提供了一系列自定义的验证指令,以满足复杂...

    AngularJS 表单验证手机号的实例(非必填)

    在本篇文章中,我们主要探讨了如何在AngularJS框架中对一个表单中的手机号输入进行验证,并且这个手机...通过学习和实践这些知识点,开发者可以更好地掌握AngularJS表单验证的技巧,并能够将其应用到实际开发项目中去。

    ionic使用angularjs表单验证(模板验证)

    当涉及到使用Ionic框架和AngularJS技术栈时,模板验证成为了实现表单验证的一种便捷方式。模板验证指的是直接在HTML模板中使用AngularJS内置的属性和指令来对用户输入进行验证。 在AngularJS中,模板验证主要依赖于...

    AngularJS表单和输入验证实例

    AngularJS表单可以使用HTML原生的表单和控件,比如`&lt;input&gt;`、`&lt;select&gt;`、`&lt;button&gt;`和`&lt;textarea&gt;`等元素。AngularJS通过`ng-app`指令指定应用的范围,`ng-controller`用于指定视图对应的控制器,而`ng-model`则...

    使用angularJS完成表单验证

    使用angularJS完成表单验证功能

    详解AngularJS实现表单验证

    开始学习AngularJS表单验证: 常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: 复制代码 代码如下:&lt;&lt;input type=”text” required /&gt;  2....

    pdx-validation:angularjs 表单验证指令

    angularjs 表单验证指令。 应用程序包含下一个验证指令: “货币” - “12.34”格式 “时间”-“12:34”格式 “整数” - 只有数字 "password = '{{length}}'" - 数字、大小写字母、长度 基于引导程序 3. 运行 $ ...

Global site tag (gtag.js) - Google Analytics