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 04 Javascript
将文本输入框内容加入表中的js代码
Aug 18 Javascript
JS对象转换为Jquery对象实现代码
Dec 29 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
Jan 08 Javascript
jQuery取得iframe中元素的常用方法详解
Jan 14 Javascript
适用于javascript开发者的Processing.js入门教程
Feb 24 Javascript
阿里云ecs服务器中安装部署node.js的步骤
Oct 08 Javascript
jquery做个日期选择适用于手机端示例
Jan 10 Javascript
js实现移动端微信页面禁止字体放大
Feb 16 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
Sep 10 Javascript
JS实现关闭小广告特效
Jan 29 Javascript
微信小程序实现发微博功能的示例代码
Jun 24 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 过滤器实现代码
2010/08/09 PHP
PHP中文分词 自动获取关键词介绍
2012/11/13 PHP
与文件上传有关的php配置参数总结
2013/06/14 PHP
php等比例缩放图片及剪切图片代码分享
2016/02/13 PHP
PHP实现Unicode编码相互转换的方法示例
2020/11/17 PHP
使用Zookeeper分布式部署PHP应用程序
2019/03/15 PHP
基于jquery.Jcrop的头像编辑器
2010/03/01 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
2013/01/29 Javascript
js获取对象为null的解决方法
2013/11/21 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
2014/08/01 Javascript
NodeJS学习笔记之MongoDB模块
2015/01/13 NodeJs
移动端JQ插件hammer使用详解
2015/07/03 Javascript
vue多种弹框的弹出形式的示例代码
2017/09/18 Javascript
layui 设置table 行的高度方法
2018/08/17 Javascript
NodeJS加密解密及node-rsa加密解密用法详解
2018/10/12 NodeJs
利用hasOwnProperty给数组去重的面试题分享
2018/11/05 Javascript
基于JS实现操作成功之后自动跳转页面
2020/09/25 Javascript
jQuery实现回到顶部效果
2020/10/19 jQuery
ReactRouter的实现方法
2021/01/25 Javascript
python计算最小优先级队列代码分享
2013/12/18 Python
python字典序问题实例
2014/09/26 Python
Python使用matplotlib实现在坐标系中画一个矩形的方法
2015/05/20 Python
Python通过90行代码搭建一个音乐搜索工具
2015/07/29 Python
微信跳一跳python代码实现
2018/01/05 Python
Python cookbook(数据结构与算法)根据字段将记录分组操作示例
2018/03/19 Python
Python爬虫框架scrapy实现downloader_middleware设置proxy代理功能示例
2018/08/04 Python
解决pymysql cursor.fetchall() 获取不到数据的问题
2020/05/15 Python
Keras 数据增强ImageDataGenerator多输入多输出实例
2020/07/03 Python
如何理解transaction事务的概念
2015/05/27 面试题
如何写毕业求职自荐信
2013/11/06 职场文书
师德学习感言
2014/01/31 职场文书
学校教研活动总结
2014/07/02 职场文书
高中生期中考试失利检讨书
2014/10/23 职场文书
支行行长竞聘报告
2014/11/06 职场文书
python入门之算法学习
2021/04/22 Python
nginx内存池源码解析
2021/11/20 Servers