验证器
描述
required
正如前面所讨论的那样,这确保字段是必需的,字段标记为无效,直到填写。
ng-required
与required不同,这标志着字段也是必需的,ng-required指令允许我们基于控制器布尔条件标记输入字段为必需。
ng-minlength
该指令可以设定输入文本值的最小长度
ng-maxlength
该指令可以设定文本输入值的最小长度
ng-pattern
作为这个指令的一部分,文本输入的有效性可以针对指定的正则表达式模式进行检查。
type=”email”
文本输入内置电子邮件验证。
type=”number”
带有数量验证的文本输入。也可以有最小和最大值的附加属性。
type=”date”
如果浏览器支持,显示一个HTML日期选择器。否则,默认为一个文本输入。ng-model
绑定到日期对象。预计日期格式为yyyy-mm-dd(例如2009-10-24)。
type=”url”
带有输入验证的URL文本输入。
此外,我们可以编写自己的验证器,我们将在后面章节这个问题。
显示错误消息
我们能用这些验证器做些什么呢?当然可用来检查表单的有效性,并相应地禁用保存或更新按钮。但是我们也要告诉用户错在哪里、如何修正。AngularJS提供两种方案来解决这个问题:
模型准确反映表单错误是什么,我们可以使用它来显示更友好的错误消息。
自动从每个字段添加和删除的CSS类允许我们的突出表单错误。
首先让我们看一看如何根据错误对象显示特定的错误消息,看下面的例子:
<html ng-app="notesApp">
<head><title>Notes App</title></head>
<body ng-controller="MainCtrl as ctrl">
<form ng-submit="ctrl.submit()" name="myForm">
<input type="text"
name="uname"
ng-model="ctrl.user.username"
required
ng-minlength="4">
<span ng-show="myForm.uname.$error.required">
This is a required field
</span>
<span ng-show="myForm.uname.$error.minlength">
Minimum length required is 4
</span>
<span ng-show="myForm.uname.$invalid">
This field is invalid
</span>
<input type="password"
name="pwd"
ng-model="ctrl.user.password"
required>
<span ng-show="myForm.pwd.$error.required">
This is a required field
</span>
<input type="submit"
value="Submit"
ng-disabled="myForm.$invalid">
</form>
<script src="http://riafan.com/libs/angular.js"></script>
<script type="text/javascript">
angular.module('notesApp', [])
.controller('MainCtrl', [function() {
var self = this
self.submit = function() {
console.log('User clicked submit with ', self.user)
}
}])
</script>
</body>
</html>
在使用vite构建项目时,报错events.js:291 throw er;终端输入 node node_modules/esbuild/install.js
然后重新运行 npm run build