Home >php教程 >PHP开发 >AngularJS form and input validation examples

AngularJS form and input validation examples

高洛峰Original: 2016-12-08 10:14:311164browse

AngularJS forms and controls can provide validation functions and warn users of illegal data entered.

Note: Client-side verification cannot ensure the security of user input data, so server-side data verification is also necessary.

1. HTML controls

The following HTML input elements are called HTML controls: input element, select element, button element, textarea element.

2. HTML form

AngularJS form is a collection of input controls. HTML forms often exist alongside HTML controls.

<!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. Input validation

AngularJS forms and controls can provide validation functions and warn users of illegal data entered. Client-side verification cannot ensure the security of user input data, so server-side data verification is also necessary.

<!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 directive is used to bind input elements to the model. The model object has two properties: user and email. We used the ng-show directive, and color:red is only displayed when the email is $dirty or $invalid.

AngularJS form and input validation examples

Input verification without initial value: note ng-app="", if ng-app has a value, it must be connected to the code module, and use the angular.module function to create the 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-disabled instance

<!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-submit instance

<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, maxlength and minlength examples

<!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-class instance

   
<!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 form and input validation examples

8, ng-if instance

<!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>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of AngularJS directive usageNext article：Detailed explanation of AngularJS directive usage

See more

AngularJS form and input validation examples

Related articles