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 Base类 包含基本的方法
Jul 22 Javascript
JSON JQUERY模板实现说明
Jul 03 Javascript
javascript中的parseInt和parseFloat区别
Jul 12 Javascript
js中window.open()的所有参数详细解析
Jan 09 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
May 07 Javascript
Jquery倒计时源码分享
May 16 Javascript
JS判断当前页面是否在微信浏览器打开的方法
Dec 08 Javascript
jQuery ready()和onload的加载耗时分析
Sep 08 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
May 07 Javascript
微信小程序仿微信运动步数排行(交互)
Jul 13 Javascript
JavaScript中使用Spread运算符的八种方法总结
Jun 18 Javascript
JavaScript中Object、map、weakmap的区别分析
Dec 15 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代码将360浏览器导出的favdb的sqlite数据库文件转换为html
2015/12/09 PHP
使用ltrace工具跟踪PHP库函数调用的方法
2016/04/25 PHP
php实现网页端验证码功能
2017/07/11 PHP
如何让PHP编码更加好看利于阅读
2019/05/12 PHP
JavaScript 异步调用框架 (Part 6 - 实例 &amp; 模式)
2009/08/04 Javascript
添加JavaScript重载函数的辅助方法2
2010/07/04 Javascript
整理一些JavaScript的IE和火狐的兼容性注意事项
2011/03/17 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
2013/05/05 Javascript
JavaScript中的console.time()函数详细介绍
2014/12/29 Javascript
JavaScript中遍历对象的property的3种方法介绍
2014/12/30 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
2015/03/27 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
2015/04/06 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
2015/08/21 Javascript
JavaScript实现的SHA-1加密算法完整实例
2016/02/02 Javascript
详解Angular2中Input和Output用法及示例
2017/05/21 Javascript
windows系统下更新nodejs版本的方案
2017/11/24 NodeJs
JS实现统计字符串中字符出现个数及最大个数功能示例
2018/06/04 Javascript
深入理解Vue 组件之间传值
2018/08/16 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
2019/05/12 Javascript
小程序实现录音功能
2020/09/22 Javascript
Javascript文本框脚本实现方法解析
2020/10/30 Javascript
Python实现类继承实例
2014/07/04 Python
简单了解Python3里的一些新特性
2019/07/13 Python
使用python分析统计自己微信朋友的信息
2019/07/19 Python
Python简单实现词云图代码及步骤解析
2020/06/04 Python
python实现图像高斯金字塔的示例代码
2020/12/11 Python
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
2016/05/09 HTML / CSS
Spartoo荷兰:鞋子、包包和服装
2018/07/12 全球购物
介绍一下游标
2012/01/10 面试题
2014大学生党员评议个人总结
2014/09/22 职场文书
建筑专业毕业生求职信
2014/09/30 职场文书
2016教师政治学习心得体会
2016/01/23 职场文书
如何做好员工培训计划?
2019/07/09 职场文书
如何用python识别滑块验证码中的缺口
2021/04/01 Python
手把手教你导入Go语言第三方库
2021/08/04 Golang
Selenium浏览器自动化如何上传文件
2022/04/06 Python