anglejsで検証が正しく行われなかった場合のCSSクラスの追加方法

jsを使用してcssクラスを追加して入力が有効でない場合は、ボタンのクリック時にテキストボックスの境界線をクリックします。アラートの場所でも、条件が失敗したか満足した後に表示されるテキストボックスの横にメッセージが表示されます。anglejsで検証が正しく行われなかった場合のCSSクラスの追加方法

var app=angular.module('NewApp', ['ngRoute']); 
 

 

 
app.config(function($locationProvider, $routeProvider) { 
 
\t console.log("controller me"); 
 
\t $locationProvider.html5Mode(true); 
 
\t $routeProvider 
 
\t .when('/about',{ 
 
\t \t templateUrl: "about.html" 
 
\t }) 
 
\t .otherwise({ 
 
\t \t templateUrl: "new.html" 
 
\t }); 
 
}); 
 

 

 
app.controller('sbmitCtrl', function($scope, $http, $location){ 
 
\t $scope.Submit=function(){ 
 
\t \t console.log("btn clicked"); 
 
\t \t console.log("$scope.inputEmail"+ $scope.inputEmail); 
 
     
 
     
 
     var regemail=/^(([^<>()\[\]\\.,;:\[email protected]"]+(\.[^<>()\[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 
 
     var regmob = /^(?:(?:\+|0{0,2})91(\s*[\-]\s*)?|[0]?)?[789]\d{9}$/; 
 
     
 
     console.log("mobno"+regmob.test($scope.inputEmail)); 
 
     
 
     if (regemail.test($scope.inputEmail) || regmob.test($scope.inputEmail)) { 
 
     \t alert("matched"); 
 
     } 
 
     else { 
 
     \t alert("not matched") 
 
     } 
 
     
 
     
 

 
}; 
 
});

.xt-error { 
 
    border: 1px solid red; 
 
    color: red; 
 
} 
 

 
.xt-error:focus { 
 
    border: 1px solid red; 
 
    box-shadow: 0 0 2px red; 
 
}

<!--index.html--> 
 

 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title></title> 
 
</head> 
 

 
<body ng-app="NewApp"> 
 
<script src="js/angular.min.js"></script> 
 
<script src="js/angular-route.min.js"></script> 
 
    <script src="js/n.js"></script> 
 
<ng-view></ng-view> 
 
</body> 
 
</html> 
 

 
<!-- begin snippet: js hide: false console: true babel: false -->

出典

2017-01-06 Sumit Kumar

コードスニペットが壊れています。 – RamblinRose

あなたのボタンが追加された場所をあなたのビューに表示してもらえますか？ –

<input ng-class="xt-error: error;"> 
<div ng-show="error">{{myErrorMessage}}<div>

そしてセットの真の$ scope.error =;検証エラーが発生したとき。

出典

2017-01-06 16:01:32

なぜあなたは機能を追加/削除jQueryのを使用していけませんか？このように：

if (regemail.test($scope.inputEmail) || regmob.test($scope.inputEmail)) { 
    alert("matched"); 
    //Select your input 
    $("your-selector").removeClass("error-class"); 
    $("your-selector").addClass("ok-class"); 
} 
else { 
    alert("not matched"); 
    //Select your input 
    $("your-selector").removeClass("ok-class"); 
    $("your-selector").addClass("error-class"); 
}

AngularJSのためにこれを試してみてください：

if (regemail.test($scope.inputEmail) || regmob.test($scope.inputEmail)) { 
    alert("matched"); 
    //Select your input 
    var myEl = angular.element(document.querySelector('your-selector')); 
    myEl.addClass('error-class'); 
    myEl.addClass('ok-class'); 
} 
else { 
    alert("not matched"); 
    //Select your input 
    var myEl = angular.element(document.querySelector('your-selector')); 
    myEl.addClass('ok-class'); 
    myEl.addClass('error-class'); 
}

出典

2017-01-06 15:31:39

おかげさまですが、角度jを使って同じことをしたい場合はどうしたらいいですか？ –

角度コードを追加しました。見てみましょう。ありがとう！ –

私はより "角度のある"ルートを試し、 '' ng-class''ディレクティブを利用することを提案します。 –

anglejsで検証が正しく行われなかった場合のCSSクラスの追加方法

答えて

関連する問題