当前位置： 移动技术网 > IT编程>脚本编程>AngularJs > AngularJS表单和输入验证实例

AngularJS表单和输入验证实例

2018年05月08日  | 移动技术网IT编程  | 我要评论

angularjs 表单和控件可以提供验证功能，并对用户输入的非法数据进行警告。

注意：客户端的验证不能确保用户输入数据的安全，所以服务端的数据验证也是必须的。

1、html 控件

以下 html input 元素被称为 html 控件:input 元素、select 元素、button 元素、textarea 元素。

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('myapp', []); 
app.controller('formctrl', 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('myapp', []); 
app.controller('validatectrl', function($scope) { 
  $scope.user = 'john doe'; 
  $scope.email = 'john.doe@gmail.com'; 
}); 
</script> 
</body> 
</html>

angularjs ng-model 指令用于绑定输入元素到模型中。模型对象有两个属性： user 和 email。我们使用了 ng-show指令，color:red 在邮件是 $dirty 或 $invalid 才显示。

没用初始值的输入验证：注意ng-app=""，ng-app有值就必须连接到代码模块，利用angular.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实例

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

<html ng-app='testformmodule'> 
  <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:'' 
      }; 
      $scope.save=function(){ 
        console.log("保存数据中..."); 
      } 
    }); 
  </script> 
</html>

6、maxlength和minlength实例

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

<!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, 'error': 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='my-class'"> 
    <input id="clearbtn" type="button" value="clear" ng-click="myvar=''"> 
    <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>

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>

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网