Angular Material表单提交及验证
AngularJS中一些表单验证属性:
- 修改过的表单,只要用户修改过表单,无论输入是否通过验证,该值都将返回false
{formName}.{inputFieldName}.$dirty - 合法的表单,这个属性用来判断表单的内容是否合法的,如果合法则该属性的值为true
{formName}.{inputFieldName}.$valid - 不合法的表单,这个属性用来判断表单的内容是都不合法,如果不合法则该属性的值为true,与valid正好相反
{formName}.{inputFieldName}.$invalid - 错误,$error对象包含了当前表单的所有验证内容,以及它们是否合法的信息,如果验证失败,该属性值为true,如果验证成功,则该值为false
{formName}.{inputFieldName}.$error - 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表单提交及验证的更多相关文章
- javascprit form表单提交前验证以及ajax返回json
1.今天要做一个手机验证码验证的功能.需求是前端页面点击发送 短信验证码,后台接收后通过ajax返回到前端,之后前端在提交时候进行验证.思路很简单,不过做的过程还是学到不少的东西. 1.ajax请求后 ...
- yii2表单提交CSRF验证
Yii2表单提交默认需要验证CSRF,如果CSRF验证不通过,则表单提交失败,解决方法如下: 第一种解决办法是关闭Csrf public $enableCsrfValidation = false; ...
- JavaScript form表单提交与验证
原网址:https://blog.csdn.net/vipwxs/article/details/79119701 一.form对象的属性: name:获取表单的名称,该name一般给JS使用 met ...
- Html form 表单提交前验证
可以使用form表单的onsubmit方法,在提交表单之前,对表单或者网页中的数据进行检验. onsubmit指定的方法返回true,则提交数据:返回false不提交数据. 直接看下面的代码: 1 & ...
- Django之form表单提交并验证
1.提交的时候会报错 2. 需要在setting里面注释掉一句话,关闭跨站请求检查. 3. 注释掉以后,理论上就不报错了.可我还是卡壳了. 4. 通过在网上找方法,修复错误. 原因:表单action字 ...
- UI标签库专题三:JEECG智能开发平台 FormValidation(表单提交及验证标签)
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/zhangdaiscott/article/details/28484209 自己定义弹出框提示 ...
- 关于使用 AJax 生成Form表单,且表单提交需要验证,验证实效的解决方法
@Ajax.ActionLink("添加", "AddUser",new AjaxOptions() {InsertionMode = InsertionMod ...
- Laravel-admin 表单提交同时验证俩个以上的字段唯一值
$name = isset(request()->all()['name']) ? request()->all()['name'] : ''; $id = isset(request() ...
- AngularJS 表单提交后显示验证信息与失焦后显示验证信息
虽然说AngularJS的实时表单验证非常有用,非常高效方便,但是当用户还没有完成输入时便弹出一个错误提示,这种体验是非常糟糕的. 正常的表单验证逻辑应该是在用户提交表单后或完成当前字段中的输入后,再 ...
随机推荐
- Git&GitHun 命令合集
Git&GitHun 命令合集 基本操作 git --version 查看git版本信息 git add 本地库初始化 设置签名 git config user.name xxx git co ...
- TCP/IP,HTTP,SOAP等协议之区别
术语TCP/IP代表传输控制协议/网际协议,指的是一系列协议.“IP”代表网际协议,TCP和UDP使用该协议从一个网络传送数据包到另一个网络.把IP想像成一种高速公路,它允许其它协议在上面行驶并找到到 ...
- 八. 输入输出(IO)操作3.面向字符的输出流
面向字符的输出流都是类 Writer 的子类,其类层次结构如图 10-5 所示. 图10-5 Writer的类层次结构图 表 10-3 列出了 Writer 的主要子类及说明. 表 10-3 Writ ...
- TranslateAnimation详解 Android动画。
TranslateAnimation详解 Android JDK为我们提供了4种动画效果,分别是: AlphaAnimation,RotateAnimation, ScaleAnimation, Tr ...
- tiny4412 串口驱动分析五 --- LDD3上TTY驱动程序源码
关于tty这部分请参考: <Linux设备驱动开发详解 第二版>第14章 Linux终端设备驱动 <精通Linux设备驱动程序开发>第6章 串行设备驱动程序 <Linux ...
- java中终止线程的三种方式
在java中有三种方式可以终止线程.分别为: 1. 使用退出标志,使线程正常退出,也就是当run方法完成后线程终止. 2. 使用stop方法强行终止线程(这个方法不推荐使用,因为stop和sus ...
- hdu1004(c++)
字符串统计问题,统计每个字符串的次数,输出出现次数最多的字符串 #include<iostream>#include<string>#include<algorithm& ...
- vsftp 服务配置篇
在CentOS或者RedHat Linux上有自带的ftp软件叫做vsftpd (very serure ftp) 搭建vsftpd 服务 yum 安装需要用两个包:vsftpd 和 db4-util ...
- N++ 道ASP.NET面试题
InterviewQuestions-ASP.NET N++ 道ASP.NET面试题 1. 简述 private. protected. public. internal 修饰符的访问权限. 答 . ...
- PC-LINT
静态代码检查工具PC-Lint(一) 2006-12-07 23:50 C/C++语言的语法拥有其它语言所没有的灵活性,这种灵活性带来了代码效率的提升,但相应增加了代码中存在隐患的可能性.静态代码 ...