2

Сейчас вот так сделал

<html>
<head>
<script type="text/javascript" src="http://s89.ucoz.net/src/jquery-1.7.2.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script>
<script type="text/javascript" src="myscripts.js"></script>
<script src="jquery.inputmask.js" type="text/javascript"></script>
<script src="jquery.inputmask.extensions.js" type="text/javascript"></script>
<script src="jquery.inputmask.date.extensions.js" type="text/javascript"></script>
<script src="jquery.inputmask.numeric.extensions.js" type="text/javascript"></script>
<script src="jquery.inputmask.custom.extensions.js" type="text/javascript"></script>
</head>
<body><br><Br><Br><br><Br><Br>
<center>
<form id="loginform" action="" method="post">
Ваш логин:

<input type="text" name="login" />

Ваш пароль:

<input type="text" name="pswd" id="phone"/>

<input type="submit" name="enter" value="Войти" /></form>
</center>

<script>
$("#phone").inputmask("(999) 999-99-99");
</script>
    </body>
    </html>

Содержимое myscripts.js

$(document).ready(function(){

    $("#loginform").validate({

       rules:{

            login:{
                required: true,
                minlength: 2,
                maxlength: 16,
            },

            pswd:{
                required: true,
                minlength: 10,
                maxlength: 10,
            },
       },

       messages:{

            login:{
                required: "Это поле обязательно для заполнения",
                minlength: "Имя должно быть минимум из 2 символов",
                maxlength: "Максимальное число символо - 16",
            },

            pswd:{
                required: "Это поле обязательно для заполнения",
                minlength: "Телефон должен состоять из 10 цифр",
                maxlength: "Телефон должен состоять из 10 цифр",
            },

       }

    });

}); //end of ready
1
  • 1
    @malcov, ХэшКод это не фриланс биржа. Перефразируйте ваш вопрос, уточните, что сделали сами, что не получилось.
    – Deonis
    22 янв 2015 в 23:06

1 ответ 1

3

Уважаемый @malcov, не надо изобретать велосипеды! За Вас уже все придумали, берите и используйте готовые библиотеки.

Для реализации пунктов 1-3 используйте jQuery Validation Plugin.

Вот вам две ссылки по его примнению:

  1. http://2develop.ru/jquery/proverka-poley-s-pomoshtyyu-jquery.html
  2. http://habrahabr.ru/post/180279/

P.S. Добавьте эти ссылки в закладки.

Для 4-го пункта используйте jQuery Masked Input.

С помощью параметра clearIncomplete мы можем указать, что необходимо очищать/НЕ очищать поле, если пользователь заполнил маску не до конца.

В вашем случае очищать поле не нужно, значит код будет таким:

$("#input").inputmask("d.m.y", { "clearIncomplete": false });

Ссылки по этой теме:

  1. http://www.compnot.ru/javascript/input-mask-sozdaem-masku-vvoda-na-jquery.html
  2. http://cyberapp.ru/2011/07/06/jquery-maskedinput/
3
  • Все отлично, единственное но - конфликтуют скрипты. Поставил условие - что если поле телефон меньше 10 символов - выдавать сообщение. А он не выдает. Так как маска добавляет свои символы, как быть?
    – malcov
    25 янв 2015 в 11:10
  • Может кто помочь?
    – malcov
    25 янв 2015 в 19:15
  • Использую описанные скрипты вместе, и никогда конфликтов не было. Скорей всего, Вы неправильно что-то делаете. Это надо уже код смотреть 26 янв 2015 в 5:59

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.