1

我在 jQuery 中编写了一些代码，用于删除/替换焦点和模糊事件的电子邮件字段的默认值。它的工作正常，

但我想要它在 JavaScript 中。我已经尝试了几次，但我无法成功。

这是我的 jQuery 代码

    $(document).ready(function(){
    var email = 'Enter E-Mail Address....';
    $('input[type="email"]').attr('value',email).focus(function(){
        if($(this).val()==email){
            $(this).attr('value','');
        }
    }).blur(function(){
        if($(this).val()==''){
            $(this).attr('value',email);
        }
    }); 
});

谁能告诉我如何在 JavaScript 中做到这一点，

4

4 回答 4

2

假设<input type='text' id="email_field"/>

var email = 'Enter E-Mail Address....';
var emailField = document.getElementById("email_field");
emailField.onfocus = function(){
  removeDefaultText(this);
}
emailField.onblur = function(){
  setDefaultText(this);
}

function removeDefaultText(element){
  var defaultValue = 'Enter E-Mail Address....';
  if(element.value == defaultValue){
    element.value = "";
  }
}

function setDefaultText(element){
  var defaultValue = 'Enter E-Mail Address....';
  if(element.value == ''){
    element.value = defaultValue;
  }
}
于 2012-11-02T07:26:41.130 回答
1

尝试

function validEmail(e) {
    var filter = /^\s*[\w\-\+_]+(\.[\w\-\+_]+)*\@[\w\-\+_]+\.[\w\-\+_]+(\.[\w\-\+_]+)*\s*$/;
    return String(e).search (filter) != -1;
}

用 jQuery

var userinputmail= $(this).val();
var pattern = /^\b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b$/i

if(!pattern.test(userinputmail))
{
  alert('not a valid e-mail ');
}​

您还可以尝试以下正则表达式进行其他验证（我认为这会有所帮助）

  1. 匹配用户名 => /^[a-z0-9_-]{3,16}$/
  2. 匹配密码 =>/^[a-z0-9_-]{6,18}$/
  3. 匹配一个 URL =>/^[a-z0-9_-]{6,18}$/
于 2012-11-02T06:26:49.493 回答
1

显然，当没有其他值时，您正在尝试显示占位符值。

在任何现代浏览器中，您都可以简单地使用这个：

<input type="text" class="email" placeholder="Enter E-Mail Address..." />

不幸的是，这不包括旧的 IE，所以 vanilla JavaScript 的方法可能是这样的：

// grab all input[type="email"] elements
var emailFields = document.getElementsByTagName('INPUT').filter(function(input) {
  return input.type === 'email';
});

var placeholder = 'Enter your E-Mail Address...';
// watch onfocus and onblur on each of them
emailFields.forEach(function(input) {
  input.onfocus = function() {
    // clear only if the value is our placeholder
    if (input.value === placeholder) {
      input.value = '';
    }
  }

  input.onblur = function() {
    // set the value back to the placeholder, if it's empty
    if (input.value === '') {
      input.value = placeholder;
    }
  }
});

希望适合您的需求。

于 2012-11-02T07:41:05.717 回答
0

您可以为此使用常规的旧 javascript：

function IsEmail(email) {
  var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  return regex.test(email);
}

======

function isValidEmailAddress(emailAddress) {
    var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
    return pattern.test(emailAddress);
};

if( !isValidEmailAddress( emailaddress ) ) { /* do stuff here */ }

检查这个链接

于 2012-11-02T06:28:52.313 回答