Angular使用ng-messages与PHP进行表单数据验证
更新时间：2016年12月28日 09:34:33 作者：justforuse
这篇文章主要介绍了Angular使用ng-messages与PHP进行表单数据验证，ng-messages提供了更方便的表单数据验证服务，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Angular中的ng-messages提供了更方便的表单数据验证服务。
本文代码主要基于《AngularJS权威教程》中关于ng-messages模块的说明，但原文中不乏错误以及没有后台代码和示例，所以简单的实现其功能。//别的地方也有错误，我一度怀疑我买了盗版书==
比如我们想与后台进行表单数据合法性验证并给出输入操作提示
HTML代码：
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="angular.js"></script>
<script src="angular-messages.js"></script>
<script>
angular.module("app", ["ngMessages"])
.directive("ensureUnique", function($http) {
return {
require: "?^ngModel",
//原文中混用了ngModel和ctrl，这里统一使用ngModel，意指ngModelController
link: function(scope, element, attrs, ngModel) {
var url = attrs.ensureUnique;
if (!ngModel) {
return false;
}
ngModel.$parsers.push(function(val) {
if (!val || val.length == 0) {
return false;
}
//设置表单状态，属性统一归于signup_form.username.$error中，这是为设置是否合法状态，所以如果设置为false，则会在ng-messages中显示，因为它调用的是$error方法，意为是否“不合法”，原文有错误。
ngModel.$setValidity("checkingAvailability", false);
ngModel.$setValidity("usernameAvailability", true);
$http({
method: "POST",
url: url,
data: {
username: val
}
}).then(function(r) {
if ("exist" == r.data) {
ngModel.$setValidity("checkingAvailability", true);
ngModel.$setValidity("usernameAvailability", false);
} else {
ngModel.$setValidity("checkingAvailability", true);
ngModel.$setValidity("usernameAvailability", true);
}
}, function(e) {
console.log(e);
})
return val;
})
}
}
})
.controller("MainController", function($scope) {
$scope.signup = {
username: ""
}
})
</script>
</head>
<body>
<div ng-controller="MainController">
<form name="signup_form" novalidate ng-submit="signupForm()">
<!-- 原文中指令放在了form元素中，应该放在input元素中 -->
<input type="text" name="username" ng-model="signup.username" required ng-min-length=3 ng-max-length=10 ensure-unique="check.php">
<!-- 输入过才显示操作信息 -->
<div class="error" ng-show="signup_form.$dirty" ng-messages="signup_form.username.$error" ng-messages-multiple>
<div ng-message="required">
Required!!!
</div>
<div ng-message="checkingAvailability">
Checking...
</div>
<div ng-message="usernameAvailability">
Has been taken, please choose another.
</div>
</div>
<div>
<button type="submit">Submit</button>
</div>
<p>{{signup_form.username.$error}}</p>
</form>
</div>
</body>
</html>
PHP代码：
<?php
//Angular与jQuery传递参数类型不同，不能直接使用$.POST['username']获取;
$postData = file_get_contents('php://input', true);
$obj=json_decode($postData);
//这里模拟唯一性验证
if($obj->username == '123'){
echo "exist";
}
else{
echo "available";
}
?>
效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
![angular报错can't resolve all parameters for []的解决](//img.jbzj.com/images/xgimg/bcimg0.png)
angular报错can't resolve all parameters&nb
这篇文章主要介绍了angular报错can't resolve all parameters for []的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。这篇文章主要介绍了Angular动态绑定样式及改变UI框架样式的方法小结,需要的朋友可以参考下2018-09-09
这篇文章主要介绍了Angular value与ngValue区别详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
在AngularJs中有三种方式可以设置请求头信息，文中对每种方法给大家介绍的非常详细，选择那种方式可以根据自己的需求，感兴趣的朋友跟随脚本之家小编一起看看吧2018-09-09
这篇文章主要介绍了浅析AngularJS中的生命周期和延迟处理,是AngularJS中较为核心的深层次内容,需要的朋友可以参考下2015-06-06
前端技术的发展是如此之快，各种优秀技术、优秀框架的出现简直让人目不暇接，紧跟时代潮流，学习掌握新知识自然是不敢怠慢。下面这篇文章主要给大家介绍了AngularJS中run方法的巧妙运用,需要的朋友可以参考借鉴，下面来一起看看吧。2017-01-01
Angular 4依赖注入学习教程之ClassProvider的使用（三）
这篇文章主要给大家介绍了关于Angular 4依赖注入之ClassProvider使用的相关资料，文中介绍的非常详细，对大家学习或者使用Angular 4具有一定的参考学习价值，需要的朋友可以参考借鉴，下面来一起看看吧。2017-06-06
本篇文章主要介绍了angular4 如何在全局设置路由跳转动画的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
本文主要介绍AngularJS 包含,这里对相关资料做了详细整理,并附代码实例和效果图,有需要的朋友可以看一下2016-07-07
下面小编就为大家分享一篇angular2中使用第三方js库的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
![angular报错can't resolve all parameters for []的解决](http://img.jbzj.com/images/xgimg/bcimg0.png)
最新评论