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 相关文章推荐
javascript网页关键字高亮代码
Jul 30 Javascript
ExtJs使用IFrame的实现代码
Mar 24 Javascript
javascript延时加载之defer测试
Dec 28 Javascript
Extjs407 getValue()和getRawValue()区别介绍
May 21 Javascript
js select option对象小结
Dec 20 Javascript
如何防止回车(enter)键提交表单
May 11 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
May 16 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
Dec 14 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
Aug 16 Javascript
node(koa2) web应用模块介绍详解
Mar 29 Javascript
vue+animation实现翻页动画
Jun 29 Javascript
详解javascript void(0)
Jul 13 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下几种删除目录的方法总结
2007/08/19 PHP
elgg 获取文件图标地址的方法
2010/03/20 PHP
PHP接收App端发送文件流的方法
2016/09/23 PHP
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
2010/01/15 Javascript
再论Javascript下字符串连接的性能
2011/03/05 Javascript
js+JQuery返回顶部功能如何实现
2012/12/03 Javascript
js与jQuery 获取父窗、子窗的iframe
2013/12/20 Javascript
jquery禁用右键示例
2014/04/28 Javascript
jQuery实现tab标签自动切换的方法
2015/02/28 Javascript
最棒的Angular2表格控件
2016/08/10 Javascript
jQuery 利用ztree实现树形表格的实例代码
2017/09/27 jQuery
JS解决position:sticky的兼容性问题的方法
2017/10/17 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
2020/11/04 Javascript
微信小程序实现底部弹出模态框
2020/11/18 Javascript
[07:43]《辉夜杯》公开赛晋级外卡赛战队—TRG训练生活探秘
2015/12/11 DOTA
[42:00]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第一场 12.13
2020/12/17 DOTA
linux系统使用python监控apache服务器进程脚本分享
2014/01/15 Python
Python遍历目录中的所有文件的方法
2016/07/08 Python
Python多维/嵌套字典数据无限遍历的实现
2016/11/04 Python
Python线程创建和终止实例代码
2018/01/20 Python
python退出命令是什么?详解python退出方法
2018/12/10 Python
关于pytorch多GPU训练实例与性能对比分析
2019/08/19 Python
学习Python列表的基础知识汇总
2020/03/10 Python
一个入门级python爬虫教程详解
2021/01/27 Python
群众路线剖析材料
2014/02/02 职场文书
大学生毕业自我鉴定范文
2014/02/03 职场文书
支部书记四风问题自我剖析材料
2014/09/29 职场文书
2015年度优秀员工推荐信
2015/03/23 职场文书
2016年班主任培训心得体会
2016/01/07 职场文书
《圆的面积》教学反思
2016/02/19 职场文书
HTML通过表单实现酒店筛选功能
2021/05/18 HTML / CSS
Python常遇到的错误和异常
2021/11/02 Python
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
2021/11/27 Vue.js
 Python 中 logging 模块使用详情
2022/03/03 Python
python 学习GCN图卷积神经网络
2022/05/11 Python
java中如何截取字符串最后一位
2022/07/07 Java/Android