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 ...
随机推荐
- 用存储过程生成订单号ID
DECLARE @sonumber BIGINTSELECT @sonumber=CONVERT(BIGINT, @serverId + Substring(CONVERT(VARCHAR(4), D ...
- Iterator pattern（c++实现）
概述: 在现在的电视机中,我们使用[后一个]和[前一个]按钮可以很方便的换台,当按下[后一个]按钮时,将切换到下一个预置的频道.想象一下在陌生的城市中的旅店中看电视.当改变频道时,重要的不是几频道,而 ...
- libvirtsAPI
mongodb远程服务器连接 mongo -uroot -p321 master.puppet.org:27017/admin
- 关闭myeclipse中jsp的校验功能
window--->preference--->Myeclipse--->Validation,取消下图红框中的选中状态.
- React Native 初识
Facebook 在 React.js Conf 2015 大会上推出了基于 JavaScript 的开源框架 React Native,本中文教程翻译自 React Native 官方文档. Rea ...
- 带有中文的url和NSString中文的转换
NSString *url = @"http://tw.news.yahoo.com/麵包魂東京吸睛-粉絲包圍導演-061222049.html"; NSLog(@"ur ...
- Javascript:数组和字符串的相互转化
中午吃饭的时候,和室友讨论前端的问题,然后一个有趣的问题被抛出来: javascript用什么方法可以把“hello world”位置反转输出,即输出:"dlrow olleh"? ...
- window+Apache 配置虚拟主机(2)
1. 打开虚拟主机功能 2. 设置虚拟主机相应的文件夹 3. 将虚拟的域名绑定到127.0.0.1 4. 结果图: 记忆一下,突然感觉都忘记了!
- struts2操作数据库
struts2操作数据库是刚開始学习的人的一个难点也是一个重点,如今我为大家解说一下struts2操作数据库,使用struts2对数据库进行增.删.改.查和分页查询,请看以下的代码: User类 pu ...
- 常用渗透性测试工具(Tools for penetration testing)
常用渗透性测试工具 原文:http://hi.baidu.com/limpid/item/14a2df166adfa8cb38cb3068 对一个应用项目进行渗透性测试一般要经过三个步骤. 第一步, ...