AngularJS系列(十)——表单的重置和验证

以你之姓@ 2022-06-08 00:12 350阅读 0赞

## 表单重置 ##

表单重置实例

<div ng-app="myApp"ng-controller="formCtrl">
     <form novalidate>
       First Name:<br>
       <input ng-model="user.firstName" /><br>
       Last Name:<br>
       <input ng-model="user.lastName" />
       <br><br>
               <button ng-click="rest()">重置</button>
     </form>
     <p>form = {
       {user }}</p>
     <p>master = {
       {master}}</p>
    </div>

## 表单验证 ##

AngularJS表单的内置验证

![Center][]

表单的状态有

![Center 1][]

下面是表单验证提示和是否能提交的例子

<form ng-app="myApp"ng-controller="validateCtrl"
    name="myForm" novalidate>
    <p>用户名:<br>
    <input type="text"name="user" ng-model="user" requiredng-minlength="3" ng-maxlength="8">
    <spanng-hide="myForm.user.$valid" style="color:red">
             <spanng-show="myForm.user.$error.required">用户名是必须的。</span>
             <spanng-show="myForm.user.$error.minlength">合法输入必须不小于3字符</span>
             <spanng-show="myForm.user.$error.maxlength">合法输入必须不大于8字符</span>
    </span>  
    </p>
    <p>邮箱:<br>
    <input type="email"name="email" ng-model="email" required>
    <span ng-hide="myForm.email.$valid"style="color:red">
             <spanng-show="myForm.email.$error.repuired">邮箱地址是必须的</span>
             <spanng-show="myForm.email.$error.email">非法的邮箱地址。</span>
    </span>
    </p>
    <p>
    <input type="submit"ng-disabled="myForm.$invalid" />
    </p>
    </form>

实例解析

1.      表单验证表达式必须从表单开始，即myForm.user.$valid而不能是user.$valid。

2.      表单验证不通过可以通过myForm.email.$error.xxx得到是什么原因不通过

3.      ng-disabled="myForm.$invalid"作用是表单验证不通过时，提交按钮不可用

[Center]: /images/20220608/f4472e30201f4a0a87849cf5c9400641.png
[Center 1]: /images/20220608/840c7b7d94b94052bcc7bf323e3654b9.png