0

ブートストラップとangularjsを使用したこの例の段階的なフォームを見つけました

ステップ 2 に進む前にメールを検証するにはどうすればよいですか?? または、フィールドがいっぱいになるまでステップジャンプをブロックしますか??

function RegisterCtrl($scope, $location) {

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

....some code
4

2 に答える 2

1

ディレクティブを使用して、フォーム フィールドの有効性をテストする必要があります。

app.directive('email', function() {
    return {
        require: 'ngModel',
        link: function(scope, elm, attrs, ctrl) {
            ctrl.$parsers.unshift(function(viewValue) {
                if (viewValue && viewValue.match(/[a-z0-9\-_]+@[a-z0-9\-_]+\.[a-z0-9\-_]{2,}/)) {
                    // it is valid
                    ctrl.$setValidity('email', true);
                    return viewValue;
                } else {
                    // it is invalid, return undefined (no model update)
                    ctrl.$setValidity('email', false);
                    return undefined;
                }
            });
        }
    };
});

HTML で、ディレクティブを入力フィールドに追加する必要があります。myForm.email.$errorオブジェクトを使用して、フィールドが無効な場合にエラー メッセージを表示できます。

<input type="text" name="email" id="inputEmail" placeholder="Email" ng-model="email" email required>
<span ng-show="myForm.email.$error.email" class="help-inline">Email invalid</span>
<span ng-show="myForm.email.$error.required" class="help-inline">Email required</span>

ng-classでmyForm.$invalidを使用して、フォームが有効になるまで次のリンクを無効にすることができます。

<li ng-class="{disabled: myForm.$invalid}" >
   <a ng-model="next" ng-click="incrementStep(myForm)">Next Step &rarr;</a>
</li>

例を参照してください。

于 2012-12-31T15:35:02.117 に答える
1

まず、コントローラーでモデルを定義します。

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

フォーム フィールドにバインドします。

<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/

于 2012-12-31T11:31:51.480 に答える