angularjs表单登录验证
程序员文章站
2022-03-08 20:37:46
...
主要利用angularjs的数据绑定特性，可以不用jquery去直接dom操作获取表单数值
前段index.html代码如下：
<!doctype html>
<html>
<head>
<title>测试</title>
<meta charset="utf-8">
<!-- LOAD BOOTSTRAP CSS -->
<link rel="stylesheet" href="bs/css/bootstrap.min.css">
<!-- LOAD JQUERY -->
<script src="./jquery-1.11.1.min.js"></script>
<!-- LOAD ANGULAR -->
<script src="./angular.min.js"></script>
<!-- PROCESS FORM WITH AJAX (NEW) -->
<script>
// define angular module/app
var formApp = angular.module('formApp', []);
// create angular controller and pass in $scope and $http
function formController($scope, $http) {
// create a blank object to hold our form information
// $scope will allow this to pass between controller and view
$scope.formData = {};
// process the form
$scope.processForm = function() {
$http({
method : 'POST',
url : 'post.php',
data : $.param($scope.formData), // pass in data as strings
headers : { 'Content-Type': 'application/x-www-form-urlencoded' } // set the headers so angular passing info as form data (not request payload)
})
.success(function(data) {
//console.log(data);
if (!data.success) {
// if not successful, bind errors to error variables
$scope.errorName = data.errors.name;
$scope.errorLogin = data.errors.login;
$scope.errorPasswd = data.errors.passwd;
} else {
// if successful, bind success message to message
$scope.errorName = null;
$scope.errorLogin = null;
$scope.errorPasswd = null;
$scope.message = data.message;
}
});
};
}
</script>
</head>
<!-- apply the module and controller to our body so angular is applied to that -->
<body ng-app="formApp" ng-controller="formController">
<div class="container">
<div class="col-md-4 col-md-offset-4">
<!-- PAGE TITLE -->
<div class="page-header">
<h1>用 Angular 登录</h1>
</div>
<!-- SHOW ERROR/SUCCESS MESSAGES -->
<div id="messages" class="well" ng-show="message">{{ message }}</div>
<!-- FORM -->
<form ng-submit="processForm()" ng-class="{'has-error' : errorLogin}">
<div id="name-group" class="form-group" ng-class="{ 'has-error' : errorName }">
<label>账户</label>
<input type="text" name="name" class="form-control" placeholder="QQ/账户名/手机号" ng-model="formData.name">
<span class="help-block" ng-show="errorName">{{ errorName }}</span>
</div>
<div id="passwd-group" class="form-group" ng-class="{ 'has-error' : errorPasswd }">
<label>密码</label>
<input type="password" name="passwd" class="form-control" placeholder="" ng-model="formData.passwd">
<span class="help-block" ng-show="errorPasswd">{{ errorPasswd }}</span>
</div>
<!-- SUBMIT BUTTON -->
<button type="submit" class="btn btn-success btn-lg btn-block">
<span class="glyphicon glyphicon-flash"></span> 登录
</button>
<span class="help-block" ng-show="errorLogin">{{ errorLogin }}</span>
</form>
<!-- SHOW DATA FROM INPUTS AS THEY ARE BEING TYPED -->
<pre>
{{ formData }}
</pre>
</div>
</div>
</body>
</html>后台post.php代码如下：
<?php
$errors = array();
$data = array();
if (empty($_POST['name']))
$errors['name'] = '请输入账户名';
if (empty($_POST['passwd']))
$errors['passwd'] = '请输入密码';
// response if there are errors
if ( ! empty($errors)) {
$data['success'] = false;
$data['errors'] = $errors;
} else {
if ($_POST['name'] == "admin" && $_POST['passwd'] == "admin"){
$data['success'] = true;
$data['message'] = 'Success!';
}else{
$data['success'] = false;
$data['errors'] = array("login" => "账号或密码错误");
}
}
echo json_encode($data);
上一篇： 中国首届机器人创客马拉松将于3月20-22日深圳举办
下一篇： 解决python中不能连接超时的问题