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引用赋值(地址传值)用法实例
Jan 13 Javascript
jQuery中$.each使用详解
Jan 29 Javascript
jquery实现鼠标滑过小图查看大图的方法
Jul 20 Javascript
果断收藏9个Javascript代码高亮脚本
Jan 06 Javascript
vue.js 上传图片实例代码
Jun 22 Javascript
vue-cli axios请求方式及跨域处理问题
Mar 28 Javascript
vue 实现全选全不选的示例代码
Mar 29 Javascript
小程序实现列表删除功能
Oct 30 Javascript
详解Vue内部怎样处理props选项的多种写法
Nov 06 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
Oct 14 Javascript
JS实现简单的表格增删
Jan 16 Javascript
使用react-virtualized实现图片动态高度长列表的问题
May 28 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
Apache下禁止php文件被直接访问的解决方案
2013/04/25 PHP
实例介绍PHP的Reflection反射机制
2014/08/05 PHP
利用php做服务器和web前端的界面进行交互
2016/10/31 PHP
php PDO属性设置与操作方法分析
2018/12/27 PHP
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
2013/07/10 Javascript
node.js中的fs.writeFileSync方法使用说明
2014/12/14 Javascript
Bootstrap零基础入门教程(二)
2016/07/18 Javascript
JavaScript中setTimeout的那些事儿
2016/11/14 Javascript
关于Node.js的events.EventEmitter用法介绍
2017/04/01 Javascript
Javascript操作dom对象之select全面解析
2017/04/24 Javascript
React中jquery引用的实现方法
2017/09/12 jQuery
Node.js readline 逐行读取、写入文件内容的示例
2018/03/01 Javascript
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
基于layui实现高级搜索(筛选)功能
2019/07/26 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
2019/08/20 Javascript
[01:32]2016国际邀请赛中国区预选赛CDEC战队教练采访
2016/06/26 DOTA
学习python (2)
2006/10/31 Python
Python面向对象编程基础解析(一)
2017/10/26 Python
对PyTorch torch.stack的实例讲解
2018/07/30 Python
django从请求到响应的过程深入讲解
2018/08/01 Python
python从入门到精通 windows安装python图文教程
2019/05/18 Python
python程序变成软件的实操方法
2019/06/24 Python
Python利用matplotlib绘制散点图的新手教程
2020/11/05 Python
pip 20.3 新版本发布!即将抛弃 Python 2.x(推荐)
2020/12/16 Python
python绘图模块之利用turtle画图
2021/02/12 Python
css3 transform及原生js实现鼠标拖动3D立方体旋转
2016/06/20 HTML / CSS
HTML5离线应用与客户端存储的实现
2018/05/03 HTML / CSS
奥地利网上现代灯具和灯饰店:Lampenwelt.at
2018/01/29 全球购物
Farfetch阿联酋:奢侈品牌时尚购物平台
2019/07/26 全球购物
英国鞋网:Rubber Sole
2020/03/03 全球购物
七年级英语教学反思
2014/01/15 职场文书
工艺员岗位职责
2014/02/11 职场文书
小区消防演习方案
2014/02/21 职场文书
机关节能减排实施方案
2014/03/17 职场文书
家长通知书家长评语
2014/04/17 职场文书
党的群众路线教育实践活动整改方案
2014/10/28 职场文书