AngularJS 양식 및 입력 유효성 검사 예-PHP开发-php.cn

AngularJS 양식 및 컨트롤은 유효성 검사 기능을 제공하고 불법적으로 입력된 데이터에 대해 사용자에게 경고할 수 있습니다.

참고: 클라이언트측 검증은 사용자 입력 데이터의 보안을 보장할 수 없으므로 서버측 데이터 검증도 필요합니다.

1. HTML 컨트롤

입력 요소, 선택 요소, 버튼 요소, 텍스트 영역 요소 등 HTML 입력 요소를 HTML 컨트롤이라고 합니다.

2. HTML 양식

AngularJS 양식은 입력 컨트롤의 모음입니다. HTML 양식은 HTML 컨트롤과 함께 존재하는 경우가 많습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>angularJs</title>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="formCtrl">
 <form novalidate>
  First Name:<br>
  <input type="text" ng-model="user.firstName"><br>
  Last Name:<br>
  <input type="text" ng-model="user.lastName">
  <br><br>
  <button ng-click="reset()">RESET</button>
 </form>
 <p>form = {{user }}</p>
 <p>master = {{master}}</p>
</div>
<script>
var app = angular.module(&#39;myApp&#39;, []);
app.controller(&#39;formCtrl&#39;, function($scope) {
  $scope.master = {firstName:"John", lastName:"Doe"};
  $scope.reset = function() {
    $scope.user = angular.copy($scope.master);
  };
  $scope.reset();
});
</script>
</body>
</html>

로그인 후 복사

3. 입력 유효성 검사

AngularJS 양식 및 컨트롤은 유효성 검사 기능을 제공할 수 있습니다. 입력된 불법 데이터에 대해 사용자에게 경고합니다. 클라이언트측 검증으로는 사용자 입력 데이터의 보안을 보장할 수 없으므로 서버측 데이터 검증도 필요합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>angularJs</title>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h2>验证实例</h2>
<form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate>
<p>用户名:
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">用户名是必须的。</span>
</span>
</p>
<p>邮  箱:
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">邮箱是必须的。</span>
<span ng-show="myForm.email.$error.email">非法的邮箱地址。</span>
</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid || 
myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
<script>
var app = angular.module(&#39;myApp&#39;, []);
app.controller(&#39;validateCtrl&#39;, function($scope) {
  $scope.user = &#39;John Doe&#39;;
  $scope.email = &#39;john.doe@gmail.com&#39;;
});
</script>
</body>
</html>

로그인 후 복사

AngularJS ng-model 지시문은 입력 요소를 모델에 바인딩하는 데 사용됩니다. 모델 객체에는 사용자와 이메일이라는 두 가지 속성이 있습니다. 우리는 ng-show 지시문을 사용했으며 color:red는 이메일이 $dirty 또는 $invalid인 경우에만 표시됩니다.

AngularJS 양식 및 입력 유효성 검사 예

초기값 없이 입력 확인: ng-app="" 참고, ng-app에 값이 있는 경우 다음을 사용하여 코드 모듈에 연결해야 합니다. 모듈을 생성하는 angle.module 함수.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>angularJs</title>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h2>验证实例</h2>
<form ng-app="" name="myForm" novalidate>
<p>用户名:
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">用户名是必须的。</span>
</span>
</p>
<p>邮  箱:
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">邮箱是必须的。</span>
<span ng-show="myForm.email.$error.email">非法的邮箱地址。</span>
</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid || 
myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
</body>
</html>

로그인 후 복사

4.ng 비활성화된 인스턴스

<!doctype html>
<html ng-app="MyApp">
  <head>
    <script src="js/angular.min.js"></script>
  </head>
  <body>
    <div ng-controller="Controller">
      <form name="form" class="css-form" novalidate>
        Name:
        <input type="text" ng-model="user.name" name="uName" required /><br/>
        E-mail:
        <input type="email" ng-model="user.email" name="uEmail" required /><br/>
        <div ng-show="form.uEmail.$dirty && form.uEmail.$invalid">
          Invalid:
          <span ng-show="form.uEmail.$error.required">Tell us your email.</span>
          <span ng-show="form.uEmail.$error.email">This is not a valid email.</span>
        </div>
        Gender:<br/>
        <input type="radio" ng-model="user.gender" value="male" />
        male
        <input type="radio" ng-model="user.gender" value="female" />
        female<br/>
        <input type="checkbox" ng-model="user.agree" name="userAgree" required />
        I agree:
        <input ng-show="user.agree" type="text" ng-model="user.agreeSign" required />
        <div ng-show="!user.agree || !user.agreeSign">
          Please agree and sign.
        </div>
        <br/>
        <!--ng-disabled为true时禁止使用，ng-disabled实时监控应用程序-->
        <button ng-click="reset()" ng-disabled="isUnchanged(user)">
          RESET
        </button>
        <button ng-click="update(user)" ng-disabled="form.$invalid || isUnchanged(user)">
          SAVE
        </button>
      </form>
    </div>
  <script type="text/javascript">
    var app=angular.module("MyApp",[]);
    app.controller("Controller",function($scope){
      $scope.master = {};
      $scope.update=function(user){
        $scope.master=$scope.copy(user);
      };
      $scope.reset=function(){
        $scope.user=angular.copy($scope.master);
      };
      $scope.isUnchanged=function(user){
        //判断user和$scope.master是否相等，相等返回true，否则返回false
        return angular.equals(user,$scope.master);
      };
      $scope.reset();
    });
  </script>
  </body>
</html>

로그인 후 복사

5.ng-제출 인스턴스

<html ng-app=&#39;TestFormModule&#39;>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script src="js/angular.min.js"></script>
  </head>
  <body><!--ng-submit绑定表单提交事件-->
    <form name="myForm" ng-submit="save()" ng-controller="TestFormModule">
       <input name="userName" type="text" ng-model="user.userName" required/>
       <input name="password" type="password" ng-model="user.password" required/><br />
       <input type="submit" ng-disabled="myForm.$invalid"/>
    </form>
  </body>
  <script type="text/javascript">
    var app=angular.module("TestFormModule",[]);
    app.controller("TestFormModule",function($scope){
      $scope.user={
        userName:"山水子农",
        password:&#39;&#39;
      };
      $scope.save=function(){
        console.log("保存数据中...");
      }
    });
  </script>
</html>

로그인 후 복사

6. 최소 길이 인스턴스

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script src="js/angular.js" type="text/javascript" charset="utf-8"></script>
    <title>表单验证</title>
  </head>
  <body ng-app="myApp" >
  <div ng-controller="myCtrl">
  <form name="form">
   <label for="maxlength">Set a maxlength: </label>
   <input type="number" ng-model="maxlength" id="maxlength" /><br>
   <label for="minlength">Set a minlength: </label>
   <input type="number" ng-model="minlength" id="minlength" /><br><hr>
   <label for="input">This input is restricted by the current maxlength and minlength: </label><br>
   <input type="text" ng-model="textmodel" id="text" name="text" ng-maxlength="maxlength" ng-minlength="minlength"/><br>
   text input valid? = <code>{{form.text.$valid}}</code><br>
   text model = <code>{{textmodel}}</code><br><hr>
   <label for="input">This input is restricted by the current maxlength and minlength: </label><br>
   <input type="number" ng-model="numbermodel" id="number" name="number" ng-maxlength="maxlength" ng-minlength="minlength"/><br>
   number input valid? = <code>{{form.number.$valid}}</code><br>
   number model = <code>{{numbermodel}}</code>
  </form>
  </div>  
  <script type="text/javascript">
    var app=angular.module("myApp",[]);
    app.controller("myCtrl",function($scope){
      $scope.maxlength=8;
      $scope.minlength=4;
    });
  </script>
  </body>
</html>

로그인 후 복사

7.ng 클래스 인스턴스

   
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script src="js/angular.js" type="text/javascript" charset="utf-8"></script>
    <title>表单验证</title>
    <style type="text/css">
    .deleted {
     text-decoration: line-through;
    }
    .bold {
     font-weight: bold;
    }
    .red {
     color: red;
    }
    .error {
     color: red;
     background-color: yellow;
    }
    .base-class {
     transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
    }
    .base-class.my-class {
     color: red;
     font-size:3em;
    }
    </style>
  </head>
  <body ng-app="myApp" >
  <div ng-controller="myCtrl">
  <form name="form">
    <p ng-class="{deleted: deleted, bold: bold, &#39;error&#39;: error}">Map Syntax Example</p>
    <label><input type="checkbox" ng-model="deleted">deleted (apply "deleted" class)</label><br>
    <label><input type="checkbox" ng-model="bold">bold (apply "bold" class)</label><br>
    <label><input type="checkbox" ng-model="error">error (apply "error" class)</label>
    <hr>
    <input id="setbtn" type="button" value="set" ng-click="myVar=&#39;my-class&#39;">
    <input id="clearbtn" type="button" value="clear" ng-click="myVar=&#39;&#39;">
    <br>
    <span class="base-class" ng-class="myVar">Sample Text</span>
  </form>
  </div>  
  <script type="text/javascript">
    var app=angular.module("myApp",[]);
    app.controller("myCtrl",function($scope){
    });
  </script>
  </body>
</html><strong>
</strong>

로그인 후 복사

AngularJS 양식 및 입력 유효성 검사 예

8.ng-if 인스턴스

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script src="js/angular.js" type="text/javascript" charset="utf-8"></script>
    <title>表单验证</title>
    <style>
    .animate-if {
     width:400px;
     border:2px solid yellowgreen;
     border-radius: 10px;
     padding:10px;
     display: block;
    } 
    </style>
  </head>
  <body ng-app="myApp" >
  <div ng-controller="myCtrl">
  <form name="form">
    <label>Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /></label><br/>
    Show when checked:
    <span ng-if="checked" class="animate-if">
    This is removed when the checkbox is unchecked.
    </span>
  </form>
  </div>  
  <script type="text/javascript">
    var app=angular.module("myApp",[]);
    app.controller("myCtrl",function($scope){
    });
  </script>
  </body>
</html>

로그인 후 복사