<!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. hibernate 映射<五>多对多双向映射

    多对多映射,可以分单向映射和双向映射.无论是单向还是多向那一方维护,还是双方维护,生成的表结构是一样的. 订单order和产品product是对多对的关系,就是多个订单可以对应多个产品,多个产品也可以 ...

  2. sqlserver的rownum

    oracle: select  rownum from department sqlserver: select   row_number() over (order by id)  from dep ...

  3. 对Primary-backup分布式数据库分布式一致性的猜想

    昨天读了paxos算法,心里对分布式一致性有一些想法:如果是我,应该怎么实现数据库集群的一致性呢? paxos算法本身并没有提到其应用,所以实际使用情况应该较复杂.而我平时接触到使用分布式一致性算法的 ...

  4. 【转】android UI进阶之实现listview中checkbox的多选与记录--不错

    原文网址:http://www.cnblogs.com/notice520/archive/2012/02/17/2355415.html 今天继续和大家分享涉及到listview的内容.在很多时候, ...

  5. ACM2039_三角形三边关系

    #include <iostream> using namespace std; int main(int argc, char* argv[]) { double a,b,c; int ...

  6. linux0.12 链接过程

    终于编译OK了..可链接就是一大堆错误 问题1: boot/head.o: In function `startup_32': (.text+0x10): undefined reference to ...

  7. Servlet的init()方法如何才会在服务器启动时执行

    如果要想让 servlet 的 init () 方法在服务器启动 时就被执行,则需要在 web.xml 中相应的 servlet 下配置 <servlet > <servlet -n ...

  8. flume的自定义sink-Kafka

    1.创建一个agent,sink类型需指定为自定义sink        vi /usr/local/flume/conf/agent3.conf        agent3.sources=as1  ...

  9. FTP服务器上删除文件夹失败

    很多人都知道:要删除FTP服务器上的文件夹时,必须确保文件夹下面没有其他文件,否则会删除失败! 可是,有些服务器考虑到安全等因素,通常会隐藏以点开始的文件名,例如“.test.txt”.于是,有的坏人 ...

  10. [置顶] NO.4 使用预处理器进行调试

    <c++ primer>第四版 p190 ************************************************************************* ...