姓名，电子邮件验证

Question

姓名，电子邮件验证

3

我正在寻找一个验证姓名和电子邮件输入的代码，它们位于<Form onsubmit="return validate();">中。

我希望用户名只包含A-Z、a-z字符，并且必须包含下划线_，电子邮件应该包含@。我该如何使用jQuery实现这个功能？

表单（示例）：

<html>
    <head>
    <title>TEST</title>
    </head>
    <body>
    <form action="..." method="POST" onSubmit="return Check()" >
    <input type="text" id="name" placeholder="Please enter your Name. (Must have underscore)" required>
    <input type="text" id="email" placeholder="E-Mail">
    <input type="submit" value="submit">
    </form>
    </body>
</html>

我已经尝试过了。

<script type="text/javascript">
        jQuery(document).ready(function($){
            $('[name="submit"]').click(function(e){
            var name = document.getElementById("name").value;
            if(re = /[a-zA-Z]*_[a-zA-Z]*/;) {
                $(".name").addClass("error");
                return false;
            } else {
                $(".name").removeClass("error");
                $(".name").addClass("success");
                return true;
            }
            });
        });
</script>

- o'Bass

1

你有没有真正去寻找过或者亲自尝试过任何东西？ - Sam

看了一下，但找不到一个正确的代码片段，只检查A-Z和下划线。 - o'Bass

了解正则表达式：http://www.w3schools.com/jsref/jsref_obj_regexp.asp - Sam

你的代码中这段内容： if(re = /[a-zA-Z]_[a-zA-Z]/;) {...}应该替换为： re = /[a-zA-Z]_[a-zA-Z]/; if (re.test('string_to_validate') {..当字符串有效时运行的代码..} - Polak

4个回答

3

使用jQuery和正则表达式：

将字符串传递给RegExp或使用//语法调用创建一个正则表达式
regex.test(string)而不是string.test(regex)

在您的代码中：

$(".name").on('keyup', function(e)
{
    var name = $(this).val();
    if(new RegExp(/^[a-zA-Z_]+$/i).test(name)) // or with quotes -> new RegExp("^[a-zA-Z_]+$", 'i')
        $(this).addClass("error");
    else
        $(this).switchClass("error", "success", 1000, "easeInOutQuad");

    e.preventDefault();
    e.stopPropagation(); // to avoid sending form when syntax is wrong
});

针对电子邮件地址输入，可以使用以下正则表达式：

/^[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i

或者..

为了增加一些现代感，您可以使用HTML5电子邮件字段类型

<input type="email" id="email">

- MTroy

固定代码，完美无缺 :) 首先，在提交表单之前（或之前）可以测试语法的有效性。 - MTroy

3

现在使用HTML5的高级功能更加容易，您可以按照以下方式进行验证:

 <form action="" method="">
    <!-- Name containing only letters or _ -->
    Name: <input type="text" name="name" pattern="[a-zA-Z][[A-Za-z_]+" /> 
    <!-- using type email, will validate the email format for you-->
    Email: <input type="email" id="email" />
   <input type="submit" value="Submit">
</form>

请点击这里了解更多有关HTML5表单验证的功能。

- Dhia

我做了一些新的更改，但两者都应该适用于您。我在这里进行了测试(http://jsfiddle.net/nR6yg/213/embedded/result/)，并且运行良好。 - Dhia

我尝试了，但似乎对我不起作用 :x 它跳过了名称输入然后进行验证和检查，但还是谢谢！ - o'Bass

2

@Polak，我尝试了一下，如果我理解你的意思的话 :x 抱歉，我对JavaScript还很陌生。

<script type="text/javascript">
    jQuery(document).ready(function($){
        $('[name="submit"]').click(function(e){
            var name = document.getElementById("display_name").value;

            re = /[a-zA-Z]*_[a-zA-Z]*/;
            if (re.test(name) {
                //Things to do when the entry is valid.
                $(".NameCheck").removeClass("name_error");
                $(".NameCheck").addClass("name_success");
                return true;
            } else {
                //Things to do when the user name is not valid.
                $(".NameCheck").addClass("name_error");
                return false;
            });
        });
    });

- o'Bass

我是stackoverflow的新手，我编辑了你的答案，将if (re.test("name")) {......更改为if(re.test(name)){...没有引号，并且if语句被倒置。当你定义一个字符串变量foo=/...../;像一个正则表达式一样，那么你可以做像foo.test('string to test');这样的事情，当字符串被正则表达式接受时，它将返回true。 - Polak

现在我可以更好地理解了，谢谢。但是我遇到了“未捕获的SyntaxError:意外的令牌{”错误。但还是感谢你的帮助！ - o'Bass

我认为您在编辑时忘记了将 if(re.test(name) { 改为 if(re.test(name)) {. 现在它可以正常工作了。非常感谢您的帮助！ - o'Bass

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Polak · Accepted Answer

对于有效的电子邮件地址：如何在JavaScript中验证电子邮件地址？

对于您的用户名，使用类似以下的正则表达式：

re = /^[a-zA-Z]*_[a-zA-Z]*$/; //this always needs an underscore to be valid.

如果需要的话，这是接受任何az AZ和_而不接受其他字符的正则表达式，具体取决于您的要求：

re = /^[a-zA-Z_]*$/;
re = /^[a-zA-Z_]{3,}$/; //3 or more chars

测试你的正则表达式：

re = /^[a-zA-Z_]*$/;
return re.test('any_string_to_test'); //it returns true if your string is valid