Angular使用ng-messages与PHP进行表单数据验证

作者: CF虐菜高手
来源: 51数据库
2021-08-03

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) {


          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: ""
      }
    })
  </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";
  }
?>

效果：

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