如果在angularjs中未正确完成验证，如何添加css类(how to add a css class if validation is not done correctly in angularjs)
如果输入无效，我希望我的文本框边框颜色为红色，方法是使用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 -->
i want my textbox border color red on button click if input is not valid by adding css class using js. also at place of alert i want a message beside of textbox which will show after condition failed or satisfied.
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 -->
最满意答案
<input ng-class="xt-error: error;">
<div ng-show="error">{{myErrorMessage}}<div>
并设置$ scope.error = true; 何时发生验证错误。
<input ng-class="xt-error: error;">
<div ng-show="error">{{myErrorMessage}}<div>
And set $scope.error =true; when validation error occur.
更多推荐
js,console,var,app,电脑培训,计算机培训,IT培训"/> <meta name="descriptio
发布评论