快捷導(dǎo)航

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

更新時(shí)間：2016年12月28日 09:34:33 作者：justforuse

這篇文章主要介紹了Angular使用ng-messages與PHP進(jìn)行表單數(shù)據(jù)驗(yàn)證，ng-messages提供了更方便的表單數(shù)據(jù)驗(yàn)證服務(wù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

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

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

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

            //設(shè)置表單狀態(tài)，屬性統(tǒng)一歸于signup_form.username.$error中，這是為設(shè)置是否合法狀態(tài)，所以如果設(shè)置為false，則會(huì)在ng-messages中顯示，因?yàn)樗{(diào)用的是$error方法，意為是否“不合法”，原文有錯(cuò)誤。
            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元素中，應(yīng)該放在input元素中 -->
      <input type="text" name="username" ng-model="signup.username" required ng-min-length=3 ng-max-length=10 ensure-unique="check.php">
      <!-- 輸入過(guò)才顯示操作信息 -->
      <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ù)類(lèi)型不同，不能直接使用$.POST['username']獲取;
  $postData = file_get_contents('php://input', true); 
  $obj=json_decode($postData);

  //這里模擬唯一性驗(yàn)證
  if($obj->username == '123'){
    echo "exist";
  }
  else{
    echo "available";
  }
?>

效果：