novalidate   去掉html5自带的验证

ng-minlength    规定输入文本的最小长度

ng-maxlength    规定输入文本的最大长度

ng-submit  接收一个方法名,提交表单时触发这个方法

ng-class 规定一个条件,满足条件后添加指定的类名。语法如下:(error是类名,冒号后面的是条件)

ng-class="{'error':form.username.$error.required}"

$pristine  没有被改过的表单

$dirty  被改过的表单

$valid  通过验证

$invalid 没有通过验证

$error  错误

语法:

<!--
这是一个条件,表示检查所有规则
-->
form.username.$invalid <!--
表示只检查minlength规定的规则
-->
form.username.$error.minlength
<!--
form表示 form表单的form的name名字,
username 表示form下某个表单
-->

当input上规定的验证规则通过后,在input 上写的 ng-model 才会生效。

ng-if  语句的条件满足显示元素,不满足移除元素

ng-disabled 同ng-if的用法一样,这个是表示元素可不可用的

根据以上知识点就可以写一个简单的表单验证了:

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../../Angular/angular.min.js"></script>
<link rel="stylesheet" href="../../Angular/bootstrap.css"/>
<style>
.box
{
width:200px;
margin:50px auto;
} p.error
{
color:red;
} input.error
{
border:1px solid red;
}
</style>
</head>
<body> <div class="box" ng-controller="myController1">
<form name="form" ng-submit="formSubmit()" novalidate>
<h2>注册</h2>
<div>
<label>用户名:</label>
<input type="text"
class="form-control"
ng-model="userdata.username"
name="username"
ng-minlength="3"
ng-maxlength="5"
required
/>
<div class="error" ng-show="form.username.$invalid && form.username.$dirty && form.submitted">
<p class="error" ng-if="form.username.$error.minlength">最少输入3位</p>
<p class="error" ng-if="form.username.$error.maxlength">最多输入5位</p>
<p ng-if="form.username.$error.required" ng-class="{'error':form.username.$error.required}">不能为空</p>
</div> </div>
<div>
<label>密码:</label>
<input type="password"
name="password"
ng-model="userdata.password"
class="form-control"
ng-minlength="6"
required
ng-class="{'error':form.password.$invalid && form.password.$dirty}"
/>
<p class="error" ng-if="form.password.$invalid && form.password.$dirty">密码格式不正确</p>
</div>
<div class="text-center">
<input type="submit" class="btn btn-danger"/>
</div> </form>
</div> <script>
angular.module("myApp",[])
.controller("myController1",function($scope)
{
$scope.userdata = {};
$scope.submitted = false;
$scope.formSubmit = function()
{
if($scope.form.$valid)
{
console.log($scope.userdata); //scope可以直接点出from的name属性
console.log($scope.form)
}
else
{
$scope.form.submitted = true;
} }
})
</script>
</body>
</html>

Angular表单验证的更多相关文章

  1. Angular 表单验证类库 ngx-validator 1.0 正式发布

    背景介绍 之前写了一篇 <如何优雅的使用 Angular 表单验证>,结尾处介绍了统一验证反馈的类库  ngx-validator  ,由于这段时间一直在新模块做微前端以及相关业务组件库, ...

  2. 简单的angular表单验证指令

    <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title& ...

  3. angular表单验证实例----可用的代码

    前段时间,公司做一个单页面,就是一个表单验证,早开始在菜鸟教程上关注了angular,所以下派上用场了 angular里面对于表单验证,设置了很多指令. 也就是说不用自己写一些逻辑,直接绑定指令就行. ...

  4. 从浅入深剖析angular表单验证

    最近手上维护的组件剩下的BUG都是表单验证,而且公司的表单验证那块代码经历的几代人,里面的逻辑开始变得不清晰,而且代码结构不是很angular. 是很有必要深入了解表单验证. 入门之前,我觉得应该先了 ...

  5. angular 表单验证

    最近在用angular写表单验证时 , 不小心把ng-model全替换删掉了, 然后发现之前写的验证都失效, 在查阅资料和反复修改摸索后, 发现angular中的表单验证, 都是基于ng-model的 ...

  6. 如何优雅的使用 Angular 表单验证

    随便说说,这一节可以跳过 去年参加 ngChine 2018 杭州开发者大会的时候记得有人问我: Worktile 是什么时候开始使用 Angular 的,我说是今年(2018年) 3 月份开始在新模 ...

  7. 简话Angular 05 Angular表单验证

    一句话: 可以使用所有html5表单验证功能,同时Angular还增强了部分验证,支持动态验证 1. 上源码 <div ng-controller="ExampleController ...

  8. Angular 表单验证 基础篇

    <div class="nav"> <h4>表单验证</h4> <form ng-app="myApp" name=& ...

  9. ngVerify - 更高效的 angular 表单验证

    ngVerify v1.5.0 a easy Angular Form Validation plugin.简洁高效的__angular表单验证插件__ See how powerful it.看看它 ...

随机推荐

  1. How to Delete XML Publisher Data Definition Template

    DECLARE  -- Change the following two parameters  VAR_TEMPLATECODE  VARCHAR2(100) := 'CUX_CHANGE_RPT1 ...

  2. Android消息处理

    基本概念: Message:消息,其中包含了消息ID.what,消息处理对象.obj以及处理的数据.arg1.arg2等,由MessageQueue统一列队,终由Handler处理. Handler: ...

  3. iOS中为什么block用copy属性

    1. Block的声明和线程安全Block属性的声明,首先需要用copy修饰符,因为只有copy后的Block才会在堆中,栈中的Block的生命周期是和栈绑定的,可以参考之前的文章(iOS: 非ARC ...

  4. mac gem install nokogiri error

    Gem::Ext::BuildError: ERROR: Failed to build gem native extension. /Users/angela/.rbenv/versions/1.9 ...

  5. Selenium FF WebDriver 加载firebug 和设置代理

    首先这次使用的webDriver for Firefox的 由于项目的原因,需要在测试的时候加载Firebug和使用vpn,加载代理 Firefox 加载代理,可以从FF菜单上看,代理分为好几种 我这 ...

  6. MySQL 5.7 Replication 相关新功能说明

    背景: MySQL5.7在主从复制上面相对之前版本多了一些新特性,包括多源复制.基于组提交的并行复制.在线修改Replication Filter.GTID增强.半同步复制增强等.因为都是和复制相关, ...

  7. 浅谈spring 声明式事物

    此处主要讲讲事物的属性. 事物属性包含了五个方面: 1.传播行为 2.隔离规则 3.回滚规则 4.事物超时 5.是否只读 一.传播行为 事务的第一个方面是传播行为(propagation behavi ...

  8. python 装饰器

    #!/usr/bin/env python3 #-*-encoding:utf-8-*- def w3(*args, **kwargs): ') def w1(): def ww1(func): de ...

  9. Jsonp调用网易云音乐API搜索播放歌曲

    效果如下图: 基本就是正常的文件播放,暂停,停止,设置循环,随机播放,加速,减速,上一曲,下一曲,再多个选择本地文件加入到播放列表的功能.然后想着给加个能搜索网络歌曲并且播放的功能,今天研究了一下,成 ...

  10. Js中 md5 sha1 base64 加密

    js的3中加密方式: .sha1加密,加密性高 调用: var sha = hex_sha1(str); .base64加密 调用: var b = new Base64(); var str = b ...