这里我们就来借助妹子ui来搭建下模版，废话不多说，代码如下图所示：

<!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">

        <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" class="am-form-field" placeholder="Username" ng-model="user.name" >

        </div>

        <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="button" class="am-btn am-btn-success" ng-click="login()" >登录</button>

            </div>

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

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

            </div>

        </div>

    </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";

                }

        }

    })

</script>

</html>

效果如下图所示：

夺命雷公狗—angularjs—2—模拟表单验证的更多相关文章

  1. AngularJS中的表单验证

    AngularJS中的表单验证 AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则 ...

  2. MVC身份验证.MVC过滤器.MVC6关键字Task,Async.前端模拟表单验证,提交.自定义匿名集合.Edge导出到Excel.BootstrapTree树状菜单的全选和反选.bootstrap可搜索可多选可全选下拉框

    1.MVC身份验证. 有两种方式.一个是传统的所有控制器继承自定义Control,然后再里面用MVC的过滤器拦截.所以每次网站的后台被访问时.就会先走入拦截器.进行前端和后端的验证 一个是利用(MVC ...

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

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

  4. angularJS中的表单验证（包括自定义验证）

    表单验证是angularJS一项重要的功能,能保证我们的web应用不会被恶意或错误的输入破坏.Angular表单验证提供了很多表单验证指令,并且能将html5表单验证功能同他自己的验证指令结合起来使用 ...

  5. AngularJS入门基础——表单验证

    <form name="form" novalidata>   <label name="email">your email</l ...

  6. 夺命雷公狗—angularjs—3—表单验证的高级用法

    其实我们的angularjs都是是块状代码,其实是可以在实际开发中保存下来以后就可以达到重复利用的目的了.. 废话不多说,直接上代码: <!doctype html> <html l ...

  7. 夺命雷公狗—angularjs—13—post参数的接收发送

    我们强悍的angularjs为我们不仅仅提供了他的get接收方式,而且也有post的接收方式,我们现在做一个模拟接收后端传递过来的json的数据: <?php $arr = ['user'=&g ...

  8. 夺命雷公狗—angularjs—25—angular内置的方法（高级）

    查看版本信息 angular.version console.log(angular.version); 判断是否相等 angular.equals() var str1 = ''; var str2 ...

  9. 夺命雷公狗—angularjs—24—extend继承对象

    我们的angularjs中也是给我们留下了方法来做继承的,那么他就是传授中的extend... 不过要如下所示,第二个参数是继承到第一个对象里面的... <!DOCTYPE html> & ...

随机推荐

  1. 设计模式：组合模式（Composite）

    定   义:将对象组合树形结构以表示“部分-整体”的层次结构.组合模式使得用户对单个对象和组合对象使用具有一致性. 结构图: Component类: abstract class Component ...

  2. Bundle文件的创建和使用（一）

    经常会出现某个需求:将自己的模块或者开放类,封装成静态库给其他人提供方便的调用. 但是当你的模块中需要大量使用xib,图片,音频或者其他资源文件时,无法添加至静态库.这个时候就需要将一些资源文件封装至 ...

  3. 删除Checkout with Multiple Addresses

    如果选择No,您的客户在结账时只可以输入一个收货地址,订单的货物都会送到这个地址.如果您选择Yes,您的客户将可以选择发货到多个地址,在购物车中的Proceed to Checkout按钮下面将会出现 ...

  4. ios UIPickerView 技巧集锦（包括循环滚动）

    摘自: http://blog.csdn.net/ipromiseu/article/details/7436521 http://www.cnblogs.com/dabaopku/archive/2 ...

  5. contentOffset,frame,bounds,contentSize,ContentInset

    contentOffset, 在UIScrollview里面滚动条用的最多,比如网易新闻的滚动条,肯定会用到这个. 我认为:它是下一个要显示的图片的左上角.设置了这个左上角后,下一次滚动时,邮戳直接到 ...

  6. opencv3.0+VS2015+64位win7配置

    首先,我们把所有用到的工具下载下来 VS2015         看这里,http://news.mydrivers.com/1/439/439398.htm,我下载的是专业版. OPENCV3.0 ...

  7. ifconfig命令（转）

    许多windows非常熟悉ipconfig命令行工具,它被用来获取网络接口配置信息并对此进行修改.Linux系统拥有一个类似的工具,也就是ifconfig(interfaces config).通常需 ...

  8. Bash中的shopt选项

    Bash中的shopt选项 http://blog.chinaunix.net/uid-20587169-id-1919110.html shopt命令用于显示和设置shell中的行为选项,通过这些选 ...

  9. Metro中控件WebView访问外部的网页显示一片空白

    Metro中控件WebView访问外部的网页显示一片空白 解决方案: ​下载安装了Initex.Software.Proxifier.v3.21.Standard.Edition.Incl.Keyma ...

  10. 图像处理之泛洪填充算法(Flood Fill Algorithm)

    泛洪填充算法(Flood Fill Algorithm) 泛洪填充算法又称洪水填充算法是在很多图形绘制软件中常用的填充算法,最熟悉不过就是 windows paint的油漆桶功能.算法的原理很简单,就 ...