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 相关文章推荐
utf-8编码引起js输出中文乱码的解决办法
Jun 23 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
Dec 27 Javascript
javascript向后台传送相同属性的参数即数组参数
Feb 17 Javascript
js图片卷帘门导航菜单特效代码分享
Sep 10 Javascript
详解js中构造流程图的核心技术JsPlumb
Dec 08 Javascript
Bootstrap实现input控件失去焦点时验证
Aug 04 Javascript
AngularJS中$watch和$timeout的使用示例
Sep 20 Javascript
JavaScript SHA-256加密算法详细代码
Oct 06 Javascript
Javascript中this关键字指向问题的测试与详解
Aug 11 Javascript
react+redux的升级版todoList的实现
Dec 18 Javascript
关于vue中 $emit的用法详解
Apr 12 Javascript
vue .sync修饰符的使用详解
Jun 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
星际玩家的三大定律
2020/03/04 星际争霸
PHP的FTP学习(四)
2006/10/09 PHP
php入门学习知识点八 PHP中for循环基本应用之九九乘法口绝表
2011/07/14 PHP
PHP弱类型语言中类型判断操作实例详解
2017/08/10 PHP
php中对象引用和复制实例分析
2019/08/14 PHP
laravel 修改记住我功能的cookie保存时间的方法
2019/10/14 PHP
记Laravel调用Gin接口调用formData上传文件的实现方法
2019/12/12 PHP
基于jquery的tab切换 js原理
2010/04/01 Javascript
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
Jquery知识点三 jquery表单对象操作
2011/01/17 Javascript
计算世界完全对称日的js代码,粗糙版
2011/11/04 Javascript
javascript学习笔记(二) js一些基本概念
2012/06/18 Javascript
ie下jquery.getJSON的缓存问题的处理方法
2013/03/29 Javascript
javascript 小数取整简单实现方式
2014/05/30 Javascript
JavaScript设计模式之外观模式介绍
2014/12/28 Javascript
JS交换变量的方法
2015/01/21 Javascript
Bootstrap每天必学之导航条
2015/11/27 Javascript
浅谈JS函数定义方式的区别
2016/10/30 Javascript
jQuery常见面试题之DOM操作详析
2017/07/05 jQuery
JS运动特效之链式运动分析
2018/01/24 Javascript
Vue 中axios配置实例详解
2018/07/27 Javascript
vue项目首屏打开速度慢的解决方法
2019/03/31 Javascript
javascript异步处理与Jquery deferred对象用法总结
2019/06/04 jQuery
Python模拟登录的多种方法(四种)
2018/06/01 Python
python机器人运动范围问题的解答
2019/04/29 Python
解决python tkinter界面卡死的问题
2019/07/17 Python
快速解决vue.js 模板和jinja 模板冲突的问题
2019/07/26 Python
python 利用jinja2模板生成html代码实例
2019/10/10 Python
python获取引用对象的个数方式
2019/12/20 Python
python GUI库图形界面开发之PyQt5切换按钮控件QPushButton详细使用方法与实例
2020/02/28 Python
python实现猜数游戏(保存游戏记录)
2020/06/22 Python
如何在发生故障的节点上重新安装 SQL Server
2013/03/14 面试题
网上卖盒饭创业计划书范文
2014/02/07 职场文书
参观接待方案
2014/03/17 职场文书
详细聊聊MySQL中慢SQL优化的方向
2021/08/30 MySQL
业余无线电通联Q语
2022/02/18 无线电