php表单 message,Angular使用ng-messages与PHP进行表单数据验证

Angular中的ng-messages提供了更方便的表单数据验证服务。

本文代码主要基于《AngularJS权威教程》中关于ng-messages模块的说明，但原文中不乏错误以及没有后台代码和示例，所以简单的实现其功能。//别的地方也有错误，我一度怀疑我买了盗版书==

比如我们想与后台进行表单数据合法性验证并给出输入操作提示

HTML代码：

Document

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: ""

}

})

Required!!!

Checking...

Has been taken, please choose another.

Submit

{{signup_form.username.$error}}

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";

}

?>

效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。