<!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自定义表单验证的更多相关文章

  1. AngularJS自定义表单验证器

    <!doctype html> <html ng-app="myApp"> <head> <script src="G:\\So ...

  2. layui 自定义表单验证的几个实例

    *注:使用本方法请先引入layui依赖的layu.js和layui.css 1.html <input type="text" name="costbudget&q ...

  3. 基于angularJS的表单验证练习

    今天看了一下angularJS的表单验证,看的有点云里雾里(也有可能是雾霾吸多了),于是做了一个小练习来巩固一下. html: <div ng-controller="Aaa" ...

  4. Angular5+ 自定义表单验证器

    Angular5+ 自定义表单验证器 Custom Validators 标签(空格分隔): Angular 首先阐述一下遇到的问题: 怎样实现"再次输入密码"的验证(两个cont ...

  5. Angular自定义表单验证

    前端表单验证 为年龄输入框添加了两个验证,并分情况填写了提示语 <form nz-form [formGroup]="validateForm"> <nz-for ...

  6. jquery.validate.js使用之自定义表单验证规则

    jquery.validate.js使用之自定义表单验证规则,下面列出了一些常用的验证法规则 jquery.validate.js演示查看 jquery validate强大的jquery表单验证插件 ...

  7. angular4 自定义表单验证Validator

    表单的验证条件有时候满足不了需求就可以自定义验证 唯一要求返回是ValidatorFn export interface ValidatorFn{ (c:AbstractControl):Valida ...

  8. 在AngularJS中实现自定义表单验证

    除了一些已经定义好了的验证(例如 必填项.最小长度.最大长度)之外,更常用的,还是需要我们自己定义表单验证,这样才能对于项目中遇到的很多非常规问题给出自己的合适的解决方案. 在表单中控制变量 表单的属 ...

  9. angularjs的表单验证

    angularjs内置了常用的表单验证指令,比如min,require等.下面是演示: <!DOCTYPE html> <html> <head> <meta ...

随机推荐

  1. Linux/CentOS下的CST和UTC时间的区别以及不一致的解决方法

    今天被我遇到了,相差八小时,,,tzselect过了都不行,还得用ntupdate核一下. 网上找的,备不时之需要. ~~~~~~~~~~~~~~~~ 1.在linux中,用date查看时间的时候显示 ...

  2. COJ 0500 杨老师的路径规划（MST）最小生成树

    杨老师的路径规划(MST) 难度级别:B: 运行时间限制:1000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述 为满足同学们需求,杨老师在实验楼4层新建了好多个计算 ...

  3. .OCX、.dll文件注册命令Regsvr32的使用

    1.打开文件,打开需要注册的OCX文件或dll文件,2.然后根据需要进行OCX文件或DLL文件的注册和反注册 DLL.OCX注册方法--文件Regsvr32用法及情况介绍 使用过activex的人都知 ...

  4. Sum

    Problem Description XXX is puzzled with the question below: 1, 2, 3, ..., n (1<=n<=400000) are ...

  5. HDOJ 1323 Perfection（简单题）

    Problem Description From the article Number Theory in the 1994 Microsoft Encarta: "If a, b, c a ...

  6. HDU3727--Jewel (主席树 静态区间第k大)

    Jewel Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...

  7. arrayPointer

    1,分别使用指针加减 int wages[2] = {100000000,20000000}; int *pw = wages or int *pw = &wages[0] 表示指针指向数组的 ...

  8. 查询死锁和处理死锁(SqlServer)

    -------------------查询死锁,极其引起的原因-------------------------------use master go create procedure sp_who_ ...

  9. Eclipse设置保存时自动给变量加final

    也是针对checkstyle的,在代码检查规范时,所有的变量必须是final.为了解决这个问题,通过以下的设置可以在eclipse保存时,自动给没有加final的变量加上final. Window-& ...

  10. JavaScript新手学习笔记3——三种排序方式（冒泡排序、插入排序、快速排序）

    每种编程语言学到数组的时候,都会讲到排序算法,当时学C语言的时候,卡在排序算法.今天来总结一下javascript中如何实现三种排序算法. 1.冒泡排序(默认升序排列哦) 原理: 冒泡排序的原理,顾名 ...