angular表单验证

原创 2016年08月29日 14:39:03

angular表单验证主要涉及以下指令

  • name:表单字段的属性名
  • ng-pattern:正则表达式
  • ng-required:必填
  • required:必填
  • ng-minlength:最小长度
  • ng-maxlength:最大长度
  • ng-trim:是否自己裁掉头尾空白,默认为true
看例子:
<!DOCTYPE html>
<html ng-app="app">
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
  <title></title>
  <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
  <div ng-controller="ctrl1">
    <form name="myForm">
      <input ng-pattern="/^[0-9]{5}$/" name="fieldA" placeholder="5个数字" ng-model="myData.fieldA"/>
      <input ng-required="true" name="fieldB" placeholder="必填" ng-model="myData.fieldB"/>
      <input ng-minlength="5" name="fieldC" placeholder="最少5个字符" ng-model="myData.fieldC"/>
      <input ng-maxlength="5" name="fieldD" placeholder="最多5个字符" ng-model="myData.fieldD"/>
      <button ng-disabled="myForm.$invalid">提交</button>
    </form>
    <div>
      <div>fieldA error:{{myForm.fieldA.$error}}</div>
      <div>fieldB error:{{myForm.fieldB.$error}}</div>
      <div>fieldC error:{{myForm.fieldC.$error}}</div>
      <div>fieldD error:{{myForm.fieldD.$error}}</div>
      <div>myForm.$error.required = {{!!myForm.$error.required}}</div>
      <div>myForm.$error.minlength = {{!!myForm.$error.minlength}}</div>
      <div>myForm.$error.maxlength = {{!!myForm.$error.maxlength}}</div>
      <div>myForm.$error.pattern = {{!!myForm.$error.pattern}}</div>
    </div>
  </div>
  <script>
    var app = angular.module('app',[]);
    app.controller('ctrl1',['$scope',function($scope){
      debugger;
    }])

  </script>
</body>
</html>

form一定要有name属性,这样angular才会给$scope加入myForm属性。

版权声明:本文为博主原创文章,未经博主允许不得转载。

angular之表单验证

angular表单验证 input.ng-invalid { border: 1px solid red; } ...
  • evelen
  • evelen
  • 2017年03月20日 17:03
  • 328

AngularJS 表单验证

本篇文章出自AngularJS基础教程 1. 简介  能够验证用户在表单中输入的内容是否合理与正确是十分重要的,而这个验证不能仅仅基于后端,因为对其中的内容实时反馈是很重要的,我们也必须在前端尽可能的...
  • qq_20448859
  • qq_20448859
  • 2016年08月11日 17:31
  • 2589

《angular2入门系列实践》——表单验证详解

背景:      最近在itoo页面调整的时候,发现页面表单或者是文本框没有做基本的判断操作,所以着手demo一篇,希望对大家有帮助!!1.创建表单组件:ng g c login2.1单规则验证:...
  • changyinling520
  • changyinling520
  • 2017年09月02日 20:16
  • 1665

AngularJs的表单验证

在AngularJs的管辖下,每个表单form都会创建一个ngFormController的一个实例。在表单里面的每个input都会创建一个在这个实例下的ngModelController实例,用以控...
  • oak160
  • oak160
  • 2016年11月24日 16:51
  • 535

AngularJS自定义表单验证

Angular实现了大部分常用的HTML5的表单控件的类型(text, number, url, email, date, radio, checkbox),也实现了很多指令做为验证(required...
  • Jax2000
  • Jax2000
  • 2016年05月29日 13:19
  • 3532

AngularJs轻松入门(六)表单校验

表单数据的校验对于提高WEB安全性意义不大,因为服务器接收到的请求不一定来自我们的前端页面,有可能来自别的站点,黑客可以自己做一个表单,把数据提交到我们的服务器(即跨站伪造请求),这样就绕过了前端页面...
  • Rongbo_J
  • Rongbo_J
  • 2015年05月03日 19:03
  • 7374

angular表单验证及 提交功能实现

本例通过Angular框架来实现简单的表单验证一、html结构 1、借助于bootstrap快速的编写了一个简单的表单 代码主要部分如下: 用户表单提交 ...
  • Sophie_U
  • Sophie_U
  • 2017年02月01日 00:25
  • 516

AngularJs 自定义表单验证

一、AngularJs中的表单验证,仅提供了一些前台格式验证,如果想通过后台验证,则需要自定义处理 自定义指定使用ajax后台验证示例: form .ng-invalid...
  • u011127019
  • u011127019
  • 2017年07月17日 16:08
  • 239

Angular自定义指令实现一般性的表单验证

指令的生命周期 inject阶段 directive将指令注入使得HTML模板可以使用; complie和link .directive('myDirective',function(){ ...
  • mzzzzq
  • mzzzzq
  • 2016年11月24日 16:04
  • 1162

Angular开发(十一)-关于响应式表单及表单的校验

正在书写中
  • kuangshp128
  • kuangshp128
  • 2017年05月09日 14:49
  • 420
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:angular表单验证
举报原因:
原因补充:

(最多只允许输入30个字)