如果在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
发布评论