使用JavaScript了解电子邮件验证

时间:2013-02-22 04:49:04

标签: javascript regex email-validation

我是JavaScript新手,在互联网上发现了这个JavaScript代码,用于验证给定的电子邮件(代码没有问题) -

<html>
<h2>Email Validation</h2>
<script language = "Javascript">
function checkEmail(emailId) {
if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(emailId)){
document.write("You have entered valid email.");
return true;
}    
return false;
}

function ValidateEmail(){
    var emailID=document.form.email;

    if ((emailID.value==null)||(emailID.value=="")){
        alert("Please Enter your Email ID")
        emailID.focus()
        return false
    }

    if (checkEmail(emailID.value)==false){
        emailID.value=""
        alert("Invalid Email Adderess");
        emailID.focus()
        return false
    }
        alert('valid');
        return true
 }
</script>

<form name="form" method="post" onSubmit="return ValidateEmail()">    
Enter an Email Address : <input type="text" name="email" size="30"><br>    
<input type="submit" name="Submit" value="Submit">    
</form>

</html>

我对代码没有任何问题,但我无法理解正则表达式/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/的含义。我不明白正则表达式的每一部分是什么意思。请赐教。

8 个答案:

答案 0 :(得分:15)

  1. 两个正斜杠/.../包含一个正则表达式。

  2. 前导^和尾随$分别匹配输入字符串的开头和结尾。也就是说,整个输入字符串应与此regexe匹配,而不是输入字符串的一部分。

  3. \ w +匹配1个或多个单词字符(a-z,A-Z,0-9和下划线)。

  4. [.-]匹配字符。要么 -。我们需要使用。代表。作为。在regexe中有特殊意义。 \ \称为转义码,它恢复以下字符的原始字面含义。

  5. [.-]?匹配[.-]。

  6. 的0或1次出现
  7. 同样,\ w +匹配1个或多个单词字符。

  8. ([.-]?\ w +)*匹配0次或多次[.-]?\ w +。

  9. 子表达式\ w +([.-]?\ w +)*用于匹配@符号前电子邮件中的用户名。它以至少一个单词字符(a-z,A-Z,0-9和下划线)开头,后跟更多单词字符或。要么 -。但是,一个。或 - 必须跟一个单词字符(a-z,A-Z,0-9和下划线)。也就是说,字符串不能包含“..”,“ - ”,“.-”或“ - 。”。有效字符串的示例是“a.1-2-3”。

  10. @匹配自己。

  11. 同样,子表达式\ w +([.-]?\ w +)*用于匹配电子邮件域名,其格式与上述用户名相同。

  12. 子表达式。\ w {2,3}与a匹配。后跟两个或三个单词字符,例如“.com”,“。edu”,“。us”,“。uk”,“。co”。

  13. (。\ w {2,3})+指定上述子表达式应出现一次或多次,例如“.com”,“。co.uk”,“。edu.sg “等等。

  14. Reference

答案 1 :(得分:3)

在这里试试REGEX

你可以找到详细的解释。

答案 2 :(得分:3)

这是正则表达式的逐段细分:


/^ =&gt;行的开头

\w+ =&gt;重复一次或多次的任何单词(字母,数字和下划线)

([\.-]?\w+)* =&gt; [可选句点(。)或短划线( - )后跟任意重复一次或多次的单词] ,可以重复0次或更多次

@\w+ =&gt;符号(@)后跟任何重复一次或多次的单词

([\.-]?\w+)* =&gt; [可选时段或短划线后跟任何重复1次或更多次的字段] 可重复0次或更多次

(\.\w{2,3})+ =&gt; [一段时间后可以重复 2-3 的任何单词,可以重复一次或多次

$/ =&gt;一行的结尾


顺便说一下,Introduction to Regular Expressions上有一个真的Codular

答案 3 :(得分:3)

试试这个

E-mail: <input type="email" name="usremail">

它对我有用

答案 4 :(得分:2)

你去吧。正则表达式的可视化工具

Regex Visualizer和A JS Fiddle Regex Explained

答案 5 :(得分:2)

此验证码对于电子邮件地址而言是错误的。特别是不允许表格first-last@domain.com的地址。这是在许多商业网站上发现的普遍错误(但不是stackoverflow - 恭喜!)。

答案 6 :(得分:1)

/^(\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+[,;]?[ ]?)+$/

这个小美女将允许您在字符串中输入一个或多个电子邮件地址,以逗号或分号结尾,后跟可选空格。 :)

答案 7 :(得分:0)

function validchat(){
    $('#btn-input-email').blur(function() {
        if($(this).val() != '') {
            var pattern = /^([a-z0-9_\.-])+@[a-z0-9-]+\.([a-z]{2,4}\.)?[a-z]{2,4}$/i;
            if(pattern.test($(this).val())){
                $(this).css({'border' : '1px solid #569b44'});
                $('#valid').text('');
            } else {
                $(this).css({'border' : '1px solid #ff0000'});
                $('#valid').text('Не верно');
            }
        } else {
            $(this).css({'border' : '1px solid #ff0000'});
            $('#valid').text('Поле email не должно быть пустым');
        }
    });
    $("#btn-input-text").blur(function() {
        var textlength = $(this).val().trim().length;
        if( textlength < 2 ){
            $(this).css({'border' : '1px solid #ff0000'});
            $('#validtext').text('Минимум 2 символ');
        }else{
            $(this).css({'border' : '1px solid #569b44'});
            $('#validtext').text('');
        }
    });
    var valid = $('#valid').text();
    var validtext = $('#validtext').text();
    if((!valid || valid == '') && (!validtext || validtext == '')){
        return true;
    }
}
validchat();
function AjaxChat () {
    $('#btn-input-email , #btn-input-text').blur();
    var valid = validchat();
    if(valid){
        var email = $('#btn-input-email').val();
        var text  = $('#btn-input-text').val();

        var data = {
            email:email,
            text:text
        }

        $.ajax({
            url: location.origin+"/chat_block.php",
            //dataType: "json", ////Тип данных
            type: "POST",
            async: false,
            data: data,
            success: function(html) {
                if(!html || html == 'null') AjaxChat ();
                if (jQuery.html != "") {
                    var b_chat = $('.chat-customer').html();
                    var chat   = 'Вы: ';
                    var obj = $.parseJSON(html);
                    chat += '<span>';
                    chat += obj['text'];
                    chat += '</span>';
                    chat += '<br /><br />';
                    $('.chat-customer').html(b_chat + chat);
                    $('#btn-input-text , #btn-input-email').val("");
                }
            },
            error: function() {
                //cosole.log('No result');
            }
        });
        $('#btn-input-email').remove();
    }
}