AngularJS中一些表单验证属性:

  1. 修改过的表单,只要用户修改过表单,无论输入是否通过验证,该值都将返回false
    {formName}.{inputFieldName}.$dirty
  2. 合法的表单,这个属性用来判断表单的内容是否合法的,如果合法则该属性的值为true
    {formName}.{inputFieldName}.$valid
  3. 不合法的表单,这个属性用来判断表单的内容是都不合法,如果不合法则该属性的值为true,与valid正好相反
    {formName}.{inputFieldName}.$invalid
  4. 错误,$error对象包含了当前表单的所有验证内容,以及它们是否合法的信息,如果验证失败,该属性值为true,如果验证成功,则该值为false
    {formName}.{inputFieldName}.$error
  5. form表单是否提交,该属性用来判断表单是否被用户提交
    {formName}.$submitted

Angular Material中表单验证错误消息结合使用了ng-messages的用法。以下是一个简单例子及简单说明:

点击提交按钮之后,form标签中ng-submit将表单的内容进行提交,js中进行是否合法判断;

ng-pattern='/^正则表达式$/'  用来进行自定义表单验证,一般为正则表达式。

ng-messages="{formName}.{inputFieldName}.$error" 用来验证该表单内容是否错误

ng-message-exp=['required','minlength','maxlength','pattern']  这里是所需要验证的属性

<form name="changePasswordForm" ng-submit="$ctrl.changePassword(changePasswordForm)" ng-cloak novalidate>
<div>
<label style="margin-right: 38px; margin-bottom: 0;">密码</label>
  <md-input-container class="md-block no-margin" md-no-float>
  <input name="password" type="password" ng-model="$ctrl.data.password"
placeholder="请输入密码"
style="width: 300px"
ng-pattern='/^\+?[1-9]*\d$/'
                      minlength="6" maxlength="20"
required/>
<div class="errors" ng-messages="changePasswordForm.password.$error">
  <div ng-message-exp=['required','minlength','maxlength','pattern']>
  您输入的密码格式不正确
  </div>
</div>
</md-input-container>
</div>
  <md-button type="submit">提交</md-button>
</form> <!--js-->
this.changePassword=function(changePasswordForm){
  if(changePasswordForm.$invalid){
  //本次验证不合法
  return  
  }
}

  

Angular Material表单提交及验证的更多相关文章

  1. javascprit form表单提交前验证以及ajax返回json

    1.今天要做一个手机验证码验证的功能.需求是前端页面点击发送 短信验证码,后台接收后通过ajax返回到前端,之后前端在提交时候进行验证.思路很简单,不过做的过程还是学到不少的东西. 1.ajax请求后 ...

  2. yii2表单提交CSRF验证

    Yii2表单提交默认需要验证CSRF,如果CSRF验证不通过,则表单提交失败,解决方法如下: 第一种解决办法是关闭Csrf public $enableCsrfValidation = false; ...

  3. JavaScript form表单提交与验证

    原网址:https://blog.csdn.net/vipwxs/article/details/79119701 一.form对象的属性: name:获取表单的名称,该name一般给JS使用 met ...

  4. Html form 表单提交前验证

    可以使用form表单的onsubmit方法,在提交表单之前,对表单或者网页中的数据进行检验. onsubmit指定的方法返回true,则提交数据:返回false不提交数据. 直接看下面的代码: 1 & ...

  5. Django之form表单提交并验证

    1.提交的时候会报错 2. 需要在setting里面注释掉一句话,关闭跨站请求检查. 3. 注释掉以后,理论上就不报错了.可我还是卡壳了. 4. 通过在网上找方法,修复错误. 原因:表单action字 ...

  6. UI标签库专题三:JEECG智能开发平台 FormValidation(表单提交及验证标签)

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/zhangdaiscott/article/details/28484209  自己定义弹出框提示 ...

  7. 关于使用 AJax 生成Form表单,且表单提交需要验证,验证实效的解决方法

    @Ajax.ActionLink("添加", "AddUser",new AjaxOptions() {InsertionMode = InsertionMod ...

  8. Laravel-admin 表单提交同时验证俩个以上的字段唯一值

    $name = isset(request()->all()['name']) ? request()->all()['name'] : ''; $id = isset(request() ...

  9. AngularJS 表单提交后显示验证信息与失焦后显示验证信息

    虽然说AngularJS的实时表单验证非常有用,非常高效方便,但是当用户还没有完成输入时便弹出一个错误提示,这种体验是非常糟糕的. 正常的表单验证逻辑应该是在用户提交表单后或完成当前字段中的输入后,再 ...

随机推荐

  1. (1) C语言 基础1

     VS  scanf 安全错误 在预处理器定义那里添加一行_CRT_SECURE_NO_DEPRECATE vs编译头错误 一.打印helloworld #include<stdio.h> ...

  2. 洛谷——P1595 信封问题

    P1595 信封问题 题目描述 某人写了n封信和n个信封,如果所有的信都装错了信封.求所有信都装错信封共有多少种不同情况. 输入输出格式 输入格式: 一个信封数n(n<=20) 输出格式: 一个 ...

  3. mysql中单表多timestamp设置default问题

    mysql中,同一个表多个timesatmp字段设置default的时候,经常会报错. 一个表只能有一个设置default的字段. 但是有时只有一个字段设置default也会报错. 会报:Incorr ...

  4. MySQL索引,如何正确创建MySQL索引?

    索引可以提高数据的检索效率,也可以降低数据库的IO成本,并且索引还可以降低数据库的排序成本.排序分组操作主要消耗的就是CPU资源和内存,所以能够在排序分组操作中好好的利用索引将会极大地降低CPU资源的 ...

  5. Sql性能检测工具:Sql server profiler和优化工具:Database Engine Tuning Advisor

    原文:Sql性能检测工具:Sql server profiler和优化工具:Database Engine Tuning Advisor 一.工具概要     数据库应用系统性能低下,需要对其进行优化 ...

  6. fuser 和 lsof

    FUSER fuser功能fuser 可以显示出当前哪个程序在使用磁盘上的某个文件.挂载点.甚至网络端口,并给出程序进程的详细信息. fuser显示使用指定文件或者文件系统的进程ID.默认情况下每个文 ...

  7. Tiny4412在Ubuntu下给MiniTools添加快捷方式

    解压MiniTools-Linux-20140317.tgz root@ubuntu:~/tiny4412/MiniTools-# ls -l total -rw-r--r-- root root M ...

  8. Android开发Tips(2)

    欢迎Follow我的GitHub, 关注我的CSDN. 我会介绍关于Android的一些有趣的小知识点. 上一篇. 1. Dagger2的开发顺序 Module -> Component -&g ...

  9. Gacutil.exe(全局程序集缓存工具)

    全局程序集缓存 .NET Framework (current version) 其他版本 安装有公共语言运行时的每台计算机都具有称为全局程序集缓存的计算机范围内的代码缓存.全局程序集缓存中存储了专门 ...

  10. PS 文字有锯齿怎么办

    1 可以在矢量绘图软件里面做,就没有锯齿了,画好之后导入到PS即可. 2 可以把PSD文件的像素值变大一些,比如调成500像素/英寸,但是这样会导致做出来的东西体积比较大,所以最好还是学会矢量绘图.