前端讲义65_AngularJS表单相关指令应用

最新推荐文章于 2024-04-16 23:59:52 发布

木生火

最新推荐文章于 2024-04-16 23:59:52 发布

阅读量137

点赞数

分类专栏： Angular

本文链接：https://blog.youkuaiyun.com/msh2016/article/details/91313474

版权

Angular 专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何使用Angular对表单控件进行扩展和验证，包括text、number等10种输入类型，以及四种内置CSS样式和校验器。通过实例展示了如何设置必填项、最大和最小长度限制，并使用ng-model实现双向数据绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ng
对input元素的type进行了扩展，一共提供了以下10中类型：text, number, url , email, radio, checkbox, hidden, button, submit, reset
对表单内置4种CSS样式：ng-valid, ng-invalid, ng-pristine, ng-dirty
对表单内置校验器：require, minlength, maxlenghth

案例代码
ng-pristine 表单未填写时的CSS样式
ng-valid 表单验证有效时的CSS样式
ng-invalid 表单验证无效时的CSS样式
required 指定表单控件必须填写

ng-maxlength="6" 指定表单控件填写内容的最大长度6---用户名
ng-minlength="6" 指定表单控件填写内容的最小长度6---密码
ng-model="user.password" 指定表单控件双向绑定的变量
ng-submit="save()" 指定该表单提交事件的处理函数save()
ng-disabled="myForm.$invalid" 检验提交按钮的是否可用根据表单的验证状态

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<style>
.my-form {transition:all linear 0.5s;background: transparent;}
/* 定义表单未填写时的CSS样式 */
.my-form.ng-pristine {background: lightGray;}
/* 定义表单验证无效时的CSS样式 */
.my-form.ng-invalid {background: lightGray;}
/* 定义表单验证有效的CSS样式 */	
.my-form.ng-valid{background: green;}
</style>
	
</head>
<body  ng-app="mshApp">
<form name="myForm" class="my-form" ng-submit="save()" ng-controller="formCrtl" >
	用户：<input name="userName" type="text" ng-model="user.userName" ng-maxlength="9" required /><p>
	密码：<input name="password" type="password" ng-model="user.password" ng-minlength="6" required/><p>
	<input type="submit" ng-disabled="myForm.$invalid"/>
</form>
<script>
var app = angular.module('mshApp',[]);
app.controller("formCrtl",setUser);
function setUser($scope){
 $scope.user = {
		userName :'',
		password :''
		};
$scope.save = function(){
	alert("保存数据！"+$scope.user.userName+"-"+$scope.user.password);
	}
};
</script>
</body>
</html>