jquery - 当输入为空或使用 jquery 的电子邮件格式无效时显示红色边框

Question

我有一个电子邮件输入，如果该字段为空并且用户在输入内部单击，然后外部显示红色边框和错误消息，我想要，直到用户在输入中输入任何内容。我已经使用 jQuery 完成了这项工作，它可以 100% 工作。这是 sign_in.php 中的代码：

<form action="sign_in.php" method="post" id="sign_in_form">
  <div class="form-group">
    <label for="email" style="font-weight: bold; cursor: text;"><span style="color:red;">* </span>Email Address</label>
    <input type="email" name="email_3" id="email_3" class="form-control form-control-lg validate"
    value="<?php if(isset($_POST['email_3'])){ echo $_POST['email_3'];}?>" style="width:455px; background-color:#EEEEEE;">
    <div class="error_2" style="font-size: 14.5px;">Please enter a valid email address.</div>
  </div>
</form>
<script>
$(document).on('blur','.validate',function(){
  if(!$.trim($(this).val())){
    $(this).closest('.form-group').find('.error_2').show()
    $(this).addClass('error_show')
    $(this).addClass('error_show_2')
  }
}).on('focus','.validate',function(){
   $(this).closest('.form-group').find('.error_2').hide()
   $(this).removeClass('error_show')
   $(this).removeClass('error_show_2')
})
</script>

这是 main.css 的代码：

.validate:hover,
.validate:focus{
 border: 3px solid #EEA730;
}

.error_show_2{
  border:1px solid red !important;
}

.error_show:hover{
 box-shadow: 0 0 0 3px #EEA730 !important;
 border:1px solid red !important;
}

现在我还需要补充一点，如果电子邮件以无效格式写入，则显示红色边框并显示消息，因此我将其添加到我的代码中：

<script>
$(document).on('blur','.validate',function(){
  if(!$.trim($(this).val()) || /^(([^<>()\[\]\\.,;:\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,}))$/){
    $(this).closest('.form-group').find('.error_2').show()
    $(this).addClass('error_show')
    $(this).addClass('error_show_2')
  }
}).on('focus','.validate',function(){
   $(this).closest('.form-group').find('.error_2').hide()
   $(this).removeClass('error_show')
   $(this).removeClass('error_show_2')
})
</script>

我的意思是，如果输入为空或用户输入了无效的电子邮件格式，则显示红色边框并显示消息，但它不起作用。这个怎么做？

标签： jquery