angularjs中form表单提交验证

angular.module("MyApp",["ngMessages"]);
<form name="formMyName" ng-submit="$ctrl.changePassword(formMyName)" ng-cloak novalidate>
  <--输入新密码-->
  <md-input-container md-no-float>
     <input name="newPassword" type="password" ng-model="$ctrl.data.newPassword" placeholder="请输入密码"       ng-pattern=‘/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[[email protected]#$%^&*(),.])[\[email protected]#$%^&*(),.]{6,}$/‘minlength="6" maxlength="20"required/>
     <div class="errors" ng-messages="formMyName.newPassword.$error">    <--formMyName对应form表单name,newPassword对应input输入框name,ng-message验证的是form表单下name为newPassword的input框中ng-pattern、minlength、maxlength、required这些验证是否通过,    当验证不通过时$error为false就会执行ng-message-exp并显示下面的提示,反之当验证通过时$error为true。-->
         <div ng-message-exp=[‘required‘,‘minlength‘,‘maxlength‘,‘pattern‘]>
            您需要输入6-20位密码,且必须包括数字、大写字母、小写字母、非数字字符。
         </div>    </div  </md-input-container>

  <--输入确认密码-->  <md-input-container md-no-float>    <input name="confirmPassword" type="password" ng-modal="$ctrl.data.confirmPassword" placeholder="请输入确认密码"/>    <div ng-if="formMyName.$submitted && $ctrl.data.newPassword != $ctrl.data.confirmPassword">      确认密码必须和新密码一致    </div>  <--在这个地方确认密码只需要验证确认输入的密码和新密码是否一致就可以了,不需要再去验证最小、最大长度和是否必填那些,因为如果两次密码一致的话上面那些验证是一定通过的,如果两次密码不一致上面那些验证也就没有意义的,    然后我们可以看到,这里用的是ng-if进行的判断,但是ng-if不属于表单验证,所以后面我们需要用js再进行验证。我们看ng-if里面的条件,formMyName对应form表单name,$submitted表示的是当点击提交按钮时进行验证。-->  </md-input-container>

  <md-button type="submit">    提交  </md-button></form>
angular.module(‘‘).controller(‘‘, [
    ‘$rootScope‘, ‘$mdDialog‘,
    function ($rootScope, $mdDialog) {
        var data = this.data = {
            Password: null,
            ConfirmPassword: null
        };
    //修改密码
        this.changePassword = function (changePasswordForm) {    //验证输入内容有没有通过表单验证    //验证确认密码与新密码是否一致            if (changePasswordForm.$invalid || data.Password != data.ConfirmPassword) {
                return
            }
            $mdDialog.hide(data.Password);
        };
    }
]);
时间: 2024-10-12 20:37:52

angularjs中form表单提交验证的相关文章

extjs中form表单提交成功、失败的响应信息

类Ext.form.Action.Submit 处理表单Form数据和返回的response对象的类. 该类的实例仅在表单Form{@link Ext.form.BasicForm#submit 提交}的时候创建. 返回的数据包必须包含一个 boolean 类型的success属性,还有可选地,一个含有无效字段的错误信息的属性 A response packet may contain: ·        success property : Boolean - required. ·     

asp.net.mvc 中form表单提交控制器的2种方法和控制器接收页面提交数据的4种方法

MVC中表单form是怎样提交? 控制器Controller是怎样接收的? 1..cshtml 页面form提交 (1)普通方式的的提交 (2)特殊方式提交 2.控制器处理表单数据的四种方法 方法1:使用传统的Request请求数据 方法2:Action参数名与表单元素name值一一对应 方法3:从MVC封装的FormCollection容器中读取 方法4:使用实体作为Action参数传入,前提是提交的表单元素名称与实体属性名称一一对应 控制器源码 using MvcStudy.Models;u

HTML中form表单提交出错

1.浏览器Console输出的出错信息: An invalid form control with name='content' is not focusable. 2.出错原因 form表单中textarea输入框没有输入数据.textarea输入框如下: <textarea name="content" cols="40" rows="10" class="kind-content" required="&

mvc中form表单提交的几种形式

第一种方式:submit 按钮 提交 <form action="MyDemand" method="post"> <span>关键字:</span> <input name="keywords" type="text" value="@keywords" /> <input type="submit" value="搜索&

Struct1中 Form表单提交的几种方式以及无刷新提交的方式

直接action 无刷新提交 ajaxForm ajaxsubmit iform 暂记 回去整理

MVC中Form表单的提交

Form表单是数据提交的一种,在MVC中Form表单提交到服务器中地址,接受Form表单的方式有一下几种: 1.采用实体Model类型提交,Form表单中的Input标签name要和Model对应的属性保持一致,接受Form表单的服务器端就可以直接以实体的方式存储,使用方式如下: Form表单: <form action="/Employee/SaveEmployee" method="post"> <table> <tr> &l

ajax form表单提交 input file中的文件

ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了解决这个问题我走了不少弯路: 1.用原生的 input file , 不支持ajax上传文件,你肯定会说可以用 ajax form表单上传了呀?不过我后面还要调用上传成功后用js处理一些对话框,所以这种方法排除 2.用了 uploadify 上传插件,弄出来能上传东西,结果不理想:因为不能判断上传的

form表单提交,上传文件以及提交前验证的问题。

form表单是在开发中比较基础也比较常见的问题了,今天就给大家分享一下有关form表单提交的一些小问题. 首先我们来看一下基本的form结构.这里面我直接引用的bootstrap的form表单的框架. <form class="form-horizontal" id="form1" name="myForm" action="/cgjxx/fwjl_delete_servlet" method="post&qu

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

1.今天要做一个手机验证码验证的功能.需求是前端页面点击发送 短信验证码,后台接收后通过ajax返回到前端,之后前端在提交时候进行验证.思路很简单,不过做的过程还是学到不少的东西. 1.ajax请求后返回 returning 405 Method Not Allowed 原因是我后台返回的时候没有加上: @ResponseBody注解.加上后返回的数据是json字符串,但是js只能操作json对象.需要把json字符串转为json对象.一般的有三种方式1.JSON.parse();如 var j