其实我们的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. 【Android测试】【随笔】与 “美丽说” 测试同事交流

    ◆版权声明:本文出自胖喵~的博客,转载必须注明出处. 转载请注明出处:http://www.cnblogs.com/by-dream/p/5405432.html 分享者简介 雪晗,3年+测试经验,现 ...

  2. oracle 表查询一

    通过scott用户下的表来演示如何使用select语句,接下来对emp.dept.salgrade表结构进行解说. emp 雇员表字段名称   数据类型       是否为空   备注-------- ...

  3. QcheckBox

    #include "dialog.h" #include "ui_dialog.h" #include <QtCore> #include < ...

  4. 采用asyncore进行实时同步

    最近在维护项目的时候,发现某个实时数据同步功能非常容易失败,故静下心来彻底弄清楚该设计的实现原理,以及其中用到的python异步sockethandler : asyncore. 实时数据同步功能的设 ...

  5. less 命令（转）

    less 工具也是对文件或其它输出进行分页显示的工具,应该说是linux正统查看文件内容的工具,功能极其强大.less 的用法比起 more 更加的有弹性.在 more 的时候,我们并没有办法向前面翻 ...

  6. 微信分享JS接口失效说明及解决方案

    关键字:微信分享 JS 失效  分享到朋友圈 微信分享JS接口目前已失效,以前可以自定义分享的标题.描述.图片.链接地址在微信6.0.2版本中失效. 官方回复如下: 旧版的获取分享状态及设置分享内容的 ...

  7. ionic build android 报错分析

  8. 滑动关闭activity

    // 手指上下滑动时的最小速度 private static final int YSPEED_MIN = 1000; // 手指向右滑动时的最小距离 private static final int ...

  9. python待解决问题笔记

    2006, 'MySQL server has gone away' 描述:mysql服务端断开idle过期连接,而客户没有检测重连所以报错. 解决: def is_connection_usable ...

  10. ios问答题与答案

    1. OC中,与alloc语义相反的方法是dealloc还是release?与retain语义相反的方法是dealloc还是release?为什么?需要与alloc配对使用的方法是dealloc还是r ...