angularJS提交表单(form)


Posted in Javascript onFebruary 09, 2015

代码很简单,就不多废话了,直接奉上代码:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

</head>

<script src="http://localhost:81/js/jquery.js">

</script>

<script src="http://localhost:81/js/angular.min.js">

</script>

<body ng-app="app">

     <div ng-controller="TestCtrl">

        <div ng-form test>

          <input ng-model="a" type="email" />

          <button ng-click="do()">查看</button>

        </div>

      </div>

    <script>

    app = angular.module("app",[]);

   app.directive('test',function() {<br>



//form表单的指令都有一个默认的控制器作为第四个参数

        var link = function($scope, $element, $attrs, $ctrl) {

            $scope.do = function() {

                //$ctrl.$setDirty();

                console.log($ctrl.$pristine); //form是否没被动过

                console.log($ctrl.$dirty); //form是否被动过

                console.log($ctrl.$valid); //form是否被检验通过

                console.log($ctrl.$invalid); //form是否有错误

                console.log($ctrl.$error); //form中有错误的字段

            }

        }

        return {

            compile: function() {

                return link

            },

            require: 'form',

            restrict: 'A'

        }

    });

    app.controller('TestCtrl', function($scope){

        //如果没有contrller,这东西还不会初始化..

        });

    </script>

</body>

</html>

这里给大家分享的是最基础的angularJS表单验证,希望大家能够喜欢。

Javascript 相关文章推荐
为数据添加append,remove功能
Oct 03 Javascript
JavaScript中void(0)的具体含义解释
Feb 27 Javascript
模仿jQuery each函数的链式调用
Jul 22 Javascript
让FireFox支持innerText的实现代码
Dec 01 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
Mar 28 Javascript
jQuery和JavaScript节点插入元素的方法对比
Nov 18 Javascript
ES6学习笔记之Set和Map数据结构详解
Apr 07 Javascript
Express框架之connect-flash详解
May 31 Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
Aug 28 Javascript
详解用函数式编程对JavaScript进行断舍离
Sep 18 Javascript
了解JavaScript表单操作和表单域
May 27 Javascript
vue使用showdown并实现代码区域高亮的示例代码
Oct 17 Javascript
JavaScript实现16进制颜色值转RGB的方法
Feb 09 #Javascript
js选项卡的实现方法
Feb 09 #Javascript
js实现checkbox全选、不选与反选的方法
Feb 09 #Javascript
angularJS中router的使用指南
Feb 09 #Javascript
javascript实现按回车键切换焦点
Feb 09 #Javascript
jquery中ajax使用error调试错误的方法
Feb 08 #Javascript
JQuery中extend的用法实例分析
Feb 08 #Javascript
You might like
php购物车实现方法
2015/01/03 PHP
php微信公众平台交互与接口详解
2016/11/28 PHP
PHP批斗大会之缺失的异常详解
2019/07/09 PHP
jqPlot Option配置对象详解
2009/07/25 Javascript
gridpanel动态加载数据的实例代码
2013/07/18 Javascript
javascript异步编程的4种方法
2014/02/19 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
2014/07/23 Javascript
Javascript中的apply()方法浅析
2015/03/15 Javascript
原生js代码实现图片放大境效果
2016/10/30 Javascript
JavaScript轻松创建级联函数的方法示例
2017/02/10 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
2017/08/23 Javascript
浅谈Vuex的状态管理(全家桶)
2017/11/04 Javascript
原生js实现移动端触摸轮播的示例代码
2017/12/22 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
2018/08/27 Javascript
JavaScript学习笔记之DOM操作实例分析
2019/01/08 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
2019/04/17 Javascript
微信小程序全选多选效果实现代码解析
2020/01/21 Javascript
[00:35]TI7不朽珍藏III——寒冰飞龙不朽展示
2017/07/15 DOTA
python实现猜数字游戏(无重复数字)示例分享
2014/03/29 Python
python中的字典使用分享
2016/07/31 Python
Selenium鼠标与键盘事件常用操作方法示例
2018/08/13 Python
详解如何为eclipse安装合适版本的python插件pydev
2018/11/04 Python
10 行Python 代码实现 AI 目标检测技术【推荐】
2019/06/14 Python
Python经纬度坐标转换为距离及角度的实现
2020/11/01 Python
python 实现百度网盘非会员上传超过500个文件的方法
2021/01/07 Python
解析html5 canvas实现背景鼠标连线动态效果代码
2019/06/17 HTML / CSS
俄罗斯韩国化妆品网上商店:Cosmasi.ru
2019/10/31 全球购物
Love, Bonito国际官网:新加坡女装品牌
2021/03/13 全球购物
法律专业自我鉴定
2013/10/03 职场文书
企业给企业的表扬信
2014/01/13 职场文书
主要负责人任命书
2014/06/06 职场文书
销售顾问工作计划书
2014/08/15 职场文书
四年级数学教学反思
2016/02/16 职场文书
golang switch语句的灵活写法介绍
2021/05/06 Golang
一文教你快速生成MySQL数据库关系图
2022/06/28 Redis
Docker安装MySql8并远程访问的实现
2022/07/07 Servers