构建一个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. 2016.07.08,英语,《Vocabulary Builder》Unit 24

    mand/mend comes from mandare, Latin for 'entrust' or 'order'. command and commandment: [kə'mændmənt] ...

  2. [ZZ] Adventures with Gamma-Correct Rendering

    http://renderwonk.com/blog/index.php/archive/adventures-with-gamma-correct-rendering/ Adventures wit ...

  3. Vi问题

    ,ubuntu11.10下vi编辑器按i,左下方没有出现“输入模式”或者“insert”.在桌面环境下,用ctrl+alt+t调出命令行打开是这样,在第一控制台ctrl+alt+F1下打开,也是这样, ...

  4. C#winfrom控件命名规范

     ※用红字标记的部分表示有重复出现,括号内为替代表示方案 1.标准控件 序号 控件类型简写 控件类型 1 btn Button 2 chk CheckBox 3 ckl CheckedListBox ...

  5. BAT批处理(二)

    在前一篇中已对BAT批处理基础作了一些总结,但是对于BAT批处理还有很多的知识点没有讲解到,比如DOS中的特殊符号:IF.FOR的使用:变量:更多的DOS命令等等.本文在前一篇的基础上继续对BAT批处 ...

  6. 五一结束,北戴河,yy,差一点,不太敢

    collectionView Cell 设置颜色,蓝色,但是其他cell颜色也蓝色了,因为只写了if 没写else if (indexPath.item == 0) { cell.background ...

  7. JAVA中的throws和throw的区别

    Java     一直对java中的throws和throw不太理解.最近一直在查这两个方面的资料,算是能明白一点吧.如果我下面的观点哪有不对,希望指出来,我加以改进.         throw:( ...

  8. jsp页面直接编写csss

    <style> .logoZL{ width:550px; float:right; text-align:right; padding-right:15px; margin-right: ...

  9. VS下如何调试多线程

    四步即可 1.打开多线程窗口,找到当前线程 此时,出现窗口如下: 2.右击任意位置,选中全部线程 3.停止全部线程 此时,线程状态如下: 4.单独启动当前线程:先单击当前线程,在点击启动按钮,如下红色 ...

  10. 【Android开发学习笔记】【高级】【随笔】插件化——Activity生命周期

    前言 如同第一章我们说的,宿主程序通过 dexclassloader 将插件的类加载进来,然后通过反射去调用它的方法,这样Activity就被当成了一个普通的类来执行了,因此系统不再接管它的生命周期, ...