欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-05-12 13:25:24
angular中的ng-messages提供了更方便的表单数据验证服务。 本文代码主要基于《angularjs权威教程》中关于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) {


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

效果：

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

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

上一篇： ps怎么绘制九宫格的图形?

下一篇： AngularJS实现网站换肤实例

推荐阅读