Ссылка на ссылку: Ссылка

Скачать Js и Css : Скачать | Демо

Предварительный просмотр:

Описание :

Простой в использовании, но полностью настраиваемый валидатор полей формы, созданный с использованием собственного JavaScript без сторонних библиотек JavaScript.

Предопределенные правила проверки:

  • обязательный
  • ненулевой
  • целое число
  • плавать
  • мин
  • Максимум
  • между
  • название
  • фамилия
  • Телефон
  • электронное письмо
  • длина
  • максимальная длина
  • минимальная длина
  • максимальный размер файла
  • расширение файла

Как это использовать :

Импортируйте основной файл JavaScript js-form-validator.min.js и файл CSS forms.css в свой html-файл.

‹link href="css/forms.css" rel="stylesheet"›
‹script src="js/js-form-validator.min.js"›‹/script›

Примените правила проверки к целевым полям формы, используя data-rule attributes. Вы можете применить несколько правил к одному и тому же полю, разделив правила знаком «|».

<form action="#" id="form">
     <br> Emp code : <br> 
     <input type="text" name="emp_code" id="emp_code" data-rule="emp_code|required"> 
     <br> 
     <br> Emp Name : <br> 
     <input type="text" name="emp_name" id="emp_name" data-rule="emp_name|required"> 
     <br>
     <br> Custom : <br> 
     <input type="text" name="custom" id="custom" data-rule="code_factory|required"> 
     <br> 
     <br> <input type="Submit">
</form>

Инициализировать библиотеку и готово.

new Validator(document.querySelector('#form'), function(err, res) {
     return res;
}

Добавьте свои собственные правила проверки и сообщения об ошибках:

new Validator(document.querySelector('#form'), function(err, res) {
     return res;
}, options = {
     rules : {
          code_factory : function(value) {
               return (value.trim().toLowerCase() === 'codefactory');
          }
     },
     messages : {
          en : {
               code_factory : {
                    incorrect : 'Error ;-)'
               }
          }
     }
});

OR

Добавьте ниже код в js js-form-validator.min.js.

messages: {
     en: {
          emp_code: {
               empty: "Please, enter Employee Code",
               incorrect: "Only digits allow"
          },
          emp_name: {
               empty: "Please, enter Employee Name",
               incorrect: "Only alphabets allow"
          }
     }
},
rules: {
     emp_code: function(a) {
          return (new RegExp(/^[1-9]{1,}[0-9]{0,}$/g)).test(a)
     },
     emp_name: function(a) {
          return (new RegExp(/^[A-Za-z]{0,}$/g)).test(a)
     }
},