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


Posted in Javascript onNovember 02, 2016

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

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

WEB前端数据校验的意义在于改善用户体验,用户不用等到?⑹?萏峤坏椒?衿骱蟛胖?滥男┦?菔遣缓戏ǖ摹?/p>

使用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="angular-1.3.0.14/angular.js"></script>
  <script type="text/javascript" src="angular-1.3.0.14/angular-messages.js"></script>
  <title>tutorial06_1</title>
  <style>
    input.ng-invalid {
      border: 1px solid red;
    }
    input.ng-valid {
      border: 1px solid green;
    }
  </style>
</head>
<body>
<div>
  <form name="loginForm" novalidate ng-submit="login()" ng-controller="LoginController">
    <div style="width:280px;float:left">
      <label>用户名:</label>
      <input type="text" placeholder="请输入用户名" name="uname" ng-model="uname" ng-minlength=
          3 ng-maxlength=10 required />
    </div>
    <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>
    <br/><br/>
    <button type="submit">提交</button>
  </form>
</div>
<script>
  var loginMod = angular.module('loginMod', ['ngMessages']);
  loginMod.controller("LoginController",function($scope,$log){
    $scope.login = function()
    {
      $log.info("点击了按钮");
    }
  });
</script>
</body>
</html>

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

<script type="text/javascript" src="angular-1.3.0.14/angular-messages.js">

除此之外还要告诉AngularJs??gMessages作为应用程序的依赖模块引入,像下面这个样子:

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程序设计有所帮助。

Javascript 相关文章推荐
javascript jQuery插件练习
Dec 24 Javascript
js数字输入框(包括最大值最小值限制和四舍五入)
Nov 24 Javascript
picChange 图片切换特效的函数代码
May 06 Javascript
使用jquery插件实现图片延迟加载技术详细说明
Mar 12 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
Oct 10 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
May 24 Javascript
jQuery简单实现仿京东分类导航层效果
Jun 07 Javascript
JavaScript ES6的新特性使用新方法定义Class
Jun 28 Javascript
微信端开发--登录小程序步骤
Jan 11 Javascript
纯js模仿windows系统日历
Feb 04 Javascript
babel之配置文件.babelrc入门详解
Feb 22 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
Mar 22 Javascript
JQuery Ajax WebService传递参数的简单实例
Nov 02 #Javascript
ASP.NET jquery ajax传递参数的实例
Nov 02 #Javascript
Javascript 正则表达式校验数字的简单实例
Nov 02 #Javascript
在JSP中如何实现MD5加密的方法
Nov 02 #Javascript
AngularJS入门教程之过滤器用法示例
Nov 02 #Javascript
JavaScript基础——使用Canvas绘图
Nov 02 #Javascript
js实现砖头在页面拖拉效果
Nov 20 #Javascript
You might like
剖析 PHP 中的输出缓冲
2006/12/21 PHP
PHP设计模式之命令模式的深入解析
2013/06/13 PHP
PHP入门教程之正则表达式基本用法实例详解(正则匹配,搜索,分割等)
2016/09/11 PHP
HTML-CSS群中单选引发的“事件”
2007/03/05 Javascript
起点页面传值js,有空研究学习下
2010/01/25 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
2013/09/09 Javascript
Javascript全局变量var与不var的区别深入解析
2013/12/09 Javascript
JavaScript 作用域链解析
2014/11/13 Javascript
浅谈轻量级js模板引擎simplite
2015/02/13 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
2016/05/31 Javascript
Laravel中常见的错误与解决方法小结
2016/08/30 Javascript
jQuery给指定的table动态添加删除行的操作方法
2016/10/12 Javascript
Bootstrap CSS使用方法
2016/12/23 Javascript
详解Angular2组件之间如何通信
2017/06/22 Javascript
Vue组件和Route的生命周期实例详解
2018/02/10 Javascript
微信小程序日历组件使用方法详解
2018/12/29 Javascript
详解Vue.js v-for不支持IE9的解决方法
2018/12/29 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
2019/09/05 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
2019/12/02 Javascript
JavaScript实现打砖块游戏
2020/02/25 Javascript
Flexible.js可伸缩布局实现方法详解
2020/11/13 Javascript
[01:45:05]VGJ.T vs Newbee Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
Python中的类与对象之描述符详解
2015/03/27 Python
使用Kivy将python程序打包为apk文件
2017/07/29 Python
对pandas中两种数据类型Series和DataFrame的区别详解
2018/11/12 Python
Python字典中的值为列表或字典的构造实例
2019/12/16 Python
解决jupyter notebook 前面书写后面内容消失的问题
2020/04/13 Python
浅谈Python 参数与变量
2020/06/20 Python
美体小铺印度官网:The Body Shop印度
2019/10/17 全球购物
中医临床专业自我鉴定范文
2014/01/15 职场文书
市场部管理制度
2014/02/02 职场文书
初一新生军训方案
2014/05/22 职场文书
工程负责人任命书
2014/06/06 职场文书
办理信用卡收入证明范例
2014/09/13 职场文书
2015年教务主任工作总结
2015/07/22 职场文书
Sql Server 行数据的某列值想作为字段列显示的方法
2022/04/20 SQL Server