模糊功能不是第一位

Question

I am using regex to disable registering with a apple email

if (str.match('(@me.com)') || str.match('(@icloud.com)') || str.match('(@mac.com)'))

The code is working fine if I run it with the browser console but I cant get it to work initially, Ive wrapped it in a $(document).ready(function () { .. } as well the blur function just never seems to fire. Here is the code below as well as CodePen

Html

<div class="content">
  <form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" role="form">
    <div class="warning email-warning" style="display:none;">A non-Apple email address is required due to issues with our mail server. Sorry about that!</div>
    <input type="text" name="email" placeholder="" value="" id="Email"/>
    <input type="password" name="password" placeholder="Password" value="" />
    <input style="font-size: 1.5rem;" type="submit" value="Login" class="btn btn-default" />
    <div class="already">Don't have an account? <a href="/index.php?route=account/register">Register</a></div>
    <a class="block text-center" href="/index.php?route=account/forgotten">Forgot your password?</a>
  </form>
</div>

JS

function emailValidate(){
  var str = $('#Email').val();
  $('#Email').blur(function() {
    if (str.match('(@me.com)') || str.match('(@icloud.com)') || str.match('(@mac.com)')) {
      $('.email-warning').css('display', 'block')
    }
  });
}
emailValidate()

Answer 1

You need to re-assign the value using val() to variable str inside blur event callback.

function emailValidate(){

  $('#Email').blur(function() {
    var str = $(this).val();
    if (str.match('(@me.com)') || str.match('(@icloud.com)') || str.match('(@mac.com)')) {
      $('.email-warning').css('display', 'block')
    }
    alert(str)
  });
}
emailValidate()

Answer 2

you must get value of target object #Email when the blur event trigger. In your code, you get that value when you bind blur event. Try with

 function emailValidate(){ $('#Email').blur(function() { var str = $('#Email').val(); if (str.match('(@me.com)') || str.match('(@icloud.com)') || str.match('(@mac.com)')) { $('.email-warning').css('display', 'block') } }); } emailValidate(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="content"> <form role="form"> <div class="warning email-warning" style="display:none;">A non-Apple email address is required due to issues with our mail server. Sorry about that!</div> <input type="text" name="email" placeholder="" value="" id="Email"/> <input type="password" name="password" placeholder="Password" value="" /> <input style="font-size: 1.5rem;" type="submit" value="Login" class="btn btn-default" /> <div class="already">Don't have an account? <a href="/index.php?route=account/register">Register</a></div> <a class="block text-center" href="/index.php?route=account/forgotten">Forgot your password?</a> </form> </div> 

Hope this helps. Regards.