验证失败时如何使文本框边框变红

时间：2015-04-08 09:35:07

标签： angularjs

当验证失败时，我需要将文本框边框颜色设置为红色。这里我使用的是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>

3 个答案:

答案 0 :(得分：3)

如果给定条件的计算结果为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的检查，以确保验证仅检查更新的输入

答案 1 :(得分：2)

您可以添加css：

input.ng-invalid {
  border-color: red;
}

因为当验证失败时，angularjs会将类ng-invalid添加到输入中。

您可以在此处阅读文档：https://docs.angularjs.org/guide/forms#using-css-classes

答案 2 :(得分：0)

<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>

试试这个。

相关问题
最新问题