欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

AngularJS 入门4-表单和验证

程序员文章站 2022-07-15 23:05:46
...

AngularJS 入门4-表单和验证

 

1.AngularJS 表单

①文本输入框

<input type="text" ng-model="firstname">

②复选框

checkbox 的值为 true 或 false，可以使用 ng-model 指令绑定

<input type="checkbox" ng-model="myVar">

③单选框

单选框使用同一个 ng-model ，可以有不同的值，但只有被选中的单选按钮的值会被使用。

<form>
    选择一个选项:
    <input type="radio" ng-model="myVar" value="dogs">Dogs
    <input type="radio" ng-model="myVar" value="tuts">Tutorials
    <input type="radio" ng-model="myVar" value="cars">Cars
</form>

④下拉菜单

ng-model 属性的值为你在下拉菜单选中的选项：

<form>
选择一个选项:
<select ng-model="myVar">
    <option value="">
    <option value="dogs">Dogs
    <option value="tuts">Tutorials
    <option value="cars">Cars
</select>
</form>

 

2.AngularJS 输入验证

实例：

<!DOCTYPE html>
<html>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<body>
  <form  ng-app="myApp"  ng-controller="validateCtrl" name="myForm" novalidate>
    <p>用户名:<br>
      <input type="text" name="user" ng-model="user" required>
      <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
        <span ng-show="myForm.user.$error.required">用户名是必须的。</span>
      </span>
    </p>

    <p>邮箱:<br>
      <input type="email" name="email" ng-model="email" required>
      <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
        <span ng-show="myForm.email.$error.required">邮箱是必须的。</span>
        <span ng-show="myForm.email.$error.email">非法的邮箱。</span>
      </span>
    </p>

    <p>
      <input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid || myForm.email.$dirty && myForm.email.$invalid">
    </p>
</form>

<script>
  var app = angular.module('myApp', []);
  app.controller('validateCtrl', function($scope) {
      $scope.user = 'John Doe';
      $scope.email = '[email protected]';
  });
</script>
</body>
</html>

①构建一个ng表单

1.确保form上标签有一个name属性，像下面的例子一样。最好再加一个novalidate=”novalidate”

2.form中不能有action属性。提交交由ng-submit处理

3.每个input一定要有ng-model，最好有一个name方便引用。然后用require或者ng-minlength之类才起作用

<form name="form" novalidate="novalidate">
  <label name="email">Your email</label>
  <input type="email" name="email" ng-model="email" placeholder="Email Address" />
</form>

注：novalidate屏蔽浏览器对表单的默认验证行为，它将会阻止默认的HTML5验证，因为这会由我们自己来做。

 

②增添验证规则

 必填项验证  

验证表单输入是否已填写，添加HTML5标记required即可

<input type="text" required />  

 最小长度

 

验证表单输入的文本长度是否大于某个最小值，添加指令ng-minleng= "{number}"

<input type="text" ng-minlength="5" />

最大长度

 

验证表单输入的文本长度是否小于或等于某个最大值，添加指令ng-maxlength="{number}"：  

<input type="text" ng-maxlength="20" />

模式匹配

 

使用ng-pattern="/PATTERN/"来确保输入能够匹配指定的正则表达式：

<input type="text" ng-pattern="/[a-zA-Z]/" />

电子邮件

 

验证输入内容是否是电子邮件，只要像下面这样将input的类型设置为email即可：

<input type="email" name="email" ng-model="user.email" />

数字

 

验证输入内容是否是数字，将input的类型设置为number：

<input type="number" name="age" ng-model="user.age" />

URL

 

 验证输入内容是否是URL，将input的类型设置为 url：

<input type="url" name="homepage" ng-model="user.facebook_url" />

注：用了type=”email”之类就不能用ng-minlength ng-pattern之类了，而且email验证的时候github上有人提出了其他问题，https://github.com/angular/angular.js/issues/5899，看来对于type=”email”和 url之类要使用的时候多注意，我的建议是尽量不用。如果需要请写自定义验证。下面我会介绍，确实是有够蛋疼之处。由于这种问题，所以我写的表单不会出现type=”email” type=”url” type=”number”之类。

 

③表单属性 $valid, $invalid, $pristine, $dirty，$error

属性类        

应用的CSS类   

描述

$valid

ng-valid

Boolean 告诉我们这一项当前基于你设定的规则是否验证通过

$invalid

ng-invalid

Boolean 告诉我们这一项当前基于你设定的规则是否验证未通过       

$pristine

ng-pristine

Boolean 如果表单或者输入框没有使用则为True

$dirty

ng-dirty

Boolean 如果表单或者输入框有使用到则为True

访问表单属性

访问表单属性: <form name>.<angular property>

访问一个输入框属性: <form name>.<input name>.<angular property>

范例：

<form name="userForm"  novalidate>
    <input type="text" name="username" class="form-control" ng-model="username" ng-minlength="3" ng-maxlength="8">
<p ng-show="userForm.username.$valid" class="help-block">验证已通过</p>
<p ng-show="userForm.username.$invalid" class="help-block">验证未通过</p>
<p ng-show="userForm.username.$pristine" class="help-block">未修改过</p>
<p ng-show="userForm.username.$dirty" class="help-block">已修改过</p>
</form>

 

错误消息$error

1 普通用法

<form name="userForm"  novalidate>
    <input type="text" name="username" class="form-control" ng-model="username" ng-minlength="3" ng-maxlength="8">
<p ng-show="userForm.username.$error" class="help-block">用户名出错</p>
</form>

2 $error的具体类型

注：对于ng-minlength，ng-maxlength，ng-pattern的写法userForm.username.$error.minlength

<form name="userForm"  novalidate>
    <input type="text" name="username" class="form-control" ng-model="username" ng-minlength="3" ng-maxlength="8">
<p ng-show="userForm.username.$error.required" class="help-block">用户名是必须的</p>
    <p ng-show="userForm.username.$error.minlength" class="help-block">用户名太短</p>
    <p ng-show="userForm.username.$error.maxlength" class="help-block">用户名太长</p>
</form>

 

④设置样式

AngularJS根据表单属性状态自动添加和删除CSS类，例如当某个字段中的输入非法时，.ng-invlid类会被添加到这个字段上。 你可以编辑自己喜欢的CSS . 你可以私有定制化这些类来实现特定的场景应用.

input.ng-invalid {
  border: 1px solid red;
}
input.ng-valid {
  border: 1px solid green;
}

输入状态                                     

应用的CSS类                          

$invalid

ng-invalid

$valid

ng-valid

$pristine

ng-pristine

$dirty

ng-dirty

required

ng-valid-required或ng-invalid-required

min

ng-valid-min或ng-invalid-min

max

ng-valid-max或ng-invalid-max

pattern

ng-valid-pattern或ng-invalid-pattern

url

ng-valid-url或ng-invalid-url

email

ng-valid-email或ng-invalid-email

date

ng-valid-date或ng-invalid-date

number

ng-valid-number or ng-invalid-number

 

上一篇： AngularJS 表单基本的验证功能

下一篇： 测试 erlang:monitor

推荐阅读