11

次の連絡フォーム検証スクリプトを作成しました。メールフィールドを検証するにはどうすればよいですか？

<style type="text/css">
    div.contactForm { width:370px; margin:0 auto; }
    form.contactUs label { display:block; }
    form.contactUs input { margin-bottom:10px; }
    input.submit { margin-top:10px; }
    input.error { background:#FF9B9B; border:1px solid red; }
    div.errorMessage { color:#f00; padding:0 0 20px; }
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $('.errorMessage').hide();
        $('.submit').click(function() {

            var name = $('input.name').val();
            var email = $('input.email').val();
            var phone = $('input.phone').val();

            if (name == '') {
                $('input.name').addClass('error');
                $('input.name').keypress(function(){
                    $('input.name').removeClass('error');
                });
            }
            if (email == '') {
                $('input.email').addClass('error');
                $('input.email').keypress(function(){
                    $('input.email').removeClass('error');
                });
            }
            if (phone == '') {
                $('input.phone').addClass('error');
                $('input.phone').keypress(function(){
                    $('input.phone').removeClass('error');
                });
            }
            if (name == '' || email == '' || phone == '') {
                $('.errorMessage').fadeIn('medium');
                return false;
            }

        });
    });
</script>

<div class="contactForm">

<h2>Contact Us</h2>

<div class="errorMessage">Please enter all required fields.</div>

<form action="http://google.com" method="post" class="contactUs">

    <label>Name <em>(required)</em></label>
    <input type="text" name="name" class="name" size="30" />

    <label>Email <em>(valid email required)</em></label>
    <input type="text" name="email" class="email" size="30" />

    <label>Phone <em>(required)</em></label>
    <input type="text" name="phone" class="phone" size="30" />

    <label>Message</label>
    <textarea name="message" cols="40" rows="10"></textarea>

    <br />
    <input type="submit" name="submit" value="Submit" class="submit" />

</form>

</div><!--contactForm-->

編集

検証とは、入力された値に適切な場所に「@」と「。」が含まれている必要があることを意味します。

また、追加のプラグインは使用したくありません。

4

5 に答える 5

42

プラグインを使用したくない場合は、RegExを使用できます。

var testEmail = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
if (testEmail.test(valueToTest))
    // Do whatever if it passes.
else
    // Do whatever if it fails.

これにより、ほとんどのメールが届きます。RegExを使用した電子メールの検証に関する興味深い記事。

ここでスクリプトをテストできます：http：//jsfiddle.net/EFfCa/

于 2010-09-08T01:34:26.667 に答える
3

プラグインを本当に使用したくない場合は、この方法が非常に優れていることがわかりました。

function validateEmail(email) {
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    if( !emailReg.test( email ) ) {
        return false;
    } else {
        return true;
    }
}

JSFIDDLE

http://thejimgaudet.com/articles/support/web/jquery-e-mail-validation-without-a-plugin/

于 2013-01-30T19:41:25.860 に答える
1

私は現在、フォームの検証にケチャップを使用しています。Basassistのプラグインもあります。プラグインを確認してください。正規表現を書く時間を節約できます。

于 2010-09-08T01:21:46.290 に答える
1

input.email次のようにブロックを変更します。

            if (email == '') {
            $('input.email').addClass('error');
            $('input.email').keypress(function(){
                $('input.email').removeClass('error');
            });
            $('input.email').focusout(function(){
                $('input.email').filter(function(){
                    return this.value.match(/your email regex/);
                }).addClass('error');
            });
        }

説明：フォーム要素にフォーカスアウトアクションを追加input.emailし、RFC822標準を使用して電子メール文字列を検証します。合格できない場合は、「エラー」クラスを追加します。

私はこれをブラウザでテストしていませんが、jQuery>1.4で動作するはずです。

編集：正規表現を削除しました。お気に入りの正規表現を配置してください。

于 2010-09-08T02:11:10.347 に答える
1

次のコードは私のために働いています。

<input type="text" id="Email" />

$('#Email').change(function () {
        var status = false;
        var email = $('#Email').val();
        var emailLength = email.length;
        if (email != "" && emailLength > 4) {
            email = email.replace(/\s/g, "");  //To remove space if available
            var dotIndex = email.indexOf(".");
            var atIndex = email.indexOf("@");

            if (dotIndex > -1 && atIndex > -1) {   //To check (.) and (@) present in the string
                if (dotIndex != 0 && dotIndex != emailLength && atIndex != 0 && atIndex != emailLength && email.slice(email.length - 1) != ".") {   //To check (.) and (@) are not the firat or last character of string
                    var dotCount = email.split('.').length
                    var atCount = email.split('@').length

                    if (atCount == 2 && (dotIndex - atIndex > 1)) { //To check (@) present multiple times or not in the string. And (.) and (@) not located subsequently
                        status = true;
                        if (dotCount > 2) {    //To check (.) are not located subsequently
                            for (i = 2; i <= dotCount - 1; i++) {
                                if (email.split('.')[i-1].length == 0) {
                                    status = false;
                                }
                            }
                        }
                    }
                }
            }

        }

        $('#Email').val(email);
        if (!status) {
            alert("Wrong Email Format");
        }
    });
于 2020-06-05T08:09:36.953 に答える