angularjs简单表单校验

谁借莪１个温暖的怀抱￠ 2022-07-14 22:50 183阅读 0赞

<!DOCTYPE html>
    <html ng-app="app">
    <head>
    	<meta charset="utf-8">
    	<title>EE</title>
    	<script type="text/javascript" src="angular.min.js"></script>
    	<style type="text/css">
    		body {
    			font-size: 12px;
    		}
    		input  {
    			padding: 3px;
    		}
    	</style>
    </head>
    <body>
    
    <form name="temp_form"
    	ng-submit="save()"
    	ng-controller="c14">
    	
    	<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>
    
    <script type="text/javascript">
    	var app = angular.module("app", []);
    	app.controller("c14", ['$scope', function($scope) {
    		$scope.name = "raid";
    		$scope.email = "222222";
    		$scope.save = function() {
    			console.log("提交成功");
    		}
    	}])
    </script>
    
    </body>
    </html>

发表评论取消回复

表情：

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

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

相关阅读

相关表单校验

select chargeType: [ { required: true, message: "请选择计费方式", trigger

女爷i/ 2022年11月14日 15:58/ 0 赞/ 179 阅读

相关表单验证<AngularJs>

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

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

相关 AngularJs轻松入门（六）表单校验

表单数据的校验对于提高WEB安全性意义不大，因为服务器接收到的请求不一定来自我们的前端页面，有可能来自别的站点，黑客可以自己做一个表单，把数据提交到我们的服务器（即跨站伪造请求

灰太狼/ 2022年08月08日 05:11/ 0 赞/ 206 阅读

相关深究AngularJS——校验（非form表单）

为什么是非form表单？因为基本上都是通$http服务异步发送与接收数据，没有form表单个一样可以。更何况，form表单的提交校验在哪里都可以搜索得到，我这个是通过自己总结出

浅浅的花香味﹌/ 2022年07月24日 04:28/ 0 赞/ 181 阅读

相关 angularjs简单表单校验

<!DOCTYPE html> <html ng-app="app"> <head> <meta charset="utf-8">

谁借莪１个温暖的怀抱￠/ 2022年07月14日 22:50/ 0 赞/ 184 阅读

相关 AngularJS表单验证

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

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

相关表单校验

表单数据提交后，在服务器端编程校验数据合法性，是一个很常见的需求。所以struts的ActionServlet在把数据封装到formbean后，会自动调用formbean

青旅半醒/ 2022年05月15日 03:51/ 0 赞/ 283 阅读

相关 AngularJS——简单表单验证

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

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

相关 AngularJs表单校验实例

app.html <!DOCTYPE html> <html ng-app="angularFormCheckModule"> <head>

╰半夏微凉°/ 2022年04月06日 10:56/ 0 赞/ 228 阅读

相关 AngularJS表单验证

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

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