当验证失败时，我需要将文本框边框设置为红色。这里我使用的是angulerjs验证，我不知道如何将文本框的颜色设置为红色。提前谢谢。
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Archimedes (Beta)</title>
<meta name="author" content="Dharm">
<script type="text/javascript" src="../js/arc/setup/arcadmin.js"></script>
</head>
<body>
<form name="preSourceThresholdForm">
<div class="col-md-12 h6 b" style="padding-bottom: 40px;">
<b>Configure PreSource Threshold</b>
<input type="hidden" class="form-control" id="preSourceThresholdGroup" ng-model="admin.preSourceThresholdGroup" value="PreSource Threshold">
</div>
<div class="col-md-3 b" style="padding-top: 0px">
PreSource Threshold
</div>
<div class="col-md-2">
<input type="number" style="width:80px;" min="0" max="100" name="preSourceThreshold" ng-model="admin.preSourceThreshold" required> %
<span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.number">Must Be Number!</span>
<span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.max">Number Should Be Less Then 100</span>
<span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.min">Number Should Be greater Then 0</span>
</div>
<div class="col-md-2">
<input id="preSourceSave" type="button" ng-disabled="!admin.preSourceThreshold" ng-click="preSourceSave()" class="btn btn-default" value="Save" />
</div>
</form>
</body>
<div class="modal"></div>
</html>
更新
请检查下面的代码。
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Archimedes (Beta)</title>
<meta name="author" content="Dharm">
<script type="text/javascript" src="../js/arc/setup/arcadmin.js"></script>
</head>
<body>
<style>
.red {
border: solid 1px red;
}
</style>
<form name="preSourceThresholdForm" novalidate class="form-horizontal">
<div class="col-md-12 h6 b" style="padding-bottom: 40px;">
<b>Configure PreSource Threshold</b>
<input type="hidden" class="form-control" id="preSourceThresholdGroup" ng-model="admin.preSourceThresholdGroup" value="PreSource Threshold">
</div>
<div class="col-md-3 b" style="padding-top: 0px">
PreSource Threshold
</div>
<div class="col-md-2">
<input type="number" style="width:80px;" min="0" max="100" name="preSourceThreshold" ng-class="{red: test.preSourceThreshold.$invalid}" ng-model="admin.preSourceThreshold" required> %
<span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.number">Must Be Number!</span>
<span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.max">Number Should Be Less Then 100</span>
<span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.min">Number Should Be greater Then 0</span>
</div>
<div class="col-md-2">
<input id="preSourceSave" type="button" ng-disabled="!admin.preSourceThreshold" ng-click="preSourceSave()" class="btn btn-default" value="Save" />
</div>
</form>
</body>
<div class="modal"></div>
</html>
如果给定条件的计算结果为true，则可以使用ng-class指令应用CSS类：
.red {
border: solid 1px red;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<form name="test">
<input type="number" ng-model="MyNumber" name="MyNumber" ng-class="{red: test.MyNumber.$invalid}" />
</form>
<div>更新
以下是示例的工作代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app>
<style>
.red {
border: solid 1px red;
}
</style>
<form name="preSourceThresholdForm" novalidate class="form-horizontal">
<div class="col-md-12 h6 b" style="padding-bottom: 40px;">
<b>Configure PreSource Threshold</b>
<input type="hidden" class="form-control" id="preSourceThresholdGroup" ng-model="admin.preSourceThresholdGroup" value="PreSource Threshold">
</div>
<div class="col-md-3 b" style="padding-top: 0px">
PreSource Threshold
</div>
<div class="col-md-2">
<input type="number" style="width:80px;" min="0" max="100" name="preSourceThreshold" ng-class="{red: preSourceThresholdForm.preSourceThreshold.$invalid && preSourceThresholdForm.preSourceThreshold.$dirty}" ng-model="admin.preSourceThreshold" required> %
<span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.number && preSourceThresholdForm.preSourceThreshold.$dirty">Must Be Number!</span>
<span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.max && preSourceThresholdForm.preSourceThreshold.$dirty">Number Should Be Less Then 100</span>
<span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.min && preSourceThresholdForm.preSourceThreshold.$dirty">Number Should Be greater Then 0</span>
<span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.required && preSourceThresholdForm.preSourceThreshold.$dirty">This field is required</span>
</div>
<div class="col-md-2">
<input id="preSourceSave" type="button" ng-disabled="!admin.preSourceThreshold" ng-click="preSourceSave()" class="btn btn-default" value="Save" />
</div>
</form>
</body>
<div class="modal"></div>
</html>**更新II**
我添加了对$dirty的检查，以确保验证仅检查更新的输入
您可以添加一个css：
input.ng-invalid {
border-color: red;
}
因为angularjs会在验证失败时将类ng-invalid添加到输入中。
您可以在此处阅读文档：https://docs.angularjs.org/guide/forms#using-css类
<form name="preSourceThresholdForm" novalidate class="form-horizontal">
<div class="form-group">
<div ng-class="{'has-error': preSourceThresholdForm.preSourceThreshold.$invalid && (preSourceThresholdForm.preSourceThreshold.$dirty )}">
<input type="number" style="width:80px;" min="0" max="100" name="preSourceThreshold" ng-model="admin.preSourceThreshold" class="form-control" required> %
<span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.number">Must Be Number!</span>
<span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.max">Number Should Be Less Then 100</span>
<span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.min">Number Should Be greater Then 0</span>
</div>
</div>
</form>
试试这个。