<!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. 布置第一个JBOSS服务器

    还是要通过实践慢慢积累感觉.. SERVLET的制作,JAVAC的编译... package com.manning.jbia.intro; import java.io.IOException; i ...

  2. Android中的ContentValues用法

    ContentValues 和HashTable类似都是一种存储的机制 但是两者最大的区别就在于,contenvalues只能存储基本类型的数据,像string,int之类的,不能存储对象这种东西,而 ...

  3. 【HDOJ】3518 Boring Counting

    后缀数组2倍增可解. #include <cstdio> #include <cstring> #include <cstdlib> #define MAXN 10 ...

  4. head,tail,cat,more,less

    tail FILE -n 4,查看文件最后4行内容head FILE -n 10,查看文件最前4行内容 使用cat more less都可以查看文本内容,但是它们三者有什么区别呢?more和less的 ...

  5. MSSQL 标准PROC 写法

    MSSQL 标准PROC 写法 ALTER PROC [dbo].[usp_ADM_InsertFlowSortInfo]@FlowSortName NVARCHAR(50),AS/*PAGE: 分类 ...

  6. HDU_2048——全错位排列递推公式

    Problem Description HDU 2006'10 ACM contest的颁奖晚会隆重开始了! 为了活跃气氛,组织者举行了一个别开生面.奖品丰厚的抽奖活动,这个活动的具体要求是这样的:首 ...

  7. DPDK2.1开发者手册4-7

    Mempool Labrary 一个内存池(memory pool)就是固定大小对象的分配器.在dpdk中,它是通过名字来标示唯一性的,且使用环形队列来保存没有使用的空闲对象.它提供了一些可选项服务例 ...

  8. Tomcat类加载器

    1JVM类加载机制   JVM的ClassLoader通过Parent属性定义父子关系,可以形成树状结构.其中引导类.扩展类.系统类三个加载器是JVM内置的. 它们的作用分别是: 1)引导类加载器:使 ...

  9. Power(int base, int exponent) 函数实现

    这个是个高效的算法,时间复杂度为 O(logn) 原理: a的n次方: #include<iostream> #include<cmath> using namespace s ...

  10. 转载：mybatis和hibernate 解析

    第一章     Hibernate与MyBatis Hibernate 是当前最流行的O/R mapping框架,它出身于sf.net,现在已经成为Jboss的一部分. Mybatis 是另外一种优秀 ...