彻底弄懂angularJS表单验证

常用的表单验证指令（基本概念）

1. 必填项验证

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

<input type="text" required />

2. 最小长度

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

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

3. 最大长度

验证表单输入的文本长度是否小于或等于某个最大值，在输入字段上使用指令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" />

我们使用了 ng-show指令， color:red 在邮件是 $dirty 或 $invalid 才显示:

属性	描述
$dirty	表单有填写记录
$valid	字段内容合法的
$invalid	字段内容是非法的
$pristine	表单没有填写记录

示例（以邮箱为例+正则表达式引入angular+bootstrap）

ng正则表达式写法：

ng-pattern=" /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/"  //邮箱验证

<body  ng-Controller="MyController">  //ng-app标在html标签上

<div class="col-md-6">

  <form role="form" name="myForm" ng-submit="submitForm(myForm.$valid)" class="form-horizontal" novalidate>

    <div class="form-group  has-feedback">

      <div class="col-md-4">

        <label for="email"> 电子邮件</label>

      </div>

      <div class="col-md-6">

        <input type="email" id="email" name="email" ng-minlength="5" ng-maxlength="30" ng-pattern=" /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/" ng-model="user.email" required class="form-control" />

        <span class="glyphicon glyphicon-ok form-control-feedback"

              ng-show="myForm.email.$dirty && myForm.email.$valid"></span>

      </div>

      <div class="col-md-2">

        <span style="color:red" class=""

              ng-show="myForm.email.$dirty && myForm.email.$invalid">邮箱格式错误!</span>

      </div>

    </div>

     <div class="form-group  text-center">

      <input class="btn btn-primary btn-lg" ng-disabled="myForm.$invalid" type="submit" value="提交" />

    </div>

  </form>

</div>

<script>

  angular.module('myTest', [])

          .controller('MyController', function($scope) {

                    $scope.submitForm = function(isValid) {

                      if (!isValid) {

                        alert('验证失败');

                      }

                    };

                  }

          );

</script>

</body>

也可以更详尽的支出单个错误：

<div ng-show="myForm.email.$dirty && myForm.email.$error.maxlength" class="alert alert-danger help-block">

          邮箱长度不能超过30位

</div>

<div ng-show="myForm.email.$dirty && myForm.email.$error.minlength" class="alert alert-danger help-block">

          邮箱长度不能小于5位

</div>

<div ng-show="myForm.email.$dirty && myForm.email.$error.email" class="alert alert-danger help-block">

          邮箱格式不正确

</div>

彻底弄懂angularJS表单验证的更多相关文章

angularjs表单验证checkbox
angularjs中默认有表单验证的支持,见文末的refer 我想要验证至少要选择一个checkbox,否则就不能提交但是checkbox貌似没有简单的方法,想来想去给出下面的解决方案 valida ...
【AngularJS学习笔记】AngularJS表单验证
AngularJS表单验证 AngularJS提供了一些自带的验证属性 1.novalidate:添加到HTML的表单属性中,用于禁用浏览器默认的验证. 2.$dirty 表单有填写记录 3.$v ...
AngularJS表单验证实现方法详解
本文主要是通过源码实例和大家分享AngularJS中的表单验证相关知识,希望通过本文的分享,对大家学习AngularJS有所帮助. 1.常规表单验证: 2.AngularJs中提供的表单验证实例. 实 ...
AngularJs表单验证
常用的表单验证指令 1. 必填项验证某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" requir ...
[Angularjs]表单验证
写在前面在开发中提交表单,并对表单的值进行验证是非常常见的操作,angularjs对表单验证提供了非常好的支持. demo 表单 <form name="myform" n ...
AngularJS表单验证,手动验证或自动验证
AngularJS的表单验证大致有两种,一种是手动验证,一种是自动验证. 手动验证所谓手动验证是通过AngularJS表单的属性来验证.而成为AngularJS表单必须满足两个条件:1.给form元 ...
AngularJS 表单验证小结
注:本文所述的表单验证即AngularJS自带的表单验证,无需引入第三方的插件一.常用的验证特性标签 1.非空为input加入一个required属性即可,例如: <input type=& ...
angularjs 表单验证（不完整版）
针对项目实践表单验证总结: angular 的 form表单验证:form内需要novalidate取消默认验证,用ng自己的验证,form的名字是非常必要的栗子:以注册为栗子,下面是注册的部分: ...
AngularJS表单验证开发案例
angular支持IE8+浏览器,虽然性能很好,但是目前只适用于手机端项目知识点:域$scopeAngularJS基础指令指令实现不同的功能学习思路和方法 <link rel="st ...

随机推荐

Apache POI 操作Excel（2）-- POI包引入项目
Apache POI发行版包含对许多文档文件格式的支持.这种支持在几个Jar文件中提供.并非每种格式都需要所有jar.下表显示了POI组件.Maven存储库标记和项目的Jar文件之间的关系. (htt ...
栈的顺序存储和链式存储c语言实现
一. 栈栈的定义:栈是只允许在一端进行插入或删除操作的线性表. 1.栈的顺序存储栈顶指针:S.top,初始设为-1 栈顶元素:S.data[S.top] 进栈操作:栈不满时,栈顶指针先加1,再到栈 ...
Python-使用tkinter canvas绘制的电子时钟
#!/usr/bin/env python # -*- coding: utf-8 -*- from tkinter import * import math import threading imp ...
Flutter轮播图
前端开发当中最有意思的就是实现动画特效,Flutter提供的各种动画组件可以方便实现各种动画效果.Flutter中的动画组件主要分为两类: 隐式动画控件:只需设置组件开始值,结束值,执行时间,比如An ...
windows php5.5安装redis扩展，并用redis存储session
1.确定安装版本先通过phpinfo()查看php的Compiler.Architecture.Thread Safety,其中Thread Safety如果是enabled,那么就是线程安全(ts ...
创建新用户后无法切换 su: failed to execute /bin/bash: Permission denied
创建新用户后无法切换 su: failed to execute /bin/bash: Permission denied 当使用 su username 从root切换用户时显示 su: fai ...
Sightseeing，题解
题目: 题意: 找到从s到t与最短路长度相差少于1的路径总数. 分析: 首先,搞明白题意之后,我们来考虑一下怎么处理这个1,怎样找相差为1的路径呢?我们这样想,如果有相差为1的路径,那么它将会是严格的 ...
Uni-app页面路由区分注意事项
总结Tips: (1)navigateTo,redirectTo 只能打开非 tabBar页面 (2)switchTab只能打开 TabBar 页面 (3)reLaunch可以打开任意界面 (4)页面 ...
appium升级操作
在app自动化测试中经常会碰到,因为appium版本低而导致,appium客户端连接不到appium服务端等一系列错误~ 其实appium升级很简单的哦~ 打开cmd命令行终端,键入npm updat ...
阿里云centos7服务器nginx配置及常见问题解答
前言: 本文参考了jackyzm的博客:https://www.cnblogs.com/jackyzm/p/9600738.html,进行了内容的更新,并请注意这里适用的版本是centos7的版本.并 ...