AngularJS – 微风的网络日志

代码与范例：

$scope.domainList = 'domain1.com|domain2.com';

$scope.isEmailValid = function () {
    var domains = $scope.domainList;
    // 第二个参数用于设定大小写不敏感
    var re = new RegExp("^[a-zA-Z0-9._%+-]+@(" + domains + ")$", "i");
    // 获取 input 关联的 ng-Model 的文本内容
    var email = $scope.userLoginForm.userEmail.$modelValue;
    // 如果尚未输入任何内容，则默认通过验证，否则测试匹配正则表达式
    return re.test(email) || !$scope.userLoginForm.userEmail.$dirty;
                
}

$scope.domainList = 'domain1.com|domain2.com';

$scope.isEmailValid = function () {

var domains = $scope.domainList;

// 第二个参数用于设定大小写不敏感

var re = new RegExp("^[a-zA-Z0-9._%+-]+@(" + domains + ")$", "i");

// 获取 input 关联的 ng-Model 的文本内容

var email = $scope.userLoginForm.userEmail.$modelValue;

// 如果尚未输入任何内容，则默认通过验证，否则测试匹配正则表达式

return re.test(email) || !$scope.userLoginForm.userEmail.$dirty;

}

说明：虽然包括 JavaScript 在内的正则表达式实现支持大小写不敏感匹配（i），但 HTML5 中，input 元素的 pattern 属性并不支持该标记位。为此，要实现该功能，必须借助额外的逻辑。如需显示错误信息，可为错误信息添加 ng-show=‘!isEmailValid’ 属性。

基本示例

index.html

<!-- 本段示例代码来自 AngularJS 官方站点 angularjs.org -->
<!doctype html>
<!-- ng-app 表示在当前区域内启用 AngularJS -->
<html ng-app>
  <head>
    <!-- 载入 AngularJS 文件 -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <!-- ng-model 表示当前控件与指定 model 关联。控件变更时，model 也会改变，反之亦然 -->
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <!-- {{ }} 用于绑定 model。当 model 的值改变，此处的显示也会改变  -->
      <h1>Hello {{yourName}}!</h1>
    </div>
  </body>
</html>

<!doctype html>

<head>

</head>

<body>

<div>

<hr>

<h1>Hello {{yourName}}!</h1>

</div>

</body>

</html>

使用控件

index.html

<!doctype html>
<html ng-app="todoApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
    <!-- 业务逻辑依然通过 JavaScript 实现 -->
    <script src="todo.js"></script>
    <link rel="stylesheet" href="todo.css">
  </head>
  <body>
    <h2>Todo</h2>
    <!-- 该 div 的行为将通过 TodoListController 类控制 -->
    <div ng-controller="TodoListController as todoList">
      <span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining</span>
      <!-- ng-click 定义了点击时将调用哪个方法 -->
      [ <a href="" ng-click="todoList.archive()">archive</a> ]
      <ul class="unstyled">
        <!-- ng-repeat 可自动遍历并向 DOM 添加元素 -->
        <li ng-repeat="todo in todoList.todos">
          <label class="checkbox">
            <input type="checkbox" ng-model="todo.done">
            <span class="done-{{todo.done}}">{{todo.text}}</span>
          </label>
        </li>
      </ul>
      <!-- 点击按钮时将调用 addTodo() -->
      <form ng-submit="todoList.addTodo()">
        <input type="text" ng-model="todoList.todoText"  size="30"
               placeholder="add new todo here">
        <input class="btn-primary" type="submit" value="add">
      </form>
    </div>
  </body>
</html>

<!doctype html>

<head>

</head>

<body>

<span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining</span>

[ <a href="" ng-click="todoList.archive()">archive</a> ]

</label>

</li>

</ul>

<input type="text" ng-model="todoList.todoText" size="30"

placeholder="add new todo here">

</form>

</div>

</body>

</html>

todo.js

angular.module('todoApp', [])
  .controller('TodoListController', function() {
    var todoList = this;
    // 默认添加两条条目
    todoList.todos = [
      {text:'learn angular', done:true},
      {text:'build an angular app', done:false}];
 
    todoList.addTodo = function() {
      // 借助 Array.push() 插入条目
      todoList.todos.push({text:todoList.todoText, done:false});
      todoList.todoText = '';
    };
 
    todoList.remaining = function() {
      var count = 0;
      angular.forEach(todoList.todos, function(todo) {
        count += todo.done ? 0 : 1;
      });
      return count;
    };
 
    todoList.archive = function() {
      var oldTodos = todoList.todos;
      todoList.todos = [];
      angular.forEach(oldTodos, function(todo) {
        if (!todo.done) todoList.todos.push(todo);
      });
    };
  });

angular.module('todoApp', [])

.controller('TodoListController', function() {

var todoList = this;

// 默认添加两条条目

todoList.todos = [

{text:'learn angular', done:true},

{text:'build an angular app', done:false}];

todoList.addTodo = function() {

// 借助 Array.push() 插入条目

todoList.todos.push({text:todoList.todoText, done:false});

todoList.todoText = '';

};

todoList.remaining = function() {

var count = 0;

angular.forEach(todoList.todos, function(todo) {

count += todo.done ? 0 : 1;

});

return count;

};

todoList.archive = function() {

var oldTodos = todoList.todos;

todoList.todos = [];

angular.forEach(oldTodos, function(todo) {

if (!todo.done) todoList.todos.push(todo);

});

};

});

todo.css

.done-true {
  text-decoration: line-through;
  color: grey;
}

.done-true {

text-decoration: line-through;

color: grey;

}

未完待续

标签： AngularJS

AngularJS 中为 input 添加字母大小写不敏感正则表达式匹配验证

写给程序员的 AngularJS 语法快速入门

基本示例

使用控件