当文本框字段保持为空时，如何将文本框边框颜色突出显示为红色？

Question

在我的电子邮件表单中，当电子邮件字段为空或不正确时，边框颜色应该更改为红色，那么如何使用javascript来实现呢？

UI脚本

<tr>
    <td style="color:rgb(05,111,159);text-align:right;">
    <p style="color:rgb(05,111,159);font-size:large" class="col-sm2">
    Confirm Email:</p>
    </td> 

    <td>
    <asp:TextBox Height="28px" Width="260px"ID="ConfirmEmail"runat="server" 
    TextMode="Email"></asp:TextBox>
    <asp:RequiredFieldValidator ID="ConfirmEmailRequired" runat="server" 
    ControlToValidate="ConfirmEmail" Display="Dynamic"> 
    </asp:RequiredFieldValidator>
    </td>
</tr>

当文本框字段在单击按钮时保持为空，我想将边框颜色更改为红色。

Answer 1

var confirmEmail = document.getElementById('ConfirmEmail').value;

if(confirmEmail.length == 0){
   confirmEmail.style.border = "1px solid red";
}else{
   confirmEmail.style.border = "1px solid black";
}

希望这能有所帮助。

Answer 2

​

  function validate(){
  var input = document.getElementById('ConfirmEmail');
    //if(input.value == ""){
    if(input.value.trim().length === 0){
      input.style.border = "1px solid red";
    }
    else if(validateEmail(input.value)==false){
       input.style.border = "1px solid red";
    }
    else{
      input.style.border = "1px solid black";
    }
  }
  
function validateEmail(mail) 
{
 if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(mail))
  {
    return (true)
  }
    return (false)
}

<td style="color:rgb(05,111,159);text-align:right;"><p style="color:rgb(05,111,159);font-size:large" class="col-sm-2">Confirm Email:</p></td>

        <td>
            <input type="textbox" Height="28px" Width="260px" ID="ConfirmEmail" runat="server" TextMode="Email"/>
            <asp:RequiredFieldValidator ID="ConfirmEmailRequired" runat="server" ControlToValidate="ConfirmEmail" Display="Dynamic"></asp:RequiredFieldValidator></td>
            
            <input type="button" id="Submit" value="Submit" onclick="validate()"/>

​

Answer 3

使用JQuery，这应该是可行的。

​

function inputVal() {
  var inputEmail = $("#ConfirmEmail");
  if (inputEmail[0].value === "" || inputEmail[0].value.length === 0) {
    inputEmail.css("border", "1px solid red");
  } else {
    inputEmail.css("border", "1px solid green");
  }
}

function addUser() {
  //Do something
  document.getElementById("CreateUserButton").innerHTML = "User Added!";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="inputVal()"> Check Input</button>
<Table>
  <tr>
    <td style="color:rgb(05,111,159);text-align:right;">
      <p style="color:rgb(05,111,159);font-size:large" class="col-sm-2">Confirm Email:</p>
    </td>
    <td>
  </tr>
  <tr>
    <td>
      <Input Height="28px" Width="260px" ID="ConfirmEmail" runat="server" TextMode="Email" placeholder="Write Here"></Input>
    </td>

    <td align="right" colspan="2">
      <Button ID="CreateUserButton" CssClass="col-sm-offset-2" font-size="Medium" font-family="Arial" Font-Bold="true" font-colour="Olive" Visible="false" runat="server" onclick="addUser()" CommandName="MoveNext">Create User Button</Button>
  </tr>
</Table>

​