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

AngularJS表单和输入验证实例

程序员文章站 2022-06-02 10:31:48
angularjs 表单和控件可以提供验证功能,并对用户输入的非法数据进行警告。 注意:客户端的验证不能确保用户输入数据的安全,所以服务端的数据验证也是必须的。 1...

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> 

AngularJS表单和输入验证实例

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表单和输入验证实例

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

没用初始值的输入验证:注意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> 

AngularJS表单和输入验证实例

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> 

AngularJS表单和输入验证实例

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> 

AngularJS表单和输入验证实例

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> 

AngularJS表单和输入验证实例

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> 

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> 

AngularJS表单和输入验证实例

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