angularjs表单登录验证

ciaos

浏览: 303413 次
性别:
来自: 深圳

最近访客更多访客>>

smoking_boy

yangyongjie

muyuan

dongguangming88

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

主要利用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);

分享到：