JavaScript框架之AngularJS学习——表单校验

最新推荐文章于 2024-04-23 01:23:56 发布

陈小名

最新推荐文章于 2024-04-23 01:23:56 发布

阅读量424

点赞数 1

分类专栏： AngularJS学习笔记文章标签： angularjs javascript 前端框架表单校验

本文链接：https://blog.csdn.net/chen_XiaoMing123/article/details/78179124

版权

AngularJS学习笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

AngularJS学习——表单校验

Web前端数据校验的意义在于改善用户体验，用户不用等到将数据提交到服务器就知道哪些数据是不合法的，这样也能够减轻应用服务器的压力。

AngularJS表单校验模式

为说明AngularJS在作用域中会维护一个状态属性，举例说明

eg:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>模板</title>
	<script src="../lib/angular-1.6.5/angular.min.js"></script>
<body ng-app>
	<form>
		<input type="text" ng-model="name">
	</form>
</body>
</html>

在Chrome浏览器中打开该页面控制台，查看input相关属性

AngularJS框架启动时会自动为ng-model所在标签添加CSS样式。

对于这些CSS样式，AngularJS在作用域中会维护一个状态属性与之对应。

对应关系：

CSS样式与状态属性对应关系
CSS样式	状态属性	描述
ng-valid	$valid	表单输入合法
ng-invalid	$invalid	表单输入不合法
ng-pristine	$pristine	表单元素未被使用
ng-dirty	$dirty	表单元素被使用
ng-touched	$touched	元素获取焦点
ng-untouched	$untouched	元素失去焦点
ng-empty	$empty	元素内容为空

我们只需要关注这些状态的值即可知道表单输入数据是否合法。

eg:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>模板</title>
	<script src="../lib/angular-1.6.5/angular.min.js"></script>
<body ng-app>
	<form name="user">  
		<input type="email" name="email" ng-model="email" required/>
		<span ng-show="user.email.$invalid">内容输入不合法</span>
	</form>
</body>
</html>

使用required属性指定输入框必须输入，且数据类型必须与设置一致。

常用AngularJS表单校验相关的属性和指令

required
ng-minlength
ng-maxlength
ng-pattern
type="email"/type="number"/type="url"

eg:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>模板</title>
	<script src="../lib/angular.min.js"></script>
	<style>
		input.ng-invalid{
			border:#f00 1px solid;
		}
	</style>
</head>
<body ng-app="">
	<form name="user">
		<div>
			<label>Email:</label>
			<input type="email"
				name="email"
				minlength="10"
				maxlength="20"
				ng-model="email"
				required/>
			<span ng-show="user.email.$error.required">内容不能为空</span>
			<span ng-show="user.email.$error.minlength">长度不能小于10</span>
			<span ng-show="user.email.$error.maxlength">长度不不能大于20</span>
			<span ng-show="user.email.$error.email">不符合Email格式</span>
		</div>
	</form>
</body>
</html>

上面例子对输入数据要求：类型为email，最小长度为10，最大长度为20，必须输入。
复制代码查看相关效果，观察控制台中span标签的class变化。

ngMessages模块

ngMessages模块是AngularJS1.3之后新增的表单验证相关的模块。

使用是需要在页面中引入

<script src="../lib/angular-1.6.5/angular-messages.js"></script>

在自定义模块中添加ngMessages模块的依赖

<script>
	angular.module("myApp",["ngMessages"]);
</script>

eg:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>ngMessage模块</title>
	<script src="../lib/angular-1.6.5/angular.min.js"></script>
	<!-- ngMessages模块 -->
	<script src="../lib/angular-1.6.5/angular-messages.js"></script>
</head>
<body ng-app="myApp">
	<form name="exampleForm" class="elegant-aero">

		<label>用户名：</label>
		<input type="text" name="userFirstName" ng-model="firstName" required/>
		<div ng-messages="exampleForm.userFirstName.$error">
			<div ng-message="required">姓名不能为空</div>
		</div>

		<label>邮箱地址：</label>
		<input type="email" name="userEmail" ng-model="userEmail" required/>
		<div ng-messages="exampleForm.userEmail.$error">
			<div ng-message="required">Email不能为空</div>
			<div ng-message="email">Email地址不合法</div>
		</div>

		<label>手机号码：</label>
		<input type="email" name="userPhoneNumber" ng-model="phoneNumber" ng-pattern="/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/" required/>
		<div ng-messages="exampleForm.userPhoneNumber.$error">
			<div ng-message="required">手机号不能为空！</div>
			<div ng-message="pattern">手机号码不合法！</div>
		</div>
		
		<label>留言信息</label>
		<textarea type="text" name="userMessage" ng-model="message" ng-maxlength="100" ng-minlength="10" required/></textarea>
		<div ng-messages="exampleForm.userMessage.$error" >
			<div ng-message="required">用户留言不能为空</div>
			<div ng-message="maxlength">留言信息长度不能多于100个字符！</div>
			<div ng-message="minlength">留言信息长度不能少于10个字符</div>
		</div>

		<label>测试</label>
		<input type="text" name="test" ng-model="test" required/>
		<div ng-messages="exampleForm.test.$error">
			<div ng-message="required">内容不能为空</div>
		</div>
	</form>
	<script>
		angular.module("myApp",["ngMessages"]);
	</script>
</body>
</html>

ng-messages也是用到前面的$error对象，ng-message指令用于定义具体某一条表单输入不合法输入时的提示信息。

例子中，可以看到有的ng-messages包含多个错误提示信息，如：留言信息，有三种错误类型提示。如果同时出现三种错误，则按照ng-message指令从上到下的顺序提示第一条匹配的错误信息。

如果错误信息提示相同，则可以将相同的错误信息放在一个文件中，然后通过ng-messages-include指令引入。

<div ng-messages="exampleForm.userMessage.$error" ng-messages-include="errors/errors.html"></div>

以上笔记整理自个人学习，用做个人学习分享

陈小名

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript框架之AngularJS学习——表单校验

AngularJS学习——表单校验Web前端数据校验的意义在于改善用户体验，用户不用等到将数据提交到服务器就知道哪些数据是不合法的，这样也能够减轻应用服务器的压力。AngularJS表单校验模式为说明AngularJS在作用域中会维护一个状态属性，举例说明eg: 模板在Chrome浏览器中打开该页面控制台，查看input相关
复制链接

扫一扫