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 相关文章推荐
jquery实现html页面 div 假分页有原理有代码
Sep 06 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
Sep 04 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
May 28 Javascript
模板视图和AngularJS之间冲突的解决方法
Nov 22 Javascript
使用JavaScript开发跨平台的桌面应用详解
Jul 27 Javascript
微信小程序仿美团城市选择
Jun 06 Javascript
angular 数据绑定之[]和{{}}的区别
Sep 25 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
Sep 29 Javascript
jQuery 动画与停止动画效果实例详解
May 19 jQuery
使用JavaScript和MQTT开发物联网应用示例解析
Aug 07 Javascript
JavaScript中的执行环境和作用域链
Sep 04 Javascript
Nuxt 项目性能优化调研分析
Nov 07 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 更新数据库中断的解决方法
2009/06/05 PHP
删除html标签得到纯文本可处理嵌套的标签
2014/04/28 PHP
fsockopen pfsockopen函数被禁用,SMTP发送邮件不正常的解决方法
2015/09/20 PHP
分享50个提高PHP执行效率的技巧
2015/12/26 PHP
php+html5+ajax实现上传图片的方法
2016/05/14 PHP
ThinkPHP框架实现FTP图片上传功能示例
2019/04/08 PHP
在Laravel中实现使用AJAX动态刷新部分页面
2019/10/15 PHP
一些常用的Javascript函数
2006/12/22 Javascript
JavaScript 继承详解(四)
2009/07/13 Javascript
HTML中的setCapture和releaseCapture使用介绍
2012/03/21 Javascript
jQuery封装的屏幕居中提示信息代码
2016/06/08 Javascript
javascript运算符——逻辑运算符全面解析
2016/06/27 Javascript
JavaScript交换两个变量值的七种解决方案
2016/12/01 Javascript
自动适应iframe右边的高度
2016/12/22 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
2017/02/22 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
2017/03/08 Javascript
node操作mysql数据库实例详解
2017/03/17 Javascript
详解vue.js全局组件和局部组件
2017/04/10 Javascript
vue select选择框数据变化监听方法
2018/08/24 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
2019/02/21 Javascript
javascript触发模拟鼠标点击事件
2019/06/26 Javascript
jquery实现简单拖拽效果
2020/07/20 jQuery
[01:00] DOTA2英雄背景故事第五期之重力引力法则谜团
2020/07/16 DOTA
Python Queue模块详解
2014/11/30 Python
简单谈谈Python流程控制语句
2016/12/04 Python
Python使用文件锁实现进程间同步功能【基于fcntl模块】
2017/10/16 Python
python中requests库session对象的妙用详解
2017/10/30 Python
Python reques接口测试框架实现代码
2020/07/28 Python
洛杉矶生活休闲而精致的基础品牌:Mika Jaymes
2018/01/07 全球购物
印度在线杂货店:bigbasket
2018/08/23 全球购物
超市营业员求职简历的自我评价
2013/10/17 职场文书
青年创业培训欢迎词
2014/01/08 职场文书
教师岗位聘任书范文
2014/03/29 职场文书
讲座通知范文
2015/04/23 职场文书
女性健康讲座主持词
2015/07/04 职场文书
课程设计感想范文
2015/08/11 职场文书