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 相关文章推荐
TextArea 控件的最大长度问题(js json)
Dec 16 Javascript
js与jquery回车提交的方法
Feb 03 Javascript
避免jQuery名字冲突 noConflict()方法
Jul 30 Javascript
详解jQuery的表单验证插件--Validation
Dec 21 Javascript
Bootstrap和Java分页实例第一篇
Dec 23 Javascript
node.js发送邮件email的方法详解
Jan 06 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
Jan 13 Javascript
基于vue 实现token验证的实例代码
Dec 14 Javascript
在nginx上部署vue项目(history模式)的方法
Dec 28 Javascript
小程序实现授权登陆的解决方案
Dec 02 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
Oct 23 Javascript
微信小程序实现菜单左右联动
May 19 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实现Ftp用户的在线管理的代码
2007/03/06 PHP
ioncube_loader_win_5.2.dll的错误解决方法
2015/01/04 PHP
深入解析PHP的Yii框架中的event事件机制
2016/03/17 PHP
Yii 2.0中场景的使用教程
2017/06/02 PHP
yii2中关于加密解密的那些事儿
2018/06/12 PHP
javascript 写类方式之四
2009/07/05 Javascript
jquery 插件开发方法小结
2009/10/23 Javascript
php与js的区别是什么
2013/08/05 Javascript
JavaScript中实现异步编程模式的4种方法
2014/09/24 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
2014/12/04 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
2015/09/12 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
2015/12/04 Javascript
angularjs 获取默认选中的单选按钮的value方法
2018/02/28 Javascript
vue 动态表单开发方法案例详解
2019/12/02 Javascript
vue实现的封装全局filter并统一管理操作示例
2020/02/02 Javascript
jQuery实现鼠标滑动切换图片
2020/05/27 jQuery
JavaScript常用进制转换及位运算实例解析
2020/10/14 Javascript
[01:33]一分钟玩转DOTA2第三弹:DOTA2&DotA快捷操作大对比
2014/06/04 DOTA
Python设置默认编码为utf8的方法
2016/07/01 Python
Python实现向服务器请求压缩数据及解压缩数据的方法示例
2017/06/09 Python
tensorflow TFRecords文件的生成和读取的方法
2018/02/06 Python
python实现两张图片拼接为一张图片并保存
2019/07/16 Python
Django应用程序入口WSGIHandler源码解析
2019/08/05 Python
关于tf.reverse_sequence()简述
2020/01/20 Python
企业为何需要商业计划书
2013/12/26 职场文书
奶茶专卖店创业计划书
2014/01/18 职场文书
父母寄语大全
2014/04/12 职场文书
低碳生活的宣传标语
2014/06/23 职场文书
应届生求职信范文
2014/06/30 职场文书
信访维稳工作汇报
2014/10/27 职场文书
小学生作文批改评语
2014/12/25 职场文书
2015大学生自我评价范文
2015/03/03 职场文书
2016新教师岗前培训心得体会
2016/01/08 职场文书
使用canvas仿Echarts实现金字塔图的实例代码
2021/11/11 HTML / CSS
Win11怎样将锁屏账户头像图片改成动画视频
2021/11/21 数码科技
对讲机知识
2022/04/07 无线电