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 相关文章推荐
js loading加载效果实现代码
Nov 24 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
Nov 06 Javascript
jquery实现带二级菜单的导航示例
Apr 28 Javascript
js实现背景图片感应鼠标变化的方法
Feb 28 Javascript
js拆分字符串并将分割的数据放到数组中的方法
May 06 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
Aug 02 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
Jan 06 Javascript
微信JSSDK调用微信扫一扫功能的方法
Jul 25 Javascript
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
Oct 28 Javascript
node crawler如何添加promise支持
Feb 01 Javascript
vue 给数组添加新对象并赋值
Apr 20 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区块查询实现方法分析
2018/05/12 PHP
Laravel框架实现即点即改功能的方法分析
2019/10/31 PHP
yii2.0框架多模型操作示例【添加/修改/删除】
2020/04/13 PHP
js禁止页面使用右键(简单示例代码)
2013/11/13 Javascript
js中call与apply的用法小结
2013/12/28 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
2014/01/31 Javascript
JavaScript中检查对象property的存在性方法介绍
2014/12/30 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
2015/05/18 Javascript
win7下安装配置node.js+express开发环境
2015/12/06 Javascript
Javascript 制作图形验证码实例详解
2016/12/22 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
2017/03/13 Javascript
jQuery Jsonp跨域模拟搜索引擎
2017/06/17 jQuery
JS插件amCharts实现绘制柱形图默认显示数值功能示例
2019/11/26 Javascript
高性能js数组去重(12种方法,史上最全)
2019/12/21 Javascript
从表单校验看JavaScript策略模式的使用详解
2020/10/17 Javascript
vue实现点击出现操作弹出框的示例
2020/11/05 Javascript
python学习手册中的python多态示例代码
2014/01/21 Python
Python文件夹与文件的相关操作(推荐)
2016/07/25 Python
在Python中预先初始化列表内容和长度的实现
2019/11/28 Python
vue学习笔记之动态组件和v-once指令简单示例
2020/02/29 Python
Python利用PyPDF2库获取PDF文件总页码实例
2020/04/03 Python
Python系统公网私网流量监控实现流程
2020/11/23 Python
支票、地址标签、包装纸和慰问卡:Current Catalog
2018/01/30 全球购物
俄罗斯香水和化妆品购物网站:Л’Этуаль
2018/05/10 全球购物
经济实惠的名牌太阳镜和眼镜:Privé Revaux
2021/02/07 全球购物
自1926年以来就为冰岛保持温暖:66°North
2020/11/27 全球购物
什么是smarty? Smarty的优点是什么?
2013/08/11 面试题
科室工作的个人自我评价
2013/10/30 职场文书
3.15国际消费者权益日主题活动活动总结
2014/03/16 职场文书
护士长竞聘书
2014/03/31 职场文书
职业生涯规划书前言
2014/04/15 职场文书
经济管理专业求职信
2014/06/09 职场文书
个人主要事迹材料
2014/08/26 职场文书
营销学习心得体会
2014/09/12 职场文书
2014年大学生预备党员思想汇报1000字
2014/09/13 职场文书
自主招生推荐信格式模板
2015/03/24 职场文书