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 相关文章推荐
jQuery实现ajax调用WCF服务的方法(附带demo下载)
Dec 04 Javascript
实践中学习AngularJS表单
Mar 21 Javascript
EasyUI学习之Combobox级联下拉列表(2)
Dec 29 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
Mar 14 Javascript
原生js实现简单的焦点图效果实例
Dec 14 Javascript
vue-cli3.0 特性解读
Apr 22 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
Aug 22 Javascript
微信小程序使用canvas的画图操作示例
Jan 18 Javascript
使用Angular Cli如何创建Angular私有库详解
Jan 30 Javascript
JavaScript动态检测密码强度原理及实现方法详解
Jun 11 Javascript
Vue toFixed保留两位小数的3种方式
Oct 23 Javascript
JS轻量级函数式编程实现XDM三
Jun 16 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
整理的9个实用的PHP库简介和下载
2010/11/09 PHP
一个PHP分页类的代码
2011/05/18 PHP
php通过asort()给关联数组按照值排序的方法
2015/03/18 PHP
php编写的抽奖程序中奖概率算法
2015/05/14 PHP
php数字运算验证码的实现代码
2015/07/30 PHP
彻底搞懂PHP 变量结构体
2017/10/11 PHP
php 处理png图片白色背景色改为透明色的实例代码
2018/12/10 PHP
JavaScript基本编码模式小结
2012/05/23 Javascript
在浏览器窗口上添加遮罩层的方法
2012/11/12 Javascript
js 立即调用的函数表达式如何写
2014/01/12 Javascript
一段非常简单的js判断浏览器的内核
2014/08/17 Javascript
jQuery ztree实现动态树形多选菜单
2016/08/12 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
2016/10/14 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
2018/07/25 jQuery
Element UI框架中巧用树选择器的实现
2018/12/12 Javascript
js的各种数据类型判断的介绍
2019/01/19 Javascript
PHP读取远程txt文档到数组并实现遍历
2020/08/25 Javascript
python根据开头和结尾字符串获取中间字符串的方法
2015/03/26 Python
Python中动态创建类实例的方法
2017/03/24 Python
python读取各种文件数据方法解析
2018/12/29 Python
Python3简单实现串口通信的方法
2019/06/12 Python
python redis连接 有序集合去重的代码
2019/08/04 Python
在OpenCV里实现条码区域识别的方法示例
2019/12/04 Python
python_mask_array的用法
2020/02/18 Python
详解python程序中的多任务
2020/09/16 Python
安装pyinstaller遇到的各种问题(小结)
2020/11/20 Python
使用CSS3制作响应式导航菜单的方法
2015/07/12 HTML / CSS
Interhome丹麦:在线预订度假屋和公寓
2019/07/18 全球购物
美国伴娘礼服商店:Evening Collective
2019/10/07 全球购物
经理管理专业毕业自荐书范文
2014/02/12 职场文书
项目总经理岗位职责
2014/02/14 职场文书
初中高效课堂实施方案
2014/02/26 职场文书
民政局离婚协议书范本
2014/10/20 职场文书
谢师宴邀请函
2015/02/02 职场文书
Python中glob库实现文件名的匹配
2021/06/18 Python
python自动化操作之动态验证码、滑动验证码的降噪和识别
2021/08/30 Python