构建一个ng表单

novalidate=”novalidate”

2.form中不能有action属性。提交交由ng-submit处理

3.每个input一定要有ng-model,最好有一个name方便引用。然后用require或者ng-minlength之类才起作用

<form name="form" novalidate="novalidate">
<label name="email">Your email</label>
<input type="email" name="email" ng-model="email" placeholder="Email Address" />
</form>

ng默认提供了验证

验证是否已输入文字,只需在标签上加上required:

<input type="text" ng-model="user.name" required />

验证至少输入{number}个字符,使用指令ng-minlength=“{number}”:

<input type="text" ng-model="user.name" ng-minlength="5" />

验证至多输入{number}个字符,使用指令ng-maxlength=“{number}”:

<input type="text" ng-model="user.name" ng-maxlength="20" />

确保输入匹配一个正则表达式,使用指令ng-pattern="/PATTERN/":

<input type="text" ng-model="user.name" ng-pattern="/a-zA-Z/" />

验证输入是一个Email,设置input的type属性为email:

<input type="email" name="email" ng-model="user.email" />

验证输入是一个数字,设置input的type属性为number:

<input type="number" name="number" ng-model="user.age" />

验证输入是一个URL,设置input的type属性为url

<input type="url" name="homepage" ng-model="user.weburl" />

AngularJS form表单验证(非常全面)的更多相关文章

  1. 基于angularJS的表单验证练习

    今天看了一下angularJS的表单验证,看的有点云里雾里(也有可能是雾霾吸多了),于是做了一个小练习来巩固一下. html: <div ng-controller="Aaa" ...

  2. form表单验证-Javascript

    Form表单验证: js基础考试内容,form表单验证,正则表达式,blur事件,自动获取数组,以及css布局样式,动态清除等.完整代码如下: <!DOCTYPE html PUBLIC &qu ...

  3. django之form表单验证

    django中的Form一般有两种功能: 输入html 验证用户输入 #!/usr/bin/env python # -*- coding:utf- -*- import re from django ...

  4. python_way day19 HTML-day5 (form表单验证,CSRF,cookie,session,缓存)

    python-way day19 1. dJango的form表单验证 2.CSRF 跨站请求伪造 3.cookie,session 4.缓存 一,django表单验证功能 1.django验证基础: ...

  5. form表单验证2

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Day19 Django之Form表单验证、CSRF、Cookie、Session和Model操作

    一.Form表单验证 用于做用户提交数据的验证1.自定义规则 a.自定义规则(类,字段名==html中的name值)b.数据提交-规则进行匹配代码如下: """day19 ...

  7. [php基础]PHP Form表单验证:PHP form validator使用说明

    在PHP网站开发建设中,用户注册.留言是必不可少的功能,用户提交的信息数据都是通过Form表单提交,为了保证数据的完整性.安全性,PHP Form表单验证是过滤数据的首要环节,PHP对表单提交数据的验 ...

  8. django form表单验证

    一. django form表单验证引入 有时时候我们需要使用get,post,put等方式在前台HTML页面提交一些数据到后台处理例 ; <!DOCTYPE html> <html ...

  9. Django中的Form表单验证

    回忆一下Form表单验证的逻辑: 前端有若干个input输入框,将用户输入内容,以字典传递给后端. 后端预先存在一个Form表单验证的基类,封装了一个检测用户输入是否全部通过的方法.该方法会先定义好错 ...

随机推荐

  1. 小红伞和virtualbox5.0.10冲突

    win7 sp1 64bit 旗舰版:virtual box 5.0.10 提示 error in supr3hardNtChildWaitFor……Timed out after 60001 ms ...

  2. 使用国内镜像源来加速python pypi包的安装

    pipy国内镜像目前有: http://pypi.douban.com/  豆瓣 http://pypi.mirrors.ustc.edu.cn/  中国科学技术大学 安装时,使用-i参数 pip i ...

  3. ecshop运行超过30秒超时的限制解决办法

    ecshop运行超过30秒超时的限制解决办法 ECSHOP模板/ecshop开发中心(www.68ecshop.com) / 2014-06-04 ecshop运行超过服务器默认的设置30秒的限制时会 ...

  4. PHP文件操作 之读取目录信息

    //定义一个函数 读取目录信息的函数 function dirInfo($dirName) { //判断目录是否存在 if (!file_exists($dirName)) { die('目录不存在! ...

  5. 正则基础之 \b 单词边界

    本文转载自: http://www.jb51.net/article/19330.htm 1概述 “\b”匹配单词边界,不匹配任何字符. “\b”匹配的只是一个位置,这个位置的一侧是构成单词的字符,另 ...

  6. delphi下TList的用法

    unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms ...

  7. 用c++builder读取一个一行有多行变量的文件

    文件内容如下: C DXDY.INP FILE, IN FREE FORMAT ACROSS COLUMNS for  83658 Active CellsC 2013-5-25   上午 10:43 ...

  8. java Semaphore

    //Listing 6-4. Using a Counting Semaphore to Control Access to a Pool of Items import java.util.conc ...

  9. angularJS自定义指令间的“沟通”

    由此例子我们可以看出,angularJS使用指令时link的执行顺序<html> <head> <meta charset="utf-8"/> ...

  10. const与#define宏常量 , inline与#define

    1.预处理 预处理器是在真正的编译开始之前由编译器调用的独立程序.预处理器可以删除注释.包含其他文件以及执行宏替代. 预处理命令(宏定义#define..#undef. 文件包含#include. 条 ...