Ссылка на ссылку: Ссылка
Скачать 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) } },