Angular使用ng-messages與PHP進行表單數(shù)據(jù)驗證

2019-11-19 18:13:44

字體：大中小

供稿：網(wǎng)友

Angular中的ng-messages提供了更方便的表單數(shù)據(jù)驗證服務。

本文代碼主要基于《AngularJS權威教程》中關于ng-messages模塊的說明，但原文中不乏錯誤以及沒有后臺代碼和示例，所以簡單的實現(xiàn)其功能。//別的地方也有錯誤，我一度懷疑我買了盜版書==

比如我們想與后臺進行表單數(shù)據(jù)合法性驗證并給出輸入操作提示

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，這里統(tǒng)一使用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;            }            //設置表單狀態(tài)，屬性統(tǒng)一歸于signup_form.username.$error中，這是為設置是否合法狀態(tài)，所以如果設置為false，則會在ng-messages中顯示，因為它調(diào)用的是$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傳遞參數(shù)類型不同，不能直接使用$.POST['username']獲取;  $postData = file_get_contents('php://input', true);   $obj=json_decode($postData);  //這里模擬唯一性驗證  if($obj->username == '123'){    echo "exist";  }  else{    echo "available";  }?>

效果：