夺命雷公狗—angularjs—2—模拟表单验证
2024-09-27 23:25:30
这里我们就来借助妹子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">×</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>
效果如下图所示:
最新文章
- C/C++入门基础---指针(2)
- IOS开发--仿制网易新闻
- 尝试使用word发布博客
- 小米miui5系统的webview在处理动画事件transitionEnd事件时,竟然要用transitionend才行
- POJ1837 Balance(DP)
- MFC实现数独(2)
- mysql:通用查询日志general_log
- java.lang.SecurityException: Permission denied (missing INTERNET permission?) 解决
- Spark处理日志文件常见操作
- 笔记本电脑连wifi然后通过有线网口做桥接
- usb设备(移动硬盘或U盘),弹出时提示“有进程或程序占用,无法弹出”。解决办法
- 028_nginx_https证书
- Debian/Ubuntu 下网易云音乐无法由图标/列表 打开的解决方案
- JAVA语言 第六周
- 关于redis和memcached的一些想法
- ckeditor粘帖上传图片控件-更新-2.0.15版本
- bitmap过大无法显示图片的问题 - z
- 保密员(baomi)
- WinForm窗体继承
- 《剑指Offer》题一~题十