javascript - 如何使用 Bootstrap 和 Angular 表单逐步验证表单？

Question

我找到这个例子step-by-step form with bootstrap and angularjs

如何在跳转到步骤 2 之前验证电子邮件？ 或者阻止步进跳转直到字段填满？

function RegisterCtrl($scope, $location) {

  $scope.steps = [
    'Step 1: Team Info',
    'Step 2: Campaign Info',
    'Step 3: Campaign Media'
  ];

....some code

Answer 1

首先，在 Controller 中定义模型:

function RegisterCtrl($scope, $location) {
    $scope.step1 = {
        name: '',
        email: '',
        password: '',
        passwordc: ''
     };
    //...

将其绑定(bind)到您的表单字段:

<input type="text" id="inputEmail" ng-model="step1.email" placeholder="Email">

接下来，在 gotoStep() 中进行验证:

  $scope.goToStep = function(index) {
        if (!$scope.step1.email.match(/[a-z0-9\-_]+@[a-z0-9\-_]+\.[a-z0-9\-_]{2,}/)) {
              return window.alert('Please specify a valid email');
        }
        //...

显然警报不是很好，因此使用 jQuery focus() 并添加 Bootstrap 类(control-group warning)来突出显示该字段。

http://jsfiddle.net/xayzP/