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. Qt 5.0+ 中 connect 新语法与重载函数不兼容问题的解决方法，以及个人看法

    Qt 5.0+ 版本提供了 connect 的新语法,相比之前的语法新语法可以提供编译期检查,使用也更方便.可是使用过程中发现一个小问题——当某个 signal 和成员函数是重载关系的时候,qmake ...

  2. 学习实战java虚拟机的计划图

    啥也不说了,实战java虚拟机,好好学习,天天向上! <实战java虚拟机>一书Q交流群:397196583

  3. 关于 FPGA 内部信号扇入扇出

    扇入.扇出系数 扇入系数是指门电路允许的输入端数目.一般门电路的扇入系数为1—5,最多不超过8.扇出系数是指一个门的输出端所驱动同类型门的个数,或称负载能力.一般门电路的扇出系数为8,驱动器的扇出系数 ...

  4. Java获取某年第一天和最后一天

    package com.dada.test; import java.text.SimpleDateFormat; import java.util.Calendar; import java.uti ...

  5. 计算机维修之操作系统的安装（windows、Mac、Linux）

    从大学开始接触了更多的计算机知识,我就在开荒一样,慢慢的接触多了,就想着安装操作系统一定要学会. 前前后后呢,我折腾过很多操作系统,在我的笔记本上存在过Windows.黑苹果.Linux.安卓等操作系 ...

  6. 部分Android手机拍照后照片被旋转的解决方案

      在部分Android手机(如MT788.Note2)上,使用Camera拍照以后,得到的照片会被自动旋转(90°.180°.270°),这个情况很不符合预期.仔细分析了一下,因为照片属性中是存储了 ...

  7. composer

    composer 是PHP框架的包安装工具,类似于bower ,npm.bundler. 是命令行工具,没有图形界面. 系统要求 运行 Composer 需要 PHP + 以上版本.一些敏感的 PHP ...

  8. C#实现快速排序

    网上很多关于快速排序的教程,嗯,不错,版本也很多,有的试了一下还报错..呵呵 于是乎低智商的朕花了好几天废了8张草稿纸才弄明白.. 快速排序的采用的分治啊挖坑填数啊之类的网上到处都是,具体过程自己百度 ...

  9. python之路二十

    一, $.ajax,这个是JQuery对ajax封装的最基础步,通过使用这个函数可以完成异步通讯的所有功能.也就是说什么情况下我们都可以通过此方法进行异步刷新的操作.但是它的参数较多,有的时候可能会麻 ...

  10. Tomcat的设定

    tomcat 版本  apache-tomcat-7.0.68-windows-x64 1.解压文件到 eclipse文件夹中,这个放哪都可以,个人习惯而已 2.tomcat目录结构 图片为盗图- 3 ...