Как проверить, не разрешая gmail и Yahoo во время регистрации пользователя? - PullRequest
Новая
       5

Как проверить, не разрешая gmail и Yahoo во время регистрации пользователя?

0 голосов
/ 17 сентября 2018

Как проверить?Не разрешайте Gmail, Yahoo и т. Д. Адреса электронной почты.И еще одна проблема заключается в том, что, когда все поля не введены, отправка должна быть отключена.когда я заполняю все, отправка включена и когда я удаляю один ввод после его заполнения, отправка должна быть отключена, но все же она включена.Как это исправить? 

        $("#passwordv").on("focusout", function (e) {
            if ($(this).val() != $("#passwordvConfirm").val()) {
                $("#passwordvConfirm").removeClass("valid").addClass("invalid");

                $('#btn-1').show();

            } else {
                $("#passwordvConfirm").removeClass("invalid").addClass("valid");
                $('#btn').removeAttr("disabled");
                $('#btn-1').hide();

            }

        });

        $("#passwordvConfirm").on("keyup", function (e) {
            if ($("#passwordv").val() != $(this).val()) {
                $(this).removeClass("valid").addClass("invalid");
                $('#btn-1').show();
            } else {
                $(this).removeClass("invalid").addClass("valid");
                $('#btn').removeAttr("disabled");
                $('#btn-1').hide();
            }
        });

        $(document).ready(function () {
            $('#passwordv').keyup(function () {
                $('#result').html(checkStrength($('#passwordv').val()))
            })

            function checkStrength(password) {
                var strength = 0
                if (password.length < 6) {
                    $('#result').removeClass()
                    $('#result').addClass('short')
                    return 'Too short'
                }
                if (password.length > 7) strength += 1
                // If password contains both lower and uppercase characters, increase strength value.
                if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) strength += 1
                // If it has numbers and characters, increase strength value.
                if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)) strength += 1
                // If it has one special character, increase strength value.
                if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1
                // If it has two special characters, increase strength value.
                if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1
                // Calculated strength value, we can return messages
                // If value is less than 2
                if (strength < 2) {
                    $('#result').removeClass()
                    $('#result').addClass('weak')
                    return 'Weak'
                } else if (strength == 2) {
                    $('#result').removeClass()
                    $('#result').addClass('good')
                    return 'Good'
                } else {
                    $('#result').removeClass()
                    $('#result').addClass('strong')
                    return 'Strong'
                }
            }
        });

        $('.form').find('input, textarea').on('keyup blur focus', function (e) {

            var $this = $(this),
                label = $this.prev('label');

            if (e.type === 'keyup') {
                if ($this.val() === '') {
                    label.removeClass('active highlight');
                } else {
                    label.addClass('active highlight');
                }
            } else if (e.type === 'blur') {
                if ($this.val() === '') {
                    label.removeClass('active highlight');
                } else {
                    label.removeClass('highlight');
                }
            } else if (e.type === 'focus') {

                if ($this.val() === '') {
                    label.removeClass('highlight');
                } else if ($this.val() !== '') {
                    label.addClass('highlight');
                }
            }

        });

        $('.tab a').on('click', function (e) {

            e.preventDefault();

            $(this).parent().addClass('active');
            $(this).parent().siblings().removeClass('active');

            target = $(this).attr('href');

            $('.tab-content > div').not(target).hide();

            $(target).fadeIn(600);

        });

*,
*:before,
*:after {
    box-sizing: border-box;
}

html {
    overflow-y: scroll;
}

body {
    background: #f1f0ee;
    font-family: 'Titillium Web', sans-serif;
}

a {
    text-decoration: none;
    color: #1ab188;
    transition: .5s ease;
}

a:hover {
    color: #179b77;
}

.form {
    background: rgba(19, 35, 47, 0.9);
    padding: 40px;
    max-width: 600px;
    margin: 130px auto;
    border-radius: 4px;
    box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);
}

@media only screen and (max-width: 768px) {
    .form {
        background: rgba(19, 35, 47, 0.9);
        padding: 40px;
        max-width: 600px;
        margin: 30px auto;
        border-radius: 4px;
        box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);
    }

}

.tab-group {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
}

.tab-group:after {
    content: "";
    display: table;
    clear: both;
}

.tab-group li a {
    display: block;
    text-decoration: none;
    padding: 15px;
    background: rgba(160, 179, 176, 0.25);
    color: #a0b3b0;
    font-size: 20px;
    float: left;
    width: 50%;
    text-align: center;
    cursor: pointer;
    transition: .5s ease;
}

.tab-group li a:hover {
    background: #179b77;
    color: #ffffff;
}

.tab-group .active a {
    background: #1ab188;
    color: #ffffff;
}

.tab-content>div:last-child {
    display: none;
}

h1 {
    text-align: center;
    color: #ffffff !important;
    font-weight: 300;
    margin: 0 0 40px !important;
}

label {
    position: absolute;
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
    left: 13px;
    color: rgba(255, 255, 255, 0.5);
    transition: all 0.25s ease;
    -webkit-backface-visibility: hidden;
    pointer-events: none;
    margin-top: 18px;

}

label .req {
    margin: 2px;
    color: #1ab188;
}

label.active {
    -webkit-transform: translateY(-25px);
    transform: translateY(-25px);
    left: 2px;
    font-size: 14px;
}

label.active .req {
    opacity: 0;
}

label.highlight {
    color: #ffffff;
}

input,
textarea {
    font-size: 22px;
    display: block;
    width: 100%;
    height: 100%;
    padding: 8px 10px;
    background: none;
    background-image: none;
    border: 1px solid #a0b3b0;
    color: #ffffff;
    border-radius: 0;
    transition: border-color .25s ease, box-shadow .25s ease;
}

input:focus,
textarea:focus {
    outline: 0;
    border-color: #1ab188;
}

textarea {
    border: 2px solid #a0b3b0;
    resize: vertical;
}

.field-wrap {
    position: relative;
    margin-bottom: 25px;
}

.top-row:after {
    content: "";
    display: table;
    clear: both;
}

.top-row>div {
    float: left;
    width: 48%;
    margin-right: 4%;
}

.top-row>div:last-child {
    margin: 0;
}

.button {
    border: 0;
    outline: none;
    border-radius: 50px;
    padding: 15px 0;
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    background: #1ab188;
    color: #ffffff;
    transition: all 0.5s ease;
    -webkit-appearance: none;
}

.button:hover,
.button:focus {
    background: #179b77;
}

.button-block {
    display: block;
    width: 50%;
    margin: 0 auto;
}

.forgot {

    text-align: right;
}

#toast-container {
    top: 4% !important;
    right: 40% !important;

    left: 40%;
}

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div class="form">

        <ul class="tab-group">
            <li class="tab active"><a href="#login">Log In</a></li>
            <li class="tab"><a href="#signup">Sign Up</a></li>

        </ul>

        <div class="tab-content">

            <div id="login">


                <form id="form_id" method="post" name="myform">

                    <div class="field-wrap">
                        <label>
                            User Name<span class="req">*</span>
                        </label>
                        <input type="text" autocomplete="off" name="username" id="username" required>
                    </div>

                    <div class="field-wrap">
                        <label>
                            Password<span class="req">*</span>
                        </label>
                        <input type="password" autocomplete="off" name="password" id="password" required>
                    </div>

                    <p class="forgot"><a href="#">Forgot Password?</a></p>
                    <input type="button" value="Log in" id="submit" onclick="validate()" class="button button-block">

                </form>
            </div>
            <div id="signup">
                <form>
                    <div class="field-wrap">
                        <label>
                            Name<span class="req">*</span>
                        </label>
                        <input type="text" required autocomplete="off" />
                    </div>


                    <div class="field-wrap">
                        <label>
                            Email Address<span class="req">*</span>
                        </label>
                        <input type="email" required autocomplete="off" />
                    </div>
                    <div class="field-wrap">
                        <label>
                           Company Details<span class="req">*</span>
                        </label>
                        <input type="text" required autocomplete="off" />
                    </div>
                    <div class="field-wrap">
                        <label for="passwordv">
                            Set A Password<span class="req">*</span>
                        </label>
                        <input id="passwordv" type="password" class="validate" required autocomplete="off" />
                        <span id="result" style="color: white;"></span>
                    </div>
                    <div class="field-wrap" style="margin-bottom: 0px">
                        <label id="lblPasswordvConfirm" for="passwordvConfirm" data-error="Password not match"
                            data-success="Password Match">
                            Confirm Password<span class="req">*</span>
                        </label>
                        <input id="passwordvConfirm" type="password" required autocomplete="off" />
                    </div>

                    <label class="field-wrap" id="btn-1" style="display: none;color: white;font-size: 15px">password
                        didn't match
                    </label>
                    <input type="submit" value="submit" id="btn" class="button button-block" style="margin-top:20px;cursor:not-allowed"
                        disabled />

                </form>

            </div>

        </div><!-- tab-content -->

    </div> <!-- /form -->

1 Ответ

0 голосов
/ 17 сентября 2018

Хорошо, я немного разбил ваш код, чтобы его было легче понять.Этот пример будет включать только вашу регистрационную часть вашего приложения.

Как я объяснил в своем комментарии, что вы могли бы сделать, чтобы проверить электронную почту, чтобы увидеть, являются ли они электронной почтой Gmail или Yahoo,с помощью регулярных выражений (RegExp) .

Пример Gmail RegExp:

/([a-zA-Z0-9]+)([\.{1}])?([a-zA-Z0-9]+)\@gmail([\.])com/g

Пример Yahoo RegExp:

/^[^@]+@(yahoo|ymail|rocketmail)\.(com|in|co\.uk)$/i

В моем примере я добавлю их в функции для простоты.

Функция Gmail RegExp: 

function regExpGmail() {
    return RegExp(/([a-zA-Z0-9]+)([\.{1}])?([a-zA-Z0-9]+)\@gmail([\.])com/g);
}

Функция Yahoo RegExp: 

function regExpYahoo() {
    return RegExp(/^[^@]+@(yahoo|ymail|rocketmail)\.(com|in|co\.uk)$/i);
}

Теперь я немного изменил ваш код, чтобы иметь несколько селекторов .Некоторые из ваших полей ввода не содержали селекторов , таких как name или id , в то время как другие имели.Поэтому я позволил себе добавить некоторые из них.

Следует отметить, что id , который вы назначили для поля ввода пароля (не для подтверждения пароля, а для предыдущего), имелнекоторые id конфликтов Поэтому я позволил себе соответственно изменить id .

Затем я создал функцию, которая обрабатывает всю логику проверки полей ввода в соответствии с вашими потребностями в вашем вопросе.Однако, опять же, довольно упрощенно.Я бы посоветовал вам изменить его так, чтобы он немного лучше подходил к вашему решению, но он должен дать вам больше, чем общее представление.

Полный пример: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<script>
function regExpGmail() {
    return RegExp(/([a-zA-Z0-9]+)([\.{1}])?([a-zA-Z0-9]+)\@gmail([\.])com/g);
}

function regExpYahoo() {
    return RegExp(/^[^@]+@(yahoo|ymail|rocketmail)\.(com|in|co\.uk)$/i);
}

function validateInputs() {
    reGmail=regExpGmail();
    reYahoo=regExpYahoo();

    var result = true;

    var nameCheck=$('#nameField').val();
    var emailCheck=$('#emailField').val();
    var compDetailsCheck=$('#compDetailsField').val();
    var passwordCheck=$('#passwordvz').val();
    var passwordConfirmCheck=$('#passwordvConfirm').val();

    if(!nameCheck) {
        result=false;
        $('#nameError').html('Name is missing!');
    }
    else {
        $('#nameError').html('');
    }

    if(!emailCheck) {
        result=false;
        $('#emailError').html('E-mail is missing!');
    }
    else if(reGmail.test(emailCheck)) {
        result=false;
        $('#emailError').html('Gmail is not allowed!');
    }
    else if(reYahoo.test(emailCheck)) {
        result=false;
        $('#emailError').html('Yahoo is not allowed!');
    }
    else {
        $('#emailError').html('');
    }

    if(!compDetailsCheck) {
        result=false;
        $('#compDetailsError').html('Company Details is missing!');
    }
    else {
        $('#compDetailsError').html('');
    }

    if(!passwordCheck) {
        result=false;
        $('#passwordError').html('Password is missing!');
    }
    else {
        $('#passwordError').html('');
    }

    if(passwordCheck != passwordConfirmCheck) {
        result=false;
        $('#passwordError2').html('The passwords do not match!');
    }
    else {
        $('#passwordError2').html('');
    }

    if(result == true) {
        $('#btn').removeAttr('disabled');
        $('#btn').css("cursor", "");
        alert('Everything ok, you may now press the submit button!');
    }
}
</script>

<div class="form">

    <div class="tab-content">
        <div id="signup">
            <form>
                <div class="field-wrap">
                    <span id="nameError" style="color: red !important;"></span><br />
                    <label>
                        Name<span class="req">*</span>
                    </label>
                    <input type="text" id="nameField" required autocomplete="off" onkeyup="validateInputs();" /><br />
                </div>


                <div class="field-wrap">
                    <span id="emailError" style="color: red !important;"></span><br />
                    <label>
                        Email Address<span class="req">*</span>
                    </label>
                    <input type="email" id="emailField" required autocomplete="off" onkeyup="validateInputs();" /><br />
                </div>
                <div class="field-wrap">
                    <span id="compDetailsError" style="color: red !important;"></span><br />
                    <label>
                       Company Details<span class="req">*</span>
                    </label>
                    <input type="text" id="compDetailsField" required autocomplete="off" onkeyup="validateInputs();" /><br />
                </div>
                <div class="field-wrap">
                    <span id="passwordError" style="color: red !important;"></span><br />
                    <label for="passwordv">
                        Set A Password<span class="req">*</span>
                    </label>
                    <input id="passwordvz" type="password" class="validate" required autocomplete="off" onkeyup="validateInputs();" /><br />
                </div>
                <div class="field-wrap" style="margin-bottom: 0px">
                    <span id="passwordError2" style="color: red !important;"></span><br />
                    <label id="lblPasswordvConfirm" for="passwordvConfirm" data-error="Password not match"
                        data-success="Password Match">
                        Confirm Password<span class="req">*</span>
                    </label>
                    <input id="passwordvConfirm" type="password" required autocomplete="off" onkeyup="validateInputs();" /><br />
                </div>

                <input type="submit" value="submit" id="btn" class="button button-block" style="margin-top:20px;cursor:not-allowed" disabled />

            </form>

        </div>

    </div><!-- tab-content -->

</div> <!-- /form -->

Снимки экрана процесса проверки:

Validation example one

Validation example two

Validation example three

Validation example four

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...