<!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. 系统共享内存的修改（ORA-27102: out of memory）

    http://ccchencheng.blog.51cto.com/2419062/738188 http://blog.csdn.net/leshami/article/details/874602 ...

  2. RUBY的类封装，继承，多态简单演示

    class Person def initialize(name,age=18) @name=name @age=age @motherland="China" end def t ...

  3. 在keil中使用printf()函数的要点

    在keil中printf默认是向串口中发送数据的,所以,如果应用该函数,必须先初始化串口,否则可能引起死机的情况,并且在printf之前应该先将TI置位,摘抄原因如下: 1.printf函数是调用pu ...

  4. Yii 引入 js和css

    //向控制器指定的页面注册新的css文件 Yii::app()->clientScript->registerCssFile(Yii::app()->baseUrl.'/css/my ...

  5. mysql redo log

    mysql> show variables like '%innodb_log_file_size%'; +----------------------+-----------+ | Varia ...

  6. perl 安装AnyEvent::HTTP

    perl 版本 ActivePerl_5.16.2.msi

  7. BZOJ1640: [Usaco2007 Nov]Best Cow Line 队列变换

    1640: [Usaco2007 Nov]Best Cow Line 队列变换 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 493  Solved: 2 ...

  8. 解耦——Hybrid H5跨平台性思考

    跨平台,是HTML5最重要的能力之一.而Hybrid H5因强依赖于具体App,往往不具有跨平台性.这时,将强依赖关系解耦,即可恢复HTML5的跨平台能力.近期我负责手Q红包打赏项目的前端开发,因项目 ...

  9. vue + vuex 表单处理

    使用场景:在一个表单中,各项数据提交后需要重置表单中各<input>元素的值为空. 组件中关联: <template> <el-form ref="form&q ...

  10. json对象转字符串与json字符串转对象

    1.概述: 我们在编程时进场会遇到json对象转字符串,或者字符串转对象的情况. 2.解决办法: json.parse()方法是将json字符串转成json对象. json.stringfy()方法是 ...