Angular使用ng-messages与PHP进行表单数据验证       这篇文章主要介绍了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) {

 //设置表单状态，属性统一归于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 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代码：

 //Angular与jQuery传递参数类型不同，不能直接使用$.POST['username']获取;
 $postData = file_get_contents('php://input', true); 
 $obj=json_decode($postData);
 //这里模拟唯一性验证
 if($obj- username == '123'){
 echo "exist";
 else{
 echo "available";

效果：

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

 

              
              

                
上一篇：广州凡科互联网科技股份有限公司招聘销售顾问 
                
下一篇：没有了