angularJS提交表单（form）

代码很简单，就不多废话了，直接奉上代码：

代码如下:

<!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表单验证，希望大家能够喜欢。

赞 (0)

相关推荐

  • AngularJS模仿Form表单提交的实现代码

    废话不多说了,直接给大家贴代码了. $http({ url: "http://localhost:10086/yuanxin/Conference/ImportExcelDataForBusRoute", method: 'Post', headers: { 'Content-Type': 'multipart/form-data' }, data: { BusRoute: file, ConferenceID: "1" }, transformRequest: f

  • angularjs $http实现form表单提交示例

    需求:请求第三方后台接口返回一段html字符串如下,由前端去实现form表单的POST提交, 说明:form表单submit()实现自动提交input标签hidden,注意script代码中的document.redirect.submit(); <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head

  • Jquery基于Ajax方法自定义无刷新提交表单Form实例

    本文实例讲述了Jquery基于Ajax方法自定义无刷新提交表单Form的方法.分享给大家供大家参考.具体实现方法如下: Jquery的$.ajax方法可以实现ajax调用,要设置url,post,参数等. 如果要提交现有Form需要写很多代码,何不直接将Form的提交直接转移到ajax中呢. 以前的处理方法: 如Form代码如下: 复制代码 代码如下: <form id="Form1" action="action.aspx" method="pos

  • 如何防止INPUT按回车自动提交表单FORM

    form中的input只有一个,input获得焦点时按回车会form自动提交: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <form action="http://blog.csdn.net/gnail_oug" method=&qu

  • Jquery提交表单 Form.js官方插件介绍

    先说说常用的Form插件,支持Ajax,支持Ajax文件上传,功能强大,基本满足日常应用. 1.最新JQuery框架软件包下载 jquery.js压缩包 jquery.js非压缩包 2.Form插件下载 form.js 3.Form插件的简单入门 第一步:先增加一个表单 代码: 复制代码 代码如下: <form id="myForm" action="comment.php" method="post"> Name: <inpu

  • angularJS提交表单（form）

    代码很简单,就不多废话了,直接奉上代码: 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <script src="http://localhost:81/js/jquery.js"> </script> <scrip

  • 详细分析使用AngularJS编程中提交表单的方式

    详细分析使用AngularJS编程中提交表单的方式

    在AngularJS出现之前,很多开发者就面对了表单提交这一问题.由于提交表单的方式繁杂而不同,很容易令人疯掉--然而现在看来,依然会让人疯掉. 今天,我们会看一下过去使用PHP方式提交的表单,现在如何将其转换为使用Angular提交.使用Angular来处理表单,对我而言,是一个"啊哈"时刻(译者:表示了解或发现某事物的喜悦).即使它甚至都没有涉及多少Angular表层的东西,但是它却帮助用户看到表单提交之后的潜力,并且理解两种数据绑定方式. 我们会使用jQuery平台来进行这个处理

  • JS中的form.submit()不能提交表单的错误原因

    直接上代码把: 复制代码 代码如下: <div id="register">      <h4>会员注册</h4>      <div class="formdiv">          <form method="post" action="register.php?action=register" name="register" id="r

  • form.submit()不能提交表单的错误原因及解决方法

    直接上代码把: <div id="register"> <h4>会员注册</h4> <div class="formdiv"> <form method="post" action="register.php?action=register" name="register" id="registerForm"> <dl&g

  • form.submit()不能提交表单的原因分析

    直接上代码把: 复制代码 代码如下: <div id="register"> <h4>会员注册</h4> <div class="formdiv"> <form method="post" action="register.php?action=register" name="register" id="registerForm"&g

  • jquery.form.js异步提交表单详解

    本文实例为大家分享了jquery.form.js异步提交表单的具体代码,供大家参考,具体内容如下 引入脚本: <script type="text/javascript" src="/js/jquery.form.min.js"></script> <script src="/js/json2.js"></script> //前端代码: <form id="f1">

  • Form表单按回车自动提交表单的实现方法

    1.form表单中只有一个input标签,按回车键将自动提交表单 当form表单中只有一个<input type="text" name='name' />时按回车键将会自动将表单提交. <form id='form1' action='a1.jsp' method='post'> <input type='text' name='name' /> </form> 如果不想让其自动提交可以这样做: 再添加一个<input type=

随机推荐