AngularJS自定义表单验证
<!doctype html>
<html ng-app="myApp">
<head>
<script src="G:\\Source\\Repos\\GWD\\Gridsum.WebDissector.Website.ZC\\Gridsum.WebDissector.Website.ZC\\Pages\\dist\\assets\\lib\\angularjs\\angular.js"></script>
<script type="text/javascript">
var myModule = angular.module('myApp', []);
myModule.controller('MyController', function ($scope, $timeout) {
$scope.master= {};
$scope.update = function(user) {
$scope.master= angular.copy(user);
};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.isUnchanged = function(user) {
return angular.equals(user, $scope.master);
};
$scope.reset();
});
</script>
</head>
<body>
<div ng-controller="MyController">
<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:
<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 /><br />
<div ng-show="!user.agree || !user.agreeSign">Please agree and sign.</div>
<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>
</body>
</html
AngularJS自定义表单验证的更多相关文章
- AngularJS自定义表单验证器
<!doctype html> <html ng-app="myApp"> <head> <script src="G:\\So ...
- layui 自定义表单验证的几个实例
*注:使用本方法请先引入layui依赖的layu.js和layui.css 1.html <input type="text" name="costbudget&q ...
- 基于angularJS的表单验证练习
今天看了一下angularJS的表单验证,看的有点云里雾里(也有可能是雾霾吸多了),于是做了一个小练习来巩固一下. html: <div ng-controller="Aaa" ...
- Angular5+ 自定义表单验证器
Angular5+ 自定义表单验证器 Custom Validators 标签(空格分隔): Angular 首先阐述一下遇到的问题: 怎样实现"再次输入密码"的验证(两个cont ...
- Angular自定义表单验证
前端表单验证 为年龄输入框添加了两个验证,并分情况填写了提示语 <form nz-form [formGroup]="validateForm"> <nz-for ...
- jquery.validate.js使用之自定义表单验证规则
jquery.validate.js使用之自定义表单验证规则,下面列出了一些常用的验证法规则 jquery.validate.js演示查看 jquery validate强大的jquery表单验证插件 ...
- angular4 自定义表单验证Validator
表单的验证条件有时候满足不了需求就可以自定义验证 唯一要求返回是ValidatorFn export interface ValidatorFn{ (c:AbstractControl):Valida ...
- 在AngularJS中实现自定义表单验证
除了一些已经定义好了的验证(例如 必填项.最小长度.最大长度)之外,更常用的,还是需要我们自己定义表单验证,这样才能对于项目中遇到的很多非常规问题给出自己的合适的解决方案. 在表单中控制变量 表单的属 ...
- angularjs的表单验证
angularjs内置了常用的表单验证指令,比如min,require等.下面是演示: <!DOCTYPE html> <html> <head> <meta ...
随机推荐
- Android中开发Service
Service的开发分为两个步骤:定义Service和配置Service1.定义Service定义一个Service子类继承于Service2.配置Service在AndroidManifest.xm ...
- android ids.xml资源的使用
ids.xml文件例子: XML file saved at res/values/ids.xml: 使用方式: 一:
- Android中ListView同过自定义布局并使用SimpleAdapter的方式实现数据的绑定
1.listview的数据填充可以通过ArrayAdapter,SimpleAdapter,也可以是一个xml文件,但是ArrayAdapter与SimpleAdapter的区别是: 2 ArrayA ...
- jQuery效果-滑动
index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
- Linux 常用命令记录
1.查看磁盘空间使用情况 df -[a i m] 或更多 df -lh 2.查看目录文件占用大小 du -sh * du --max-depth=1 -lh 3.内存使用qingkuang free ...
- spring + shiro + cas 实现sso单点登录
sso-shiro-cas spring下使用shiro+cas配置单点登录,多个系统之间的访问,每次只需要登录一次,项目源码 系统模块说明 cas: 单点登录模块,这里直接拿的是cas的项目改了点样 ...
- 最全SpringMVC具体演示样例实战教程
一.SpringMVC基础入门,创建一个HelloWorld程序 1.首先.导入SpringMVC须要的jar包. 2.加入Web.xml配置文件里关于SpringMVC的配置 <!--conf ...
- coco2d-html5制作弹弓射鸟第一部分---橡皮筋
一.写在前面的话 最近在学习cocos2d-html5方面的知识,一直想从事游戏方面的工作,自己也找了好多资料.网上关于cocos2d-html5的教程真的不多,也只有自己摸索,慢慢看示例代码.由于本 ...
- Myeclipse 中添加mysql的jdbc驱动
打开myeclipse后单击菜单栏中的myeclipse——>preferences 然后在Myeclipse Enterprise workbench下的Java Enterprise Pro ...
- FoxOne---一个快速高效的BS框架
FoxOne---一个快速高效的BS框架--(1) FoxOne---一个快速高效的BS框架--(2) FoxOne---一个快速高效的BS框架--(3) FoxOne---一个快速高效的BS框架-- ...