Angular中的ng-messages提供了更方便的表单数据验证服务。
本文代码主要基于《AngularJS权威教程》中关于ng-messages模块的说明,但原文中不乏错误以及没有后台代码和示例,所以简单的实现其功能。//别的地方也有错误,我一度怀疑我买了盗版书==
比如我们想与后台进行表单数据合法性验证并给出输入操作提示
HTML代码:
Documentangular.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";
}
?>
效果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。