当前位置:首页 > 开发 > Web前端 > JavaScript > 正文

angularjs表单登录验证

发表于: 2014-10-26   作者:ciaos   来源:转载   浏览次数:
摘要: 主要利用angularjs的数据绑定特性,可以不用jquery去直接dom操作获取表单数值 前段index.html代码如下: <!doctype html> <html> <head> <title>测试</title> <meta charset="utf-8"> <!-- L

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

 

angularjs表单登录验证

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
通过AngularJS我们不仅可以隐藏/显示错误提示消息,高亮输入框,还可以通过编写指令来随心所欲的控
angularJs 前端验证指令 var rcSubmitDirective = { 'rcSubmit': function ($parse) { return { res
通过AngularJS我们不仅可以隐藏/显示错误提示消息,高亮输入框,还可以通过编写指令来随心所欲的控
最近在研究AngularJS,恰好遇到了表单验证问题。 没有那么多时间去写原创文章,恰好找到一篇不写得相
最近开始学习angularjs,学到表单验证的时候发现有必要学习下大神的好文章: 转:http://www.oschin
Chrome的Angular插件 Chrome浏览器有一些插件可以提高Angular开发的开发效率,我本人很喜欢的有两款
通过AngularJS我们不仅可以隐藏/显示错误提示消息,高亮输入框,还可以通过编写指令来随心所欲的控
AngularJS Form Validation 今天,我们来看看 Angular 是怎样帮我们做表单验证的。我们会集中讲怎么
最近在研究AngularJS,恰好遇到了表单验证问题。 没有那么多时间去写原创文章,恰好找到一篇不写得相
这部分,我们写一个表单程序,使用angularjs的检测并完成表单属性的获取与拷贝。   在AngularJS中
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号