表单校验的值$valid、$invalid、$pristine和$dirty

angular内置了一套表单校验,其中包含几个状态

① valid、invalid、pristine和dirty 
  valid标记表单元素有效; 
  invalid标记表单元素无效; 
  pristine表示表单元素是纯净的,用户未操作过; 
  dirty表示表单元素是已被用户操作过; 
② 更改css属性 
  .ng-pristine {} 
  .ng-dirty {} 
  .ng-valid {} 
  .ng-invalid {}

$scope.infoFrom.$setPristine();   //设置表单为未编辑的纯净状态

$scope.infoFrom.name.$setDirty();   //设置表单为用户已经编辑过得【脏】状态

去掉浏览器验证   

<form name="infofrom" novalidate>

</from>

(4) 注意事项 
①novalidate 
        标准浏览器如火狐,谷歌等对HTML5有很好的支持。众所周知,HTML5中input的type属性已经具备了验证功能。如果你要自己定义验证方式,那么请加上novalidate属性,以此避开浏览器自行验证。 
②type类型 
        HTML5的type属性可以包含text、email、number等,但是angular又内部重写了这些属性,所以放心大胆的去用吧,angular完全可以满足你所有的验证。 
③type="number"还是ng-pattern="/^[0-9]{6}$/" 
        你可以使用type="number"来限制输入框只能输入数字,当然你也可以用ng-pattern来验证用户输入,从而过滤掉非数字输入。这完全取决于你的爱好,没有硬性规定,只是选择多一些罢了。

时间: 2024-11-09 21:22:58

表单校验的值$valid、$invalid、$pristine和$dirty的相关文章

【转】vue.js表单校验详解

1.npm安装vue-validator $ npm install vue-validator 代码示例: var Vue=require("vue"); var VueValidator=require("vue-validator"); Vue.use(VueValidator); 2.直接使用script标签引入vue.js 要下载vue-validator,那么进入cdn的地址https://cdn.bootcss.com/vue-validator/2.

【JAVAWEB学习笔记】28_jqueryAjax:json数据结构、jquery的ajax操作和表单校验插件

Ajax-jqueryAjax 今天内容: 1.json数据结构(重点) 2.jquery的ajax操作(重点) 3.jquery的插件使用   一.json数据结构 1.什么是json JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯.这些特性使JSON成 为理想的数据交换语言.易于人阅读和编写,同时也易于机器解析和生成(一般用于提升网络

利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件

表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个性化的需求,使得我们用这些插件的默认机制并不能完成这些功能,所以要根据自己的需要去改造它们(毕竟自己还不到那个写一个完美的校验框架的层次).我用过formValidation这个校验框架,虽然它跟bootstrap配合地很好,但是校验风格太死板,不太满足个性化的场景:后来我找到了jquery.val

简约的form表单校验插件

前言 网上有好多form表单校验插件,包括jquery的表单检验插件,这些中好多插件功能很齐全强大,提示方式很酷,很美观好看.本想拿来用,但是发现几个问题: 1.使用不方便.校验规则繁多,调用校验函数难记忆. 2.提示方式固定.一般插件给出固定的几种提示方式,但是实际中,不同系统都有自己的页面风格样式,有自己的提示方式,插件自带的一般用不上. 因此,我最终没有采用这些插件,以免用后出现难以修改或实现的情况. 如果一种校验插件能避免以上两个问题最好了,方便使用,提示方式自定义 ,所以自己做了一个简

开发指南专题十:JEECG微云快速开发平台--表单校验组件ValidForm

10.4Validform对象[方法支持链式调用] 如示例 var demo=$(".formsub").Validform(),那么demo对象会有以下属性和方法可以调用: tipmsg[object] 如:demo.tipmsg.s="error! no messageinputed."; 通过该对象可以修改除 tit 以外的其他提示文字,这样可以实现同一个页面的不同表单使用不同的提示文字. 具体可修改的提示文字 $.Tipmsg={//默认提示文字; tit:

JQuery中内容操作函数、validation表单校验

JQuery:内容体拼接(可以直接拼接元素节点和内容节点) JQuery实现: 方案1:A.append(B); == B.appendTo(A);A的后面拼接B 方案2: A.prepend(B); == B.prependTo(A);A文本的最前面插入B text()与html()比较: 1.相同点: 都可以设置或获取内容 2.不同点: 获取时,html()获取的是所有内容体:标签+文本 text()获取的只是文本 设置时,如果设置的内容有html()标签 html()设置的内容可以被浏览器

示例-表单校验-多内容

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="

创建通用的表单校验逻辑库

表单校验一直是web开发中最基础,也是最不好做的一个环节.说是基础,相信多少从事web开发的人第一件事就是学习如果基于js.jQuery实现表单验证工作.在10年前,甚至是5年前,JavaScript还是被多数工程师轻视的一门语言,那时候很多人认为JavaScript充其量也就能完成一部分表单校验的工作.由此可知表单校验是多么基础的一件事情:说它不好做,是因为表单校验往往工作量极大,可以说是一个没太大技术含量但是很耗费体力的活,而且在一些对交互友好性要求较高的项目中,表单校验就更加费事了. 于是

Struts1表单校验

ActionForm中对表单元素进行校验 @Override public ActionErrors validate(ActionMapping mapping, HttpServletRequest request) { ActionErrors errors = new ActionErrors(); if (StringUtils.isBlank(regUser.getUsername())){ errors.add("username",new ActionMessage(&