AngularJS之表单验证

<body ng-app="myApp" ng-controller="MoinController">

<style>

.error {
border: 1px solid red!important;
}
</style>

<form name="signUpForm" ng-submit="submitForm()">

<div class="form-group">

<label>用户名:</label>

<input class="form-control" name="username" ng-model="username" ng-minlength="4" ng-maxlength="10" ng-class="{‘error‘:signUpForm.username.$invalid &&

signUpForm.username.$touched }" required/>

</div>

</form>

</body>

<script>
angular.module(‘myApp‘, [])

.controller(‘MoinController‘, function($scope)

{

$scope.submitForm = function() {
console.log(‘表单提交了‘)

}

})
</script>
表单验证 ng-minlength:最小长度 ng-maxlength:最大长度 ng-class:根据条件添加class ng-submit:表单提交 该示例意义为:输入验证,当输入时不满足最少为4最多为10的字符时,自动给input添加error类,首次进入页面不生效

时间: 2024-10-20 12:27:55

AngularJS之表单验证的相关文章

基于angularJS的表单验证练习

今天看了一下angularJS的表单验证,看的有点云里雾里(也有可能是雾霾吸多了),于是做了一个小练习来巩固一下. html: <div ng-controller="Aaa"> <form novalidate name="loginForm"> <div> <label>用户名</label> <input type="text" name="nText"

AngularJS复习------表单验证

在AngularJS中能够将HTML5表单验证功能同自己的验证指令结合起来使用,这里介绍使用的核心功能. 使用表单验证,首先要确保表单的每个控件都有name属性 如果想要屏蔽浏览器对表单的默认验证行为,可以在表单元素上添加novalidate标记. 必填项:只需要在输入字段元素上添加HTML5标记 required即可 最小长度:在输入字段上使用AngularJS指令ng-minlength="{number}" 最大长度:在输入字段上使用AngularJS指令ng-maxlength

angularJS 过滤器 表单验证

过滤器1.filter的作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果,主要用于数据的格式化.2.内置过滤器(1)Currency(货币)将一个数值格式化为货币格式,默认为$(2)Date(3)Filter子串匹配用来处理一个数组,可以过滤出含有某个子串的元素,作为一个字数组来返回.通常用来过滤需要展示的元素.可以是字符串数字,对象或是一个用来从数组中选择元素的函数.字符串:返回所有包含这个字符串的元素对象:将待过滤对象的属性同这个对象中的同名属性进行对比,如果属性值是字符串就

angularjs的表单验证问题

angularjs表单验证问题 1 可以使用angularjs自带验证,(必填项.email.url)使用方法: 通过myForm.personEmail.$valid是否为true 即可判断是否通过验证.具体是哪类错误可以通过demo: <input type="text" required />  必填 <input type="text" ng-minlength="5" /> 最小长度 <input type

AngularJs的表单验证

能够根据用户在表单中输入的内容给出实时视觉反馈是非常重要的.在人与人沟通的语境中,表单验证给出来的反馈同获得正确输入同等重要. 如果想要屏蔽浏览器对表单的默认验证行为,可以在表单元素上添加novalidate标记. <form name="form" novalidate><label name="email">Your email</label><input type="email"name="

AngularJS 的表单验证

最近开始学习angularjs,学到表单验证的时候发现有必要学习下大神的好文章: 转:http://www.oschina.net/translate/angularjs-form-validation 今天我们将来看看Angular如何帮助做表单验证. 我们将讨论更多使用angular进行有关表单操作的东西(就像我们另外的一篇文章: 提交Ajax表单:AngularJS的方式). 不过不用担心,那篇文章不一定要读的. 我们将重点放在客户端验证上,并使用Angular内置的表单属性.这里有一个 

【AngularJs】---表单验证

1. 必填项 验证某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" required /> 2. 最小长度验证表单输入的文本长度是否大于某个最小值,在输入字段上使用AngularJS指令 ng-minleng= "{number}": <input type="text" ng-minlength="5" /> 3. 最大长度验证

AngularJs实现表单验证

首先,我们应该知道,表单中,常用的验证操作有: $dirty 表单有填写记录 $valid 字段内容合法的 $invalid 字段内容是非法的 $pristine 表单没有填写记录 $error 表单验证不通过的错误信息, $error支持的验证有:required/minlength/maxlength/pattern/email/number/date/url等 然后,验证时,需给表单,及需要验证的input,设置name属性:给form及input设置name后,会将form表单信息,默认

AngularJS form表单验证(非常全面)

构建一个ng表单 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</