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，這里統(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中顯示，因為它調用的是$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";
  }
?>

效果：