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的实时表单验证非常有用,非常高效方便,但是当用户还没有完成输入时便弹出一个错误提示,这种体验是非常糟糕的. 正常的表单验证逻辑应该是在用户提交表单后或完成当前字段中的输入后,再 ...
随机推荐
- Codeforces 940F Machine Learning (带修改莫队)
题目链接 Codeforces Round #466 (Div. 2) Problem F 题意 给定一列数和若干个询问,每一次询问要求集合$\left\{c_{0}, c_{1}, c_{2}, ...
- 理解boot.img与静态分析Android/linux内核
一些尝试和理解. 1>提取boot.img: 其中,msm代表是高通的芯片,msm_sdcc.1是外接的SD卡挂载的目录,by-name指的是这个sd卡分区的名称.下面几行代表每个分区存储的东西 ...
- TCP/IP,http,socket,长连接,短连接 —— 小结
TCP/IP是什么? TCP/IP是个协议组,可分为三个层次:网络层.传输层和应用层. 在网络层有IP协议.ICMP协议.ARP协议.RARP协议和BOOTP协议. 在传输层中有TCP协议 ...
- Guess Number Higher or Lower -- LeetCode
We are playing the Guess Game. The game is as follows: I pick a number from 1 to n. You have to gues ...
- linux 服务器信息查看
写项目总结报告,需要统计需要系统的配合 1.# uname -a (Linux查看版本当前操作系统内核信息) Linux localhost.localdomain 2.4.20-8 #1 Thu ...
- C++ 11中几个我比较喜欢的语法(三)
随着Vsisual Studio 2013 RC版的放出,之前承诺的对C++ 11语法支持已经全部完成,本文是C++ 11中我喜欢的语法系列的最后一部分(一),(二). 非静态成员直接初始化 在C++ ...
- eclipse中jar包打断点
eclipse中jar包打断点 1. 下载工具 链接:http://pan.baidu.com/s/1dEF5tqL 密码:md4m 2. 增加jadeclipse功能 把 net.sf.jadcli ...
- UVa11988 Broken Keyboard(练习链表使用)
向量和数组的优势是可以随机的存取元素和在末尾添加删除元素,而当插入元素时,需要移动大量的数据,消耗大量的时间.而链表的优势是可以在O(1)删除和插入数据.所以在频繁移动元素时,可以使用链表. 分析:如 ...
- 在使用springMVC时,我使用了@Service这样的注解,发现使用注解@Transactional声明的事务不起作用
问题出现的场景: 在使用spring mvc时,我使用了@Service这样的注解, 发现使用注解@Transactional声明的事务不起作用. 我的配置如下: <mvc:annotation ...
- asp.net使用母版页以及Jquery和prototype要注意的问题
在母版页中引用了js,css或者其他外部文件之后,子页面就不必再重新引用,否则可能出错 prototype.js和jquery.js冲突的解决方案: <script type="tex ...