`
风中亮出年轻的旗
  • 浏览: 4295 次
  • 性别: Icon_minigender_2
社区版块
存档分类
最新评论

使用AngularJS进行表单验证

 
阅读更多

<form name="myForm"  ng-submit="addForm()" novalidate>

     <div class="form-group">

        <label>名称</label>

        <input type="text" name="userName" placeHolder="名称" ng-minlength="3"

           ng-maxlength="20" required>

         <div class="m-t-xs" ng-show="myForm.userName.$invalid && myForm.submitted">

               <small class="text-danger" ng-show="myForm.userName.$error.required">

                      请输入

              </small>

              <small class="text-danger" ng-show="myForm.userName.$error.minlength">

                      名称最小长度为3                                

               </small>

                <small class="text-danger" ng-show="myForm.userName.$error.maxlength">

                       名称最大长度为20

                </small>

         </div>

    </div>

    <div class="form-group">

            <button type="submit">保存</button>

     </div>

</form>

$scope.addForm = function(){

    if($scope.myForm.$valid){

        //提交表单

    }else{

         $scope.myForm.submitted = true;//显示错误提示信息

    }

}

 

分享到:
评论

相关推荐

    使用angularJS完成表单验证

    使用angularJS完成表单验证功能

    angular_valid:使用 AngularJs 进行表单验证

    本文将深入探讨如何使用AngularJS进行表单验证,这对于创建用户友好的、数据安全的前端界面至关重要。 一、AngularJS表单基础 在AngularJS中,表单是通过`&lt;form&gt;`标签定义的,通过`ngForm`指令与AngularJS框架关联...

    AngularJS表单验证

    在AngularJS中,表单验证是一项关键功能,它允许开发者实时检查用户输入的数据,确保其符合预期的格式和规则,从而提高用户体验并减少服务器端的压力。AngularJS的表单验证机制是基于模型驱动的,这使得它在处理复杂...

    AngularJS实现表单验证

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

    基于angularJS移动端表单验证效果

    在移动应用开发中,前端表单验证是必不可少的一部分,它能确保用户输入的数据符合预期,减少服务器负担,提升用户体验。AngularJS,作为一个强大的MVC框架,提供了强大的数据绑定和指令系统,非常适合构建复杂的...

    angularjs表单验证Demo

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

    AngularJS手动表单验证

    首先,我们需要了解AngularJS表单验证的两个基本概念:novalidate属性和表单的name属性。在HTML5中,form元素可以添加一个novalidate属性,用来告诉浏览器不要使用默认的表单验证功能。这对于AngularJS来说至关重要...

    form-validation-angularjs-example:如何使用 AngularJS 进行表单验证

    在本文中,我们将深入探讨如何使用AngularJS进行有效的表单验证。AngularJS,作为一个强大的JavaScript框架,提供了内置的机制来处理客户端的表单验证,从而为用户提供了实时、交互式的反馈,增强了用户体验。 ### ...

    Angularjs2表单+验证

    3. **表单验证**: - AngularJS2支持客户端验证,即在用户提交表单之前检查输入是否有效。 - 控制器级别的验证通过在FormControl对象上应用验证器实现,例如`formControlName.control.setValidators(Validators....

    AngularJS实现表单验证功能详解

    在使用AngularJS进行表单验证时,要注意以下几点: 1. 给表单以及表单控件加上name属性。这是能够通过AngularJS引用表单状态的前提。 2. 给需要用到的表单控件加上ngModel。这是实现数据双向绑定的关键步骤。 3. ...

    AngularJS表单和输入验证实例

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

    AngularJS自定义表单验证功能实例详解

    本文实例讲述了AngularJS自定义表单验证功能。分享给大家供大家参考,具体如下: Angular实现了大部分常用的HTML5的表单控件的类型(text, number, url, email, date, radio, checkbox),也实现了很多指令做为验证...

    详解AngularJS实现表单验证

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

    AngularJs demo 例子(表单验证) form

    在AngularJS中,表单验证是一个至关重要的部分,它能够帮助开发者在用户提交数据之前进行实时验证,提高用户体验并确保数据的准确性。本示例以"AngularJs demo 例子(表单验证)form"为主题,结合bootstrap美化,...

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

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

    使用angularjs实现浮动表单效果.zip

    在本文中,我们将深入探讨如何使用AngularJS实现浮动表单效果。AngularJS是一个强大的JavaScript...在实际项目中,你可能还需要考虑其他因素,如响应式设计、表单验证等,以确保在不同设备和屏幕尺寸上都有良好的表现。

    SpringMVC + Angularjs demo

    展示使用AngularJS和spring MVC4,我们将创建一个增删查改的应用。前端使用AngularJS,后端使用Spring REST API。AngularJS使用$http服务和后端进行异步通信,同时使用AngularJS进行表单验证。

    基于angularJS的表单验证指令介绍

    但是通过这些片段,我们仍然可以对AngularJS表单验证指令的实现逻辑有一个大致的了解。 此外,在实际开发中,通常还需要考虑表单验证的用户体验问题,例如通过动画、颜色变化等方式来提示用户输入的正确与否,以及...

    基于AngularJS实现表单验证功能

    在实现AngularJS表单验证时,可以定义自定义验证函数来满足特定的验证需求。自定义验证器通过返回 true 或 false 来决定表单是否通过验证。另外,AngularJS还提供了校验消息提示,当验证不通过时,可以在视图中显示...

Global site tag (gtag.js) - Google Analytics