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表单验证

  • 2016年04月22日 17:58
  • 150KB
  • 下载

慕课网angular表单验证demo.rar

  • 2017年07月18日 10:46
  • 668KB
  • 下载

第15篇:angular表单验证

原文地址:http://lib.csdn.net/article/angularjs/33619 Q:novalidate:阻止常规的表单提交 //如果你要自己定义验证方式,那么请加上novalida...

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

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

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

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

angular之表单验证

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

angular表单验证笔记篇

一,angular基础指令(笔记见本地新加卷盘)

用angular做表单验证

先上图 看到红色箭头所示,有注意两点: 当文本框获得焦点的时候,有一个box-shadow的效果 同时会有验证 都知道input是单标签(不闭合)的元素,为了实现这个效果,就需要用到div将in...

angular搜索 过滤 批量删除 添加 表单验证等小集成

Title *{ margin: 0; padding: 0; } ....

JS 表单验证

  • 2017年11月09日 12:31
  • 142KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:angular表单验证
举报原因:
原因补充:

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