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表单提交及验证

最新文章

热门文章