62,074
社区成员
发帖
与我相关
我的任务
分享angular验证的小白问题
需求很简单，在页面点击登录按钮，如果用户名或密码为空，就alert提示用户
前几天学过form验证，现在我没有使用表单，仅仅是两个文本框使用ajax验证
用户名和密码的ng-model分别是data.username和data.password
但是在js代码中 console.log($scope.data.username,$scope.data.password)得到的值为undefined
即使用户名和密码框都输入了值也是undefinded
而且同一次点击，console.log得不到值，下面post提交的$scope.data.username和$scope.data.password却有值
前台login.aspx
JS代码login.js
前几天学过form验证，现在我没有使用表单，仅仅是两个文本框使用ajax验证
用户名和密码的ng-model分别是data.username和data.password
但是在js代码中 console.log($scope.data.username,$scope.data.password)得到的值为undefined
即使用户名和密码框都输入了值也是undefinded
而且同一次点击，console.log得不到值，下面post提交的$scope.data.username和$scope.data.password却有值
前台login.aspx
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>系统登录</title>
<link href="styles/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="styles/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body { margin-top:50px; }
</style>
</head>
<body>
<div ng-app="loginApp">
<div class="container" ng-controller="loginController">
<div class="form-horizontal login-box">
<div class="form-group">
<div class="col-sm-2"><label class="control-label" for="txtUsername">用户名</label></div>
<div class="col-sm-10">
<input type="text" id="txtUsername" class="form-control" placeholder="用户名" ng-model="data.username">
</div>
</div>
<div class="form-group">
<div class="col-sm-2"><label class="control-label" for="txtUsername">密码</label></div>
<div class="col-sm-10">
<input type="password" id="txtPassword" class="form-control" placeholder="密码" ng-model="data.password">
</div>
</div>
<div class="form-group">
<div class="col-sm-12 text-right">
<button type="button" class="btn btn-primary" ng-click="login()">登录</button>
</div>
</div>
</div>
</div>
</div>
<script src="scripts/angular.min.js" type="text/javascript"></script>
<script src="scripts/login.js" type="text/javascript"></script>
</body>
</html>
JS代码login.js
var app = angular.module("loginApp", [])
.controller("loginController", ["$scope", "$http", function ($scope, $http) {
$scope.login = function () {
$scope.data = {};
console.log($scope.data.username,$scope.data.password);
// if($scope.data.username == undefined || $scope.data.password == undefined){
// alert("用户名和密码不能为空！");
// return false;
// }
$http({
method : "POST",
url : "../handlers/LoginHandler.ashx",
params : { username : $scope.data.username , password : $scope.data.password }
}).then(function successCallback(response){
if(response.data == 0){
alert("用户名或密码错误！");
}else{
location.href = "index.aspx";
}
},function errorCallback(){
});
}
} ]);
...全文
请发表友善的回复…
发表回复
yaotomo 2017-01-17
- 打赏
- 举报
是不是这样理解
以前我是在form里指定一个action
现在ng-submit指定一个js方法来提交表单数据，在这个方法里所有的表单数据都保存在$scope.formdata里（这个名字是自己定义的），这样就能实现ajax提交了
至于前台验证，使用ng-show，myForm.username.$error.pattern之类的表单验证方式实现，但是这样怎么实现弹出窗口提示用户呢？
EnForGrass 2017-01-17
- 打赏
- 举报
yaotomo 2017-01-17
- 打赏
- 举报
谢谢，其实我就是想脱离jq，不使用jq或angular自带的element()来取元素
yaotomo 2017-01-17
- 打赏
- 举报
谢谢，原来是作用域的问题
我没有使用表单，所以不能用angular的表单验证吧
使用表单验证怎么用ajax方式提交呢
大鱼> 2017-01-17
- 打赏
- 举报
这是我写的一个登录的JS
EnForGrass 2017-01-17
- 打赏
- 举报
$scope.data = {};这句话不要放到login方法里面，放外面去
var app = angular.module("loginApp", [])
.controller("loginController", ["$scope", "$http", function ($scope, $http) {
$scope.data = {};
$scope.login = function () {
console.log($scope.data.username,$scope.data.password);
// if($scope.data.username == undefined || $scope.data.password == undefined){
// alert("用户名和密码不能为空！");
// return false;
// }
$http({
method : "POST",
url : "../handlers/LoginHandler.ashx",
params : { username : $scope.data.username , password : $scope.data.password }
}).then(function successCallback(response){
if(response.data == 0){
alert("用户名或密码错误！");
}else{
location.href = "index.aspx";
}
},function errorCallback(){
});
}
} ]);
