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 相关文章推荐
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
Sep 19 Javascript
JavaScript实现鼠标点击后层展开效果的方法
May 13 Javascript
javascript+HTML5自定义元素播放焦点图动画
Feb 21 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
Apr 12 Javascript
Js调用Java方法并互相传参的简单实例
Aug 11 Javascript
canvas滤镜效果实现代码
Feb 06 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
vue组件之间通信实例总结(点赞功能)
Dec 05 Javascript
Koa日志中间件封装开发详解
Mar 09 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
Apr 02 Javascript
laypage.js分页插件使用方法详解
Jul 27 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
Jul 21 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
一个显示天气预报的程序
2006/10/09 PHP
BBS(php &amp; mysql)完整版(五)
2006/10/09 PHP
PHP遍历二维数组的代码
2011/04/22 PHP
PHP计划任务、定时执行任务的实现代码
2011/04/23 PHP
以实例全面讲解PHP中多进程编程的相关函数的使用
2015/08/18 PHP
PHP中的print_r 与 var_dump 输出数组
2016/06/13 PHP
Linux系统中为php添加pcntl扩展
2016/08/28 PHP
PHP学习记录之数组函数
2018/06/01 PHP
学习YUI.Ext 第三天
2007/03/10 Javascript
一段利用WSH获取登录时间的jscript代码
2008/05/11 Javascript
通用JS事件写法实现代码
2009/01/07 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
2013/07/07 Javascript
JS设置cookie、读取cookie、删除cookie
2015/04/17 Javascript
详解Javascript继承的实现
2016/03/25 Javascript
老司机带你解读jQuery插件开发流程
2016/05/16 Javascript
微信小程序 表单Form实例详解(附源码)
2016/12/22 Javascript
vue mounted组件的使用
2018/06/18 Javascript
vue监听dom大小改变案例
2020/07/29 Javascript
javascript实现拼图游戏
2021/01/29 Javascript
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
python数字图像处理之高级滤波代码详解
2017/11/23 Python
详解【python】str与json类型转换
2019/04/29 Python
python 基于dlib库的人脸检测的实现
2019/11/08 Python
Python print不能立即打印的解决方式
2020/02/19 Python
Python Handler处理器和自定义Opener原理详解
2020/03/05 Python
Python操作Excel的学习笔记
2021/02/18 Python
德国健康生活方式网上商店:Landkaufhaus Mayer
2019/03/12 全球购物
什么是View State?
2013/01/27 面试题
新闻学专业个人求职信写作
2014/02/04 职场文书
《要下雨了》教学反思
2014/02/17 职场文书
公安四风对照检查材料思想汇报
2014/10/11 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
2016年中秋节晚会领导致辞
2015/11/26 职场文书
浅谈:电影《孔子》观后感(范文)
2019/10/14 职场文书
redis实现的四种常见限流策略
2021/06/18 Redis
python之PySide2安装使用及QT Designer UI设计案例教程
2021/07/26 Python