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输入为空或无效的电子邮件格式时显示红色边框

0 个答案: