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源代码
. 找到Android SDK所在路径 “D:\androidDev\android-sdk-windows\” . 在该目录下选择platforms到 “D:\androidDev\android- ...
- Vim--写在开始
这是Vim的学习记录,结合Vim使用技巧一书.
- HDU-1428（记忆化搜索）
Problem Description LL 最近沉迷于AC不能自拔,每天寝室.机房两点一线.由于长时间坐在电脑边,缺乏运动.他决定充分利用每次从寝室到机房的时间,在校园里散散步.整个HDU 校园呈方 ...
- vimrc 留备份
set encoding=UTF-8 "encode with UTF-8"set backspace=2set nusyn onset ai!syntax enablesynta ...
- Highcharts 带有数据标签曲线图表
<html> <head> <meta charset="UTF-8" /> <title>Highcharts</title ...
- StoryBoard页面联线跳转已经页面之间传参数
1.选中上图黄色.按住Control 把线拖到要要跳转的页面,寻找show. 2.选中联线.在右边Identifier:随便填入一个标示 3.在按钮点击事件加上如下代码 - (IBAction)but ...
- security Export/import
export [-k keychain] [-t type] [-f format] [-w] [-p format] [-P passphrase] [-o outfile] Export one ...
- 你需要知道的九大排序算法【Python实现】之基数排序
八.基数排序 基本思想:基数排序(radix sort)属于"分配式排序"(distribution sort),又称"桶子法"(bucket sort)或bi ...
- java Date获取 年月日时分秒
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...
- 【转】Linux中安装Resin
安装步骤: Ø 安装resin前先要保证安装了JDK,可以用命令查看是否安装了JDK: [root@wxr webapps]# java -versions java version " ...