夺命雷公狗—angularjs—2—模拟表单验证

这里我们就来借助妹子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>

 

 

效果如下图所示：

 

 

 

posted @ 2016-08-17 15:42  夺命雷公狗  阅读(201)  评论(0)  编辑  收藏  举报