主要利用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表单验证.
AngularJS是前端开发流行框架,本Demo展示了表单验证的意义,及实现方法,掌握Angular基础指令,通过不同的指令元素可以拥有不同功能,并通过指令与表单合作验证,从而实现表单验证的敏捷化开发。
使用angularJS完成表单验证功能
基于angularJS移动端表单验证效果
开始学习AngularJS表单验证: 常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: 复制代码 代码如下:<<input type=”text” required /> 2....
漂亮大气的bootstrap表单,angularJs表单验证 ,是angularJs入门很好的例子
本文实例讲述了AngularJS自定义表单验证功能。分享给大家供大家参考,具体如下: Angular实现了大部分常用的HTML5的表单控件的类型(text, number, url, email, date, radio, checkbox),也实现了很多指令做为验证...
主要介绍了angularjs 表单密码验证自定义指令实现代码,需要的朋友可以参考下
两种表单1隐式和formBuilder,表单验证。
主要介绍了AngularJS手动表单验证的相关资料,AngularJS的表单验证大致有两种,一种是手动验证,一种是自动验证,本文重点介绍AngularJS自动表单验证,感兴趣的小伙伴们可以参考一下
AngularJS的表单验证大致有两种,一种是手动验证,一种是自动验证。 一、手动验证 所谓手动验证是通过AngularJS表单的属性来验证。而成为AngularJS表单必须满足两个条件: 1、给form元素加上novalidate=”novalidate...
主要介绍了AngularJS手动表单验证的相关资料,AngularJS的表单验证大致有两种,一种是手动验证,一种是自动验证,本文重点介绍AngularJS手动表单验证,感兴趣的小伙伴们可以参考一下
本文实例讲述了AngularJS表单验证功能。分享给大家供大家参考,具体如下: 在AngularJS的管辖下,每个表单form都会创建一个ngFormController的一个实例。在表单里面的每个input都会创建一个在这个实例下的...
能够验证用户在表单中输入的内容是否合理与正确是十分重要的,这篇文章主要介绍了ionic使用angularjs表单验证(模板验证),具有一定的参考价值,感兴趣的小伙伴们可以参考一下
angular_form angularJs表单和验证的基本模板 这只是我的Angular JS格式记录和基本验证格式的基本模板,需要基本样式,但可以使用。
本篇文章详细的介绍了AngularJS表单和输入验证实例, AngularJS表单可以提供验证功能。有需要的可以了解一下。
能够根据用户在表单中输入的内容给出实时视觉反馈是非常重要的。...AngularJS提供了很多表单验证指令。 <form name=form novalidate> <label name=email>Your email <input type=email name=