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 相关文章推荐
Array.slice()与Array.splice()的返回值类型
Oct 09 Javascript
Javascript笔记一 js以及json基础使用说明
May 22 Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
Aug 21 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
Dec 05 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
Jun 27 Javascript
jQuery实现仿Google首页拖动效果的方法
May 04 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
May 18 Javascript
JavaScript中闭包之浅析解读(必看篇)
Aug 25 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
Jul 18 Javascript
使用node.JS中的url模块解析URL信息
Feb 06 Javascript
javascript+Canvas实现画板功能
Jun 23 Javascript
Vue ​v-model相关知识总结
Jan 28 Vue.js
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高级OOP技术演示
2009/08/27 PHP
PHP实现的QQ空间g_tk加密算法
2015/07/09 PHP
用prototype实现的简单小巧的多级联动菜单
2007/03/24 Javascript
Prototype 学习 工具函数学习($方法)
2009/07/12 Javascript
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
2009/09/09 Javascript
js禁止小键盘输入数字功能代码
2011/08/01 Javascript
Jquery网页出现的乱码问题的三种解决方法
2013/06/30 Javascript
使用JS 清空File控件的路径值
2013/07/08 Javascript
js改变embed标签src值的方法
2015/04/10 Javascript
javascript实现简单的页面右下角提示信息框
2015/07/31 Javascript
javascript冒泡排序小结
2016/04/10 Javascript
Javascript中prototype的使用详解
2016/06/18 Javascript
ionic实现滑动的三种方式
2016/08/27 Javascript
浅析从vue源码看观察者模式
2018/01/29 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
2018/07/04 Javascript
详解微信UnionID作用
2019/05/15 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
2019/06/24 Javascript
VUE项目中加载已保存的笔记实例方法
2019/09/14 Javascript
js实现浏览器打印功能的示例代码
2020/07/15 Javascript
javascript使用canvas实现饼状图效果
2020/09/08 Javascript
JavaScript基于SVG的图片切换效果实例代码
2020/12/15 Javascript
跟老齐学Python之一个免费的实验室
2014/09/14 Python
wxPython框架类和面板类的使用实例
2014/09/28 Python
详解Golang 与python中的字符串反转
2017/07/21 Python
python提取xml里面的链接源码详解
2019/10/15 Python
django和flask哪个值得研究学习
2020/07/31 Python
pip install命令安装扩展库整理
2021/03/02 Python
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
2018/01/08 HTML / CSS
iframe与window.onload如何使用详解
2020/05/07 HTML / CSS
网友共享的几个面试题关于Java和Unix等方面的
2016/09/08 面试题
自荐书范文
2013/12/08 职场文书
服务行业个人求职的自我评价
2013/12/12 职场文书
博士学位自我鉴定范文
2013/12/26 职场文书
《太阳》教学反思
2014/02/21 职场文书
2014新生大学四年计划书
2014/09/21 职场文书
CSS实现隐藏搜索框功能(动画正反向序列)
2021/07/21 HTML / CSS