Question

如果输入无效，我希望我的文本框边框颜色为红色，方法是使用js添加css类。也是在警报的地方我想要一个文本框旁边的消息，它将在条件失败或满足后显示。

var app=angular.module('NewApp', ['ngRoute']);


app.config(function($locationProvider, $routeProvider) {
	console.log("controller me");
	$locationProvider.html5Mode(true);
	$routeProvider
	.when('/about',{
		templateUrl: "about.html"
	})
	.otherwise({
		templateUrl: "new.html"
	});
});


app.controller('sbmitCtrl', function($scope, $http, $location){
	$scope.Submit=function(){
		console.log("btn clicked");
		console.log("$scope.inputEmail"+ $scope.inputEmail);
      
      
      var regemail=/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[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)) {
      	alert("matched");  
      }
      else {
      	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 -->

Answer 1

为什么不使用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');
}

Answer 2

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

并设置$ scope.error = true;发生验证错误时。

如果在angularjs中未正确完成验证，如何添加css类

2 个答案: