AngularJS 表单基本的验证功能

た入场券 2022-06-11 05:07 205阅读 0赞

代码：

<!DOCTYPE html>
    <html ng-app="app">
    <head>
    <title>表单的基本验证功能</title>
    <meta charset="utf-8"/> 
    <script src="../Script/angular.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="../bootstrap-3.0.0/css/bootstrap.css">
    <style type="text/css">
       body {
       	font-size: 14px;
       }
    
       input{
       	padding: 3px;
       }
    </style>
    </head>
    <body>
      <center>
        <form name="temp_form" ng-submit="save()" ng-controller="formsubmit">
        	<div>
        		<input type="text" name="t_name" ng-model="name" required />
        		<span ng-show="temp_form.t_name.$error.required">
        			姓名不能为空！
        		</span>
        	</div>
        	<div>
        		<input type="email" name="t_email" ng-model="email" required />
        		<span ng-show="temp_form.t_email.$error.required">
        			邮件不能为空！
        		</span>
        		<span ng-show="temp_form.t_email.$error.email">
        			邮件格式不对！
        		</span>
        	</div>
            <input type="submit" ng-disabled="temp_form.$invalid" value="提交">
        </form>
     </center>
        <script type="text/javascript">
        	var app = angular.module('app', []);
        	app.controller('formsubmit', ['$scope', function ($scope) {
                $scope.name = "海哥";
                $scope.email = "1150979148@qq.com";
                $scope.save = function () {
                	console.log("提交成功！");
                }
        	}]);
        </script>
    </body>
    </html>

截图：

![Center][]

![Center 1][]

[Center]: /images/20220611/9f844f29ec864c84b24e93f1465ad5ec.png
[Center 1]: /images/20220611/2b6e3ae4b4df47f290969b81aebb261d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，205人围观）

还没有评论，来说两句吧...

相关阅读

相关表单验证<AngularJs>

常用的表单验证指令 1. 必填项验证某个表单输入是否已填写，只要在输入字段元素上添加HTML5标记required即可： <input type="t

向右看齐/ 2022年09月25日 03:26/ 0 赞/ 262 阅读

相关 AngularJS表单验证

基本格式 <!DOCTYPE html> <html lang="en"> <head> <meta charse

拼搏现实的明天。/ 2022年07月14日 08:54/ 0 赞/ 274 阅读

相关 AngularJS 表单基本的验证功能

代码： <!DOCTYPE html> <html ng-app="app"> <head> <title>表单的基本验证功能</title

た入场券/ 2022年06月11日 05:07/ 0 赞/ 206 阅读

相关 AngularJS表单验证

一.常用的表单验证指令 <div class="col-md-6"> <form role="form" class="form-horizo

ゝ一世哀愁。/ 2022年04月06日 10:58/ 0 赞/ 271 阅读

相关 AngularJS——简单表单验证

　　客户端表单验证是AngularJS里面最酷的功能之一，AngularJS表单验证可以让你从一开始就写出一个具有交互性和可相应的现代HTML5表单。　　在AngularJ

女爷i/ 2022年04月06日 10:56/ 0 赞/ 422 阅读

相关表单验证(AngularJs)

这次，学习angularjs的表单的验证，angularjs提供上表几种状态验证： <table style="width:586px;"> <tbody> <tr

朴灿烈づ我的快乐病毒、/ 2022年03月27日 09:58/ 0 赞/ 286 阅读

相关 angularJS表单验证

最近因为毕设和工作原因需要学习angularJS技术，这里就记录一下自己学习angularJS表单验证的一些收获。一份简单的代码如下： <!DOCTYPE htm

待我称王封你为后i/ 2022年02月21日 01:48/ 0 赞/ 325 阅读

相关 AngularJs表单自动验证

angular-auto-validate 地址：https://github.com/jonsamwell/angular-auto-validate 引用： <scri

电玩女神/ 2021年12月22日 00:19/ 0 赞/ 382 阅读

相关 AngularJS表单验证

AngularJS提供丰富填写表单和验证。我们可以用ng-click来处理AngularJS点击按钮事件，然后使用 $dirty 和 $invalid标志做验证的

小鱼儿/ 2021年09月14日 06:58/ 0 赞/ 454 阅读

相关 angularJS表单验证

客户端表单验证是AngularJS里面最酷的功能之一。 AngularJS表单验证可以让你从一开始就写出一个具有交互性和可相应的现代HTML5表单。在AngularJ...

朱雀/ 2020年10月24日 18:06/ 0 赞/ 943 阅读