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处理json以及字符串的比较等常用操作
Sep 08 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
Nov 12 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
Nov 17 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
Aug 19 Javascript
jquery对象和DOM对象的相互转换详解
Oct 18 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
Mar 04 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
Oct 31 Javascript
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
vue中关闭eslint的方法分析
Aug 04 Javascript
vue中$nextTick的用法讲解
Jan 17 Javascript
element ui分页多选,翻页记忆的实例
Sep 03 Javascript
详解JavaScript数据类型和判断方法
Sep 04 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中获取文件扩展名的N种方法小结
2012/02/27 PHP
php格式化金额函数分享
2015/02/02 PHP
session 加入redis的实现代码
2016/07/15 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
PHP实现用session来实现记录用户登陆信息
2018/10/15 PHP
PHP连接SQL server数据库测试脚本运行实例
2020/08/24 PHP
搭建PhpStorm+PhpStudy开发环境的超详细教程
2020/09/17 PHP
一个很酷的拖动层的js类,兼容IE及Firefox
2009/06/23 Javascript
Javascript 两个窗体之间传值实现代码
2009/09/25 Javascript
一起来写段JS drag拖动代码
2010/12/09 Javascript
浅谈JS之iframe中的窗口
2016/09/13 Javascript
10分钟掌握XML、JSON及其解析
2020/12/06 Javascript
JQuery学习总结【一】
2016/12/01 Javascript
vue将对象新增的属性添加到检测序列的方法
2018/02/24 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
2018/07/13 jQuery
vue 解决循环引用组件报错的问题
2018/09/06 Javascript
[02:33]2014DOTA2 TI每日综述 LGD涉险晋级DK闯入胜者组
2014/07/14 DOTA
介绍Python的Django框架中的QuerySets
2015/04/20 Python
举例讲解Python中字典的合并值相加与异或对比
2016/06/04 Python
Python编程实战之Oracle数据库操作示例
2017/06/21 Python
利用django如何解析用户上传的excel文件
2017/07/24 Python
Python爬虫小技巧之伪造随机的User-Agent
2018/09/13 Python
浅谈matplotlib.pyplot与axes的关系
2020/03/06 Python
使用Python对Dicom文件进行读取与写入的实现
2020/04/20 Python
使用Python制作一盏 3D 花灯喜迎元宵佳节
2021/02/26 Python
Superdry极度干燥美国官网:英国制造的服装品牌
2018/11/13 全球购物
资深生产主管自我评价
2013/09/22 职场文书
派出所班子党的群众路线对照检查材料思想汇报
2014/10/01 职场文书
党员群众路线整改措施及今后努力方向
2014/10/28 职场文书
大学生考试作弊被抓检讨书
2014/12/27 职场文书
大学生党员个人总结
2015/02/13 职场文书
单位综合评价意见
2015/06/05 职场文书
Python机器学习算法之决策树算法的实现与优缺点
2021/05/13 Python
python引入其他文件夹下的py文件具体方法
2021/05/23 Python
Python matplotlib绘制雷达图
2022/04/13 Python
JS函数式编程实现XDM一
2022/06/16 Javascript