使用angularjs进行json输入验证

发布时间：2020-12-17 07:16:17 所属栏目：安全来源：网络整理

导读：我想验证 JSON输入.我知道它可以用自定义指令完成,但我不能自己编写它.现在我试图用ng-change来做. 我的HTML： div class="row" div class="form-group col-xs-12" labelCustom data:/label textarea class="form-control" rows="10" name="customData" ng-m

我想验证 JSON输入.我知道它可以用自定义指令完成,但我不能自己编写它.现在我试图用ng-change来做.

我的HTML：

<div class="row">
    <div class="form-group col-xs-12">
         <label>Custom data:</label>
         <textarea class="form-control" rows="10" name="customData" ng-model="application.customDataString" ng-change="validateJSON()"></textarea>
    </div>
 </div>

我的剧本

$scope.validateJSON = function () {
        try {
            JSON.parse($scope.application.customDataString);
        } catch (e) {
            $scope.applicationForm.customData.$setValidity = false;
        }
        return true;
}

但我收到一个错误：无法读取未定义的属性’$setValidity’

解决方法

检查一下

var app = angular.module('myApp',[]);
    app.controller('mainCtrl',function($scope) {

      $scope.application = {
        customDataString: ""
      };

      $scope.validateJSON = function() {

        try {
          JSON.parse($scope.application.customDataString);
          $scope.myForm.customData.$valid = true;
          // or
          // myForm.customData.$setValidity('valid',true);
        } catch (e) {
          $scope.myForm.customData.$valid = false;
           // or
           // myForm.customData.$setValidity('valid',false);
        }
        return true;
      }

    })

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <script data-require="angular.js@1.6.5" data-semver="1.6.5" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="mainCtrl">

  <div class="row" name="myForm" ng-form>
    <div class="form-group col-xs-12">
      <label>Custom data:</label>
      <textarea class="form-control" rows="10" name="customData" ng-form ng-model="application.customDataString" ng-change="validateJSON(myForm)"></textarea>
    </div>
  </div>
  <br>
  IS JSON VALID: {{myForm.customData.$valid}}
</body>

</html>

也检查这个plunker.使用ng-form https://plnkr.co/edit/0BFO08fYU0op6z2W9Vh4?p=preview

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!