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 相关文章推荐
鼠标滑过出现预览的大图提示效果
Feb 26 Javascript
javascript/jquery获取地址栏url参数的方法
Mar 05 Javascript
javascript作用域和闭包使用详解
Apr 25 Javascript
javascript生成不重复的随机数
Jul 17 Javascript
zTree插件下拉树使用入门教程
Apr 11 Javascript
AngularJS延迟加载html template
Jul 27 Javascript
使用JavaScript获取Request中参数的值方法
Sep 27 Javascript
angular写一个列表的选择全选交互组件的示例
Jan 22 Javascript
webpack中使用iconfont字体图标的方法
Feb 22 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
Sep 14 Javascript
Paypal支付不完全指北
Jun 04 Javascript
JavaScript中CreateTextFile函数
Aug 30 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 和 MySQL 基础教程(二)
2006/10/09 PHP
PHP反向代理类代码
2014/08/15 PHP
ThinkPHP设置禁止百度等搜索引擎转码(简单实用)
2016/02/15 PHP
关于Yii中模型场景的一些简单介绍
2019/09/22 PHP
IE6,IE7下js动态加载图片不显示错误
2010/07/17 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
2013/01/23 Javascript
javascript制作sql转换为stringBuffer的小工具
2015/04/03 Javascript
JavaScript的jQuery库中ready方法的学习教程
2015/08/14 Javascript
JavaScript编写简单的计算器
2015/11/25 Javascript
jQuery前端开发35个小技巧
2016/05/24 Javascript
js基于setTimeout与setInterval实现多线程
2016/06/17 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
2016/11/25 Javascript
整理关于Bootstrap表单的慕课笔记
2017/03/29 Javascript
详解Vue微信公众号开发踩坑全记录
2017/08/21 Javascript
Angularjs实现下拉框联动的示例代码
2017/08/22 Javascript
Vue2 配置 Axios api 接口调用文件的方法
2017/11/13 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
2018/08/08 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
2018/08/20 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
2018/11/08 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
2018/11/30 Javascript
JavaScript使用ul中li标签实现删除效果
2019/04/15 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
2019/05/23 Javascript
Vue使用mixin分发组件的可复用功能
2019/09/01 Javascript
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
全面了解Python环境配置及项目建立
2016/06/30 Python
django开发之settings.py中变量的全局引用详解
2017/03/29 Python
python3 模拟登录v2ex实例讲解
2017/07/13 Python
pandas 实现将重复表格去重,并重新转换为表格的方法
2018/04/18 Python
windows下python安装pip图文教程
2018/05/25 Python
python利用7z批量解压rar的实现
2019/08/07 Python
Python3 翻转二叉树的实现
2019/09/30 Python
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
2013/04/22 HTML / CSS
学生社团文化节开幕式主持词
2014/03/28 职场文书
2015年志愿者服务工作总结
2015/04/20 职场文书
2015毕业设计工作总结
2015/07/24 职场文书
python 管理系统实现mysql交互的示例代码
2021/12/06 Python