AngularJS表单验证开发案例

angular支持IE8+浏览器，虽然性能很好，但是目前只适用于手机端项目

知识点：
域$scope
AngularJS基础指令
指令实现不同的功能
学习思路和方法

<link rel="stylesheet" href="lib/css/bootstrap.min.css"/>

<body ng-app="myApp" ng-controller="MainController">

angular.module('myApp', [])

    .controller('MainController', function ($scope) {

        $scope.submitForm = function () {

            console.log('表单提交了');

        };

    });

/***********************************/

<input class="form-control" type="text" ng-model="name" ng-minlength="4" ng-maxlength="10"/>

<div class="red">{{name}}</div>

<div>{{name}}</div>

<div>{{name}}</div>

<div>{{name}}</div>

<div>{{name}}</div>

<div>{{name}}</div>

<div>{{name}}</div>

/*******************************/

<form name="signUpForm" ng-submit="submitForm()">

    <div class="form-group">

        <label>用户名：</label>

        <input type="text"

               name="username"

               ng-model="username"

               ng-class="{'error': signUpForm.username.$invalid}"

               required

               ng-minlength="4"

               class="form-control"

        />

        <div>{{username}}</div>

        <div ng-if="signUpForm.username.$invalid &&

                    signUpForm.username.$touched">您输入的有误差</div>

        <div ng-if="signUpForm.username.$valid" class="correct">

            恭喜输入正确

        </div>

    </div>

</form>

/******************************/

<form name="signUpForm" ng-submit="submitForm()">

    <div class="form-group">

        <label>用户名：</label>

        <input type="text"

               name="username"

               ng-model="username"

               ng-class="{'error': signUpForm.username.$invalid}"

               required

               ng-minlength="4"

               class="form-control"

        />

        <input type="text"

               name="username2"

               ng-model="username2"

               class="form-control"

               ng-disabled="signUpForm.username.$valid"

        />

        <button class="btn btn-primary" ng-disabled="signUpForm.$invalid">提交</button>

    </div>

</form>

/**********************************/

    <style>

        .wrapper {

            width: 200px;

            margin: 30px auto;

        }

    </style>

</head>

<body ng-app="myApp" ng-controller="MainController">

<div class="wrapper">

    <h2>注册</h2>

    <form>

        <div class="form-group">

            <label>用户名：</label>

            <input type="text" name="username" class="form-control"/>

        </div>

        <div class="form-group">

            <label>密码：</label>

            <input type="password" name="password" class="form-control"/>

        </div>

        <div class="form-group">

            <label>确认密码：</label>

            <input type="password" name="password2" class="form-control"/>

        </div>

    </form>

</div>

/****************************/

<link rel="stylesheet" href="font-awesome-4.5.0/css/font-awesome.min.css"/>

    <link rel="stylesheet" href="lib/css/bootstrap.min.css"/>

    <style>

        .wrapper {

            width: 200px;

            margin: 30px auto;

        }

        p.error {

            color: red;

           /* display: none;*/

        }

        pre {

            white-space: normal;

        }

        p.input-result {

            position: relative;

            top: -26px;

            left: 179px;

        }

        p.success {

            color: #3C763D;

        }

    </style>

</head>

<body ng-app="myApp" ng-controller="MainController">

<!-- name="signUpForm" 注册表单 -->

<div class="wrapper">

    <h2>注册</h2>

    <form name="signUpForm" ng-submit="submitForm()">

        <div class="form-group" ng-class="{'has-success': signUpForm.username.$valid}">

            <label>用户名：</label>

            <pre>合法：{{signUpForm.username.$valid}}</pre>

            <pre>{{signUpForm.username}}</pre>

            <input type="text"

                   name="username"

                   class="form-control"

                   ng-model="userdata.username"

                   required

                   ng-minlength="4"

                   ng-maxlength="32"

            />

            <p class="error" ng-if="signUpForm.username.$error.required

            && signUpForm.username.$touched">

                用户名不可为空

            </p>

            <p class="error" ng-if="(signUpForm.username.$error.minlength

            || signUpForm.username.$error.maxlength) && signUpForm.username.$touched">

                用户名长度应在4~32位之间

            </p>

            <p class="fa fa-check input-result success"

                    ng-if="signUpForm.username.$valid"></p>

        </div>

        <div class="form-group" ng-class="{'has-success': signUpForm.password.$valid}">

            <label>密码：</label>

            <input type="password"

                   name="password"

                   class="form-control"

                   ng-model="userdata.password"

                   required

                   ng-minlength="6"

                   ng-maxlength="18"

            />

            <p class="error" ng-if="signUpForm.password.$error.required

            && signUpForm.password.$touched">

                密码不得为空

            </p>

            <p class="error" ng-if="(signUpForm.password.$error.minlength

            || signUpForm.password.$error.maxlength)

            && signUpForm.password.$touched">

                密码应该在6~18位之间

            </p>

            <p class="fa fa-check input-result success"

               ng-if="signUpForm.password.$valid"></p>

        </div>

        <div class="form-group" ng-class="{'has-success': signUpForm.password2.$valid}">

            <label>确认密码：</label>

            <input type="password"

                   name="password2"

                   class="form-control"

                   ng-model="userdata.password2"

                   required

                   compare="signUpForm.password"

            />

            <p class="error"></p>

        </div>

        <div class="form-group">

            <button class="btn btn-primary">注册</button>

        </div>

    </form>

</div>

<script src="lib/js/angular.min.js"></script>

<script src="js/main.js"></script>

angular.module('myApp', [])

    .controller('MainController', function ($scope) {

        $scope.userdata = {};

        $scope.submitForm = function () {

            console.log('表单提交了');

            // $scope.userdata是表单提交的内容

            console.log($scope.userdata);

            // Object {username: "aaa", password: "123456", password2: "456789"}

            if($scope.signUpForm.$invalid) {

                alert('请检查你输入的内容');

            } else {

                alert('提交成功！');

            }

        };

    })

// 创建指令

.directive('compare', function () {

    var o = {};

    return o;

});

AngularJS表单验证开发案例的更多相关文章

angularjs表单验证checkbox
angularjs中默认有表单验证的支持,见文末的refer 我想要验证至少要选择一个checkbox,否则就不能提交但是checkbox貌似没有简单的方法,想来想去给出下面的解决方案 valida ...
【AngularJS学习笔记】AngularJS表单验证
AngularJS表单验证 AngularJS提供了一些自带的验证属性 1.novalidate:添加到HTML的表单属性中,用于禁用浏览器默认的验证. 2.$dirty 表单有填写记录 3.$v ...
[Angularjs]表单验证
写在前面在开发中提交表单,并对表单的值进行验证是非常常见的操作,angularjs对表单验证提供了非常好的支持. demo 表单 <form name="myform" n ...
AngularJS表单验证实现方法详解
本文主要是通过源码实例和大家分享AngularJS中的表单验证相关知识,希望通过本文的分享,对大家学习AngularJS有所帮助. 1.常规表单验证: 2.AngularJs中提供的表单验证实例. 实 ...
AngularJs表单验证
常用的表单验证指令 1. 必填项验证某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" requir ...
AngularJS表单验证,手动验证或自动验证
AngularJS的表单验证大致有两种,一种是手动验证,一种是自动验证. 手动验证所谓手动验证是通过AngularJS表单的属性来验证.而成为AngularJS表单必须满足两个条件:1.给form元 ...
AngularJS 表单验证小结
注:本文所述的表单验证即AngularJS自带的表单验证,无需引入第三方的插件一.常用的验证特性标签 1.非空为input加入一个required属性即可,例如: <input type=& ...
angularjs 表单验证（不完整版）
针对项目实践表单验证总结: angular 的 form表单验证:form内需要novalidate取消默认验证,用ng自己的验证,form的名字是非常必要的栗子:以注册为栗子,下面是注册的部分: ...
彻底弄懂angularJS表单验证
常用的表单验证指令 (基本概念) 1. 必填项验证某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" ...

随机推荐

Gym - 101845F 最大流
The UN finals are here!, the coaches/ex-coaches team is creating a new exciting contest to select wh ...
DesiredCapabilities内容详解--Appium服务关键字
上次了解了一些DesiredCapabilities的用法,有些还是不太清楚,去appium官网找了找官方文档,觉得写的很全: ## Appium 服务关键字 <expand_table> ...
POJ3368
http://poj.org/problem?id=3368 给出一个升序数组和 q 个查询.对每个查询,返回 a b 之间出现次数最多的那个元素的出现次数. 这一类区间查询的问题很容易想到用线段树来 ...
day_07 深浅拷贝
1. 基础数据类型的补充 1字符串的操作: 1.join 把字符串或者列表的的内拼接,拼接成字符串和split相反--把字符串转换成列表 2.删除字典和列表在循环中是不能进行删除的,可以在循环中把 ...
asp.net AD 域验证
1.获取环境变量 string strAuthUser = request.ServerVariables["AUTH_USER"] 以上这行代码是用来获取当前用户的登录名 2.I ...
并行执行hive脚本
### 模板脚本存放路径(无需修改) cd /tmp/fix_data/tmp_wjj_20180322_01 ### 脚本名称 script=tmp_wjj_20180322_01 ### 开始日期 ...
POI 读大文件日志
POI的三个目录 usermodel 包含很多类,方便用户使用,但是占用内存大 eventusermodel 使用xml的SAX事件解析,XSSFReader创建时必须使用OPCPackage,pkg ...
3 不用IDE开发groovy
1 不用IDE开发groovy 1.1 不用IDE开发的方法可以在IDE中运行Groovy类或者脚本,但是Groovy也提供了其他运行途径.你能运行Groovy代码基于以下: · ...
java——虚拟机、线程
java虚拟机: 是一台想象中的机器,有自己想象的硬件(处理器.堆栈.寄存器等)以及相应的指令系统. 生命周期:当执行java程序时,虚拟机开始运行,程序结束虚拟机停止.同一台计算机每多运行一个程序, ...
mybatis 动态行转列
SELECT user_name , MAX(CASE course WHEN '数学' THEN score END ) 数学, MAX(CASE course WHEN '语文' THEN sco ...

AngularJS表单验证开发案例

AngularJS表单验证开发案例的更多相关文章

随机推荐

热门专题