<!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. Angularjs Scope 原型链

    我们知道scope是可以继承的.scope的继承和js原型链是同一个概念. <div ng-controller="parentCtrl"> {{name}} < ...

  2. 什么是PWM、PFM及VFM

    做电源设计的大都知道PWM和PFM这两个概念.而VFM模式是在大功率輸出時為PWM模式在輕負載輸出時變為PFM模式的一種混合開關模式.目前开关电源的控制技术主要就是这三种:1.脉冲宽度调制器(PWM) ...

  3. Xamarin.Forms DataGrid

    控件出处 https://components.xamarin.com/ https://components.xamarin.com/gettingstarted/ZumeroDataGrid/tr ...

  4. poj3177 Redundant Paths

    Description In order to get from one of the F (1 <= F <= 5,000) grazing fields (which are numb ...

  5. 高性能Web服务器Nginx及相关新技术的应用实践-张宴

    http://files.cnblogs.com/files/niaowo/%E9%AB%98%E6%80%A7%E8%83%BDWeb%E6%9C%8D%E5%8A%A1%E5%99%A8Nginx ...

  6. windows 删除服务命令

    在dos窗口下执行 sc delete  服务名( 例如 mysql) C:\Program Files\MySQL\MySQL Server 5.6\

  7. 2016-05-I

    2016 年上半年软件设计师上午真题 1. VLIW 是( )的简称.A．复杂指令系统计算机 B．超大规模集成电路C．单指令流多数据流 D．超长指令字 2.主存与 Cache 的地址映射方式中,( ) ...

  8. 2.x最终照着教程，成功使用OpenGL ES 绘制纹理贴图，添加了灰度图

    在之前成功绘制变色的几何图形之后,今天利用Openg ES的可编程管线绘制出第一张纹理. 学校时候不知道OpenGL的重要性,怕晦涩的语法.没有跟老师学习OpenGL的环境配置,现在仅仅能利用coco ...

  9. Win8.1OS64位oracle11安装配置及PL/SQL Developer怎样连接64位oracle

    Oracle 为什么选择oracle 1.oracle可以在主流的平台上执行,而相对于sql server仅仅支持windows,而windows在wr手里攥着呢,所以你懂的.在安全性上来讲,非常多地 ...

  10. java 不同意同一账户不同IP 同一时候登录系统解决的方法 兼容IE Firefox

    需求就是 不同意同一个账户同一时间登录系统.仅仅要有一个账户在线其它人就是不能用这个账户. 功能非常easy,过程非常纠结 . 这篇文章攻克了兼容IE.Firefox 浏览器下,不同IP 地址 同一用 ...