AngularJS 表单和输入验证
来源:互联网 发布:手机淘宝怎么上二楼 编辑:程序博客网 时间:2024/04/27 21:44
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 才显示。
属性
描述
$dirty
表单有填写记录
$valid
字段内容合法的
$invalid
字段内容是非法的
$pristine
表单没有填写记录
没用初始值的输入验证:注意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,否则返回falsereturn 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>
0 0
- AngularJS表单和输入验证
- AngularJS 表单和输入验证
- AngularJS 入门4-表单和验证
- angularJs -- 简单表单验证
- 表单验证<AngularJs>
- AngularJS表单验证
- AngularJs表单验证
- AngularJS 的表单验证
- AngularJS 的表单验证
- AngularJS 表单验证
- 表单验证<AngularJs>
- angularjs自定义表单验证
- Angularjs表单验证demo
- Angularjs自定义表单验证
- 表单验证<AngularJs>
- AngularJS表单验证
- 表单验证<AngularJs>
- angularjs 表单验证
- 前端得到Select信息
- MySQL Replication(Master与Slave基本原理及配置)
- nginx+keepalive实现高可用负载均衡
- Android RecyclerView+item动画+下拉刷新,上拉加载更多,侧滑删除(易用可定制)
- 2016MUTC3-1003 Life Winner Bo
- AngularJS 表单和输入验证
- hdu5744简单模拟
- hdu1011(树形dp)
- 教你如何阅读Oracle数据库官方文档
- POJ -1753 Flip Game
- IOS AppStore内付费教程
- [LeetCode] 59. Spiral Matrix II
- 学习总结20160726
- 关于编程比较好的一些书