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 css float属性的特殊写法
Nov 13 Javascript
javascript 学习之旅 (2)
Feb 05 Javascript
原生javascript和jquery判断浏览器版本等信息
Jul 04 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
Jan 14 Javascript
javascript验证身份证号
Mar 03 Javascript
js命名空间写法示例
Dec 18 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
Apr 11 Javascript
js中遍历对象的属性和值的方法
Jul 27 Javascript
Bootstrap Table从零开始
Jun 30 Javascript
JavaScript中关于base64的一些事
May 06 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
Nov 01 Javascript
react合成事件与原生事件的相关理解
May 13 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 5.0 Pear安装方法
2006/12/06 PHP
PHP Mysql编程之高级技巧
2008/08/27 PHP
PHP 向右侧拉菜单实现代码,测试使用中
2009/11/03 PHP
php中的mongodb select常用操作代码示例
2014/09/06 PHP
PHP常见数组函数用法小结
2016/03/21 PHP
php实现JWT(json web token)鉴权实例详解
2019/11/05 PHP
JQuery入门——移除绑定事件unbind方法概述及应用
2013/02/05 Javascript
IE6已终止操作问题的2种情况及解决
2014/04/23 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
2014/10/08 Javascript
jQuery中:image选择器用法实例
2015/01/03 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
2015/01/06 Javascript
javascript中传统事件与现代事件
2015/06/23 Javascript
jquery实现仿新浪微博评论滚动效果
2015/08/06 Javascript
基于jQuery滑动杆实现购买日期选择效果
2015/09/15 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
2016/05/03 Javascript
javascript中Number的方法小结
2016/11/21 Javascript
JavaScript反弹动画效果的实现代码
2017/07/13 Javascript
解决Mac node版本升级失败的问题
2018/05/16 Javascript
vue 解决路由只变化参数页面组件不更新问题
2019/11/05 Javascript
在antd Form表单中select设置初始值操作
2020/11/02 Javascript
零基础写python爬虫之urllib2使用指南
2014/11/05 Python
python学习之面向对象【入门初级篇】
2017/01/21 Python
opencv python 傅里叶变换的使用
2018/07/21 Python
基于Python实现ComicReaper漫画自动爬取脚本过程解析
2019/11/11 Python
Jmeter HTTPS接口测试证书导入过程图解
2020/07/22 Python
Python如何将将模块分割成多个文件
2020/08/04 Python
python中threading和queue库实现多线程编程
2021/02/06 Python
Hunter Boots美国官方网站:赫特威灵顿雨靴
2018/06/16 全球购物
Notino希腊:购买香水和美容产品
2019/07/25 全球购物
Android面试题及答案
2015/09/04 面试题
魅力教师事迹材料
2014/01/10 职场文书
社保转移委托书范本
2014/10/08 职场文书
刘公岛导游词
2015/02/05 职场文书
出生证明范本
2015/06/15 职场文书
《大禹治水》教学反思
2016/02/22 职场文书
python中的plt.cm.Paired用法说明
2021/05/31 Python