AngularJS入门教程中的表单验证用法示例

本文说明了AngularJS表单验证的用法。分享给大家参考，如下：

表单数据的验证对于提高WEB安全性意义不大，因为服务器收到的请求可能不是来自我们的首页，而是可能来自其他站点。黑客可以自行制作表格，将数据提交给我们的服务器(即跨站点伪造请求)，从而绕过首页的验证。如果你熟悉HTTP协议，甚至可以在程序中手工构造一个HTTP请求并发送给服务器，所以服务器端的数据验证是绝对必要的。

WEB前端数据验证的意义在于提升用户体验，用户不用等向服务器提交数据才知道哪些数据是非法的。

使用AngularJS验证表单元素非常方便。让我们看看可以在输入元素上使用的所有验证选项。

1.必需的项目

要验证是否填写了表单输入，只需在输入字段元素上添加所需的HTML5标记：

输入类型='text '必填/2。最小长度

要验证表单输入的文本长度是否大于某个最小值，请在输入字段中使用AngularJS指令ng-min leng=“{ number }”:

输入类型=' text' ng-minlength=' 5'/3。最大长度

验证表单中输入的文本长度是否小于或等于某个最大值，并在输入字段中使用AngularJS指令ng-maxlength=“{ number }”:

输入类型=' text' ng-maxlength=' 20'/4。模式匹配

使用ng-pattern='/PATTERN/'确保输入可以匹配指定的正则表达式：

输入类型=' text' ng-pattern=' [a-za-z]'/5。电子邮件

要验证输入内容是否为电子邮件，只需将输入类型设置为电子邮件，如下所示：

输入类型=' email '名称=' email' ng-model=' user。电子邮件'/6。民数记

验证输入是否为数字，并将输入类型设置为数字：

输入类型=' number ' name=' age ' ng-model=' user . age '/7。统一资源定位器

验证输入内容是否为url，并将输入类型设置为URL:

输入类型='网址'名称='主页' ng-模型='用户。脸书_ URL '/让我们来看看一个具体的案例代码：

！DOCTYPE html html ng-app=' loginMod ' head lang=' en ' meta charset=' UTF-8 '脚本类型=' text/JavaScript ' src=' http : angular-1 . 3 . 0 . 14/angular . js '/脚本脚本类型=' text/JavaScript ' src=' http : angular-1 . 3 . 0 . 14/angular-messages . js '/脚本title tutori l06 _ 1/title style input . ng-无效{ 0} input.ng-valid { border: 1px纯绿色；}/style/head dydiv表单名称=' loginFOrm ' novalidate ng-submit=' log in()' ng-controller=' LoginController ' div style=' width :280 px；float:left' label用户名：/labe input type=' text ' placeholder='请输入用户名' name=' uname ' ng-model=' uname ' ng-min length=3ng-max length=10 required//div class=' error ' ng-messages=' loginFOrm . uname . $ error ' style=' color : red；Div ng-message='required '用户名不能为空/div ng-message=' min length '用户名必须至少为3/div ng-message=' maxlength '用户名不能超过10/div /div br/br/Button类型=' submit ' submit/Button/form/div script var login module=angular . module(' login mod '，[' ng messages '])；Loginmod。控制器('登录控制器'，函数($ scope，$ log) {$ scope。login=function () {$ log.info('按钮已单击')；} });/script/body/html表单检查被封装在angular-messages.js文件中，作为AngularJs的一个ngMessages模块，我们必须介绍它：

脚本类型=' text/JavaScript ' src=' http : angular-1 . 3 . 0 . 14/angular-messages . js '此外，告诉AngularJs引入ngMessages作为应用程序的依赖模块，如下所示：

var login mod=angular . module(' login mod '，[' ngMessages '])；Required将文本框指定为必填项，ng-minlength指定最小长度，ng-maxlength指定最大长度，验证工作在AngularJs内部完成，因此我们只需要定义不满足条件时的提示信息：

div class=' error ' ng-messages=' loginFOrm . uname . $ error ' style=' color : red；'Div ng-message='required '用户名不能为空/div ng-message=' min length '用户名必须至少为3/div ng-message=' maxlength '用户名不得超过10/div/div。最后，让我们看看浏览器中的效果：

我们还可以将提示信息写在一个单独的errors.html文件中：

Div ng-message='required '用户名不能为空/divdiv ng-message='minlength '用户名必须至少为3/divdiv ng-message='maxlength '用户名必须不超过10/div。然后在页面中使用ng-messages-include属性来介绍这些信息：

div class=' error ' ng-messages=' loginFOrm . uname . $ error ' style=' color : red；'ng-messages-include=' errors/errors . html '/divangularjs源代码可以在这里下载。

希望本文对AngularJS编程有所帮助。