华山资源网

AngularJS入门教程之表单校验用法示例
网络编程 2024/11/18 佚名
3 1

本文实例讲述了AngularJS表单校验用法。分享给大家供大家参考，具体如下：

表单数据的校验对于提高WEB安全性意义不大，因为服务器接收到的请求不一定来自我们的前端页面，有可能来自别的站点，黑客可以自己做一个表单，把数据提交到我们的服务器（即跨站伪造请求），这样就绕过了前端页面的校验。如果对HTTP协议比较熟，甚至还可以在程序中手动构造一段HTTP请求发到服务器，所以服务器端的数据校验绝对是必不可少的。

WEB前端数据校验的意义在于改善用户体验，用户不用等到將数据提交到服务器后才知道哪些数据是不合法的。

使用AngularJS对表单元素进行校验是相当方便的，我们来看一下可以在input元素上使用的所有校验选项。

1.必填项

验证某个表单输入是否已填写，只要在输入字段元素上添加HTML5标记required即可：

<input type="text" required />

2. 最小长度

验证表单输入的文本长度是否大于某个最小值，在输入字段上使用AngularJS指令ng-minleng= "{number}"：

<input type="text" ng-minlength="5" />

3. 最大长度

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

<input type="text" ng-maxlength="20" />

4. 模式匹配

使用ng-pattern="/PATTERN/"来确保输入能够匹配指定的正则表达式：

<input type="text" ng-pattern="[a-zA-Z]" />

5. 电子邮件

验证输入内容是否是电子邮件，只要像下面这样将input的类型设置为email即可：

<input type="email" name="email" ng-model="user.email" />

6. 数字

验证输入内容是否是数字，将input的类型设置为number：

<input type="number" name="age" ng-model="user.age" />

7. URL

验证输入内容是否是URL，将input的类型设置为 url：

<input type="url" name="homepage" ng-model="user.facebook_url" />

我们看一下具体的一个案例代码：

<!DOCTYPE html>
<html ng-app="loginMod">
<head lang="en">
  <meta charset="UTF-8">
  <script type="text/javascript" src="/UploadFiles/2021-04-02/angular.js">


表单校验作为AngularJs的一个ngMessages模块封装在angular-messages.js文件中，我们必须引入它：





<script type="text/javascript" src="/UploadFiles/2021-04-02/angular-messages.js">


除此之外还要告诉AngularJs將ngMessages作为应用程序的依赖模块引入，像下面这个样子：





var loginMod = angular.module('loginMod', ['ngMessages']);







required指定文本框为必输项，ng-minlength指定最小长度，ng-maxlength指定最大长度，校验工作是AngularJs内部完成的，我们只需要定义不满足条件时的提示信息：





<div class="error" ng-messages="loginForm.uname.$error" style="color:red;">
  <div ng-message="required">用户名不能为空</div>
  <div ng-message="minlength">用户名长度至少为3</div>
  <div ng-message="maxlength">用户名长度不能超过10</div>
</div>







最后我们在浏览器中看一下效果：


AngularJS入门教程之表单校验用法示例


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





<div ng-message="required">用户名不能为空</div>
<div ng-message="minlength">用户名长度至少为3</div>
<div 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">
</div>







AngularJS源码可点击此处本站下载。


希望本文所述对大家AngularJS程序设计有所帮助。
华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com