其实我们的angularjs都是是块状代码，其实是可以在实际开发中保存下来以后就可以达到重复利用的目的了。。

废话不多说，直接上代码：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link rel="stylesheet" href="css/amazeui.min.css">

    <script src="js/jq2.js"></script>

    <script src="js/amazeui.min.js"></script>

</head>

<body ng-app="myapp">

<div style="width: 250px; margin: 0 auto" ng-controller="forms">

    <form ng-submit="sub(ckform.$valid)" name="ckform">

        <div class="am-alert {{color}} " data-am-alert ng-show="errorMsg.length > 0">

            <button type="button" class="am-close">&times;</button>

            <p>{{errorMsg}}</p>

        </div>

        <h1>登录表单</h1>

        <div class="am-input-group">

            <span class="am-input-group-label"><i class="am-icon-user am-icon-fw"></i></span>

            <input type="text" name="user" class="am-form-field" placeholder="Username" ng-model="user.name" required ng-minlength="5" >

        </div>

        <p>

        <p>

            <!--下面的ckform 和上面表单 form 的name里面的值 是一样的-->

            <!--下面的name 和上面表单里面的name值 是一样的-->

            $pristine 【没修改】：{{ckform.user.$pristine }}<br>

            $dirty【修改过】：{{ckform.user.$dirty}}<br>

            $invalid【验证失败】：{{ckform.user.$invalid}}<br>

            $invalid【验证成功】：{{ckform.user.$valid}}<br>

            $error【错误详情】：{{ckform.user.$error}}<br>

        </p>

        </p>

        <div class="am-input-group">

            <span class="am-input-group-label"><i class="am-icon-lock am-icon-fw"></i></span>

            <input type="password" class="am-form-field" placeholder="Password" ng-model="user.pass" >

        </div>

        <div class="am-g" style="margin-top: 15px">

            <div class="am-u-sm-6 am-text-center">

                <button type="submit" class="am-btn am-btn-success" >登录</button>

            </div>

            <div class="am-u-sm-6 am-text-center">

                <button type="button" class="am-btn am-btn-default">取消</button>

            </div>

        </div>

    </form>

</div>

</body>

<script src="js/angular.min.js"></script>

<script>

    var module = angular.module("myapp",[]);

    module.controller('forms',function($scope){

        $scope.user = {name:'',pass:''};

        $scope.errorMsg = '';

        $scope.login = function(){

            console.log($scope.user.name);

            console.log($scope.user.pass);

            if(/*$scope.user.name == 'admin' && */$scope.user.pass == 'admin888'){

                $scope.errorMsg = 'YES~~~~';

                $scope.color = "am-alert-success";

            }else{

                $scope.errorMsg = 'NO~~~~~';

                $scope.color = "am-alert-danger";

            }

        }

        $scope.sub = function(ckval){  //这里的ckval相当于form 表单头的$valid

            //required 必须要填写

            //ng-minlength 最短

            //ng-maxlength 最长

            //ng-pattern 正则

            //

            console.log(ckval);

            if(!ckval){

                $scope.errorMsg = "骚年错误啦";

                $scope.color = "am-alert-danger";

            }else{

                $scope.errorMsg = '骚年不错噢~~~~';

                $scope.color = "am-alert-success";

            }

        }

    })

</script>

</html>

效果展示：

夺命雷公狗—angularjs—3—表单验证的高级用法的更多相关文章

  1. 夺命雷公狗—angularjs—9—ng-class的自定义函数的用法

    angularjs里面其实给我们留下了一个很不错的地方,他就是可以直接调用函数从而对该位置进行处理, 被点击后展示效果如下所示: 开始走代码吧.... <!doctype html> &l ...

  2. 基于angularJS的表单验证练习

    今天看了一下angularJS的表单验证,看的有点云里雾里(也有可能是雾霾吸多了),于是做了一个小练习来巩固一下. html: <div ng-controller="Aaa" ...

  3. angularjs的表单验证

    angularjs内置了常用的表单验证指令,比如min,require等.下面是演示: <!DOCTYPE html> <html> <head> <meta ...

  4. 夺命雷公狗—angularjs—6—单条数据的遍历

    我们在实际的工作中常常会处理到一些数据的遍历,这些数据都是后端传到前端的,有些公司会让前端帮忙处理一点遍历的工作,废话不多说,直接上代: <!doctype html> <html ...

  5. 【AngularJs】---表单验证

    1. 必填项 验证某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" required /> 2 ...

  6. angularJS 过滤器 表单验证

    过滤器1.filter的作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果,主要用于数据的格式化.2.内置过滤器(1)Currency(货币)将一个数值格式化为货币格式,默认为$(2)D ...

  7. AngularJS 的表单验证

    最近开始学习angularjs,学到表单验证的时候发现有必要学习下大神的好文章: 转:http://www.oschina.net/translate/angularjs-form-validatio ...

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

    在AngularJS中能够将HTML5表单验证功能同自己的验证指令结合起来使用,这里介绍使用的核心功能. 使用表单验证,首先要确保表单的每个控件都有name属性 如果想要屏蔽浏览器对表单的默认验证行为 ...

  9. AngularJs实现表单验证

    首先,我们应该知道,表单中,常用的验证操作有: $dirty 表单有填写记录 $valid 字段内容合法的 $invalid 字段内容是非法的 $pristine 表单没有填写记录 $error 表单 ...

随机推荐

  1. zepto源码--插入节点--学习笔记

    与生成width和height使用的方法类似,通过`after`, `prepend`, `before`, `append`,这四者之间的共性,生成对应的函数.并根据这四个函数,生成 `insert ...

  2. sort,ksort,asort的区别

    sort--对数组的val进行排序 ksort--对数组的key值进行排序 asort--对数组进行排序,键与值的对应关系不变 1.sort对数组排序 格式如下:bool sort(array &am ...

  3. angularJS自定义指令scope代替link

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. linux pipe

    1. 函数说明 pipe(建立管道): 1) 头文件 #include<unistd.h> 2) 定义函数: int pipe(int filedes[2]); 3) 函数说明: pipe ...

  5. SQL2000的Enterprise Edition和Developer Edition有什么区别

    1.SQL Server 2000 Enterprise Edition(企业版) 该版本具有强大的可伸缩性和可靠性,可作为大型WEB站点.企业联机事务处理(OLTP)以及数据仓库系统等数据库产品的服 ...

  6. Selenium2学习-018-WebUI自动化实战实例-016-自动化脚本编写过程中的登录验证码问题

    日常的 Web 网站开发的过程中,为提升登录安全或防止用户通过脚本进行黄牛操作(宇宙最贵铁皮天朝魔都的机动车牌照竞拍中),很多网站在登录的时候,添加了验证码验证,而且验证码的实现越来越复杂,对其进行脚 ...

  7. AspectJ本质剖析

    AOP一共有两种方式,spring默认使用的是动态代理(JDK自带的动态代理或者使用cglib的动态代理)和静态代理(ASPECTJ) http://blog.csdn.net/zhao9tian/a ...

  8. 深入浅出 React Native：使用 JavaScript 构建原生应用

    深入浅出 React Native:使用 JavaScript 构建原生应用 链接:https://zhuanlan.zhihu.com/p/19996445 原文:Introducing React ...

  9. Linux信号处理

    给进程设置僵尸状态的目的是维护子进程的信息,以便父进程在以后某个时间获取.这些信息包括子进程的进程ID.终止状态以及资源利用信息(CPU时间,内存使用量等等).如果一个进程终止,而该进程有子进程处于僵 ...

  10. 正确统计SQLServer的慢日志

    RDS的一个富有吸引力的服务是为用户提供慢日志的运行状况报告.报告从不同的维度(总执行时间,总执行次数,总逻辑读,总物理读)为用户提供TOP20的SQL.RDS希望在为用户提供稳定,快速服务的同时,用 ...