RENOTES

Обзор содержит несколько примеров валидации вводимых пользовательских данных средствами jQuery.

Валидация email:

var emailRegex = '^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$'; 

Валидация логина:

var usernameRegex = '/^[a-z0-9_-]{3,16}$/';

Валидация пароля:

var passwordRegex = '/^[a-z0-9_-]{6,18}$/';

Только целые числа

var intRegex = /[0-9 -()+]+$/;

Маска IP-адреса

var ipRegex = 'bd{1,3}.d{1,3}.d{1,3}.d{1,3}b';

Число в диапазоне 0-255

var num0to255Regex = '^([01][0-9][0-9]|2[0-4][0-9]|25[0-5])$';

Число в диапазоне 0-999

var num0to999Regex = '^([0-9]|[1-9][0-9]|[1-9][0-9][0-9])$';

Целые и десятичные

var floatRegex = '[-+]?([0-9]*.[0-9]+|[0-9]+)';

Любое число от 1 до 50 включительно

var number1to50Regex = /(^[1-9]{1}$|^[1-4]{1}[0-9]{1}$|^50$)/gm;

Помимо манипуляций с выбранными элементами, jQuery позволяет работать с самим набором элементов: изменять его, а так же работать с элементами по отдельности.

Функция jQuery.getScript загружает и исполняет js-файл, используя метод GET.

Пример кода:

$.getScript("http://url.ru/script.js", function() {
  // здесь ваш код
});

Метод jQuery.closest возвращает первый parent от выбранного элемента.

В примере выбран тег span. Найдя список ul, closest ему присваивает цвет текста red.

$(document).ready(function(){
  $("span").closest("ul").css({"color":"red"});
});

Изменяем значение (value) checkbox с 0 на 1.

HTML:

<input type="checkbox" value="1" id="check" checked="checked" /> 
<input type="hidden" value="1" id="publish" name="publish" />

jQuery:

$('#check').on('change', function(){
	$('#publish').val(this.checked ? 1 : 0);
});

Данный пример будет полезен для последовательного заполнения данных пользователем без перезагрузки страницы. Удобно применять при пошаговом тестировании, либо при заполнении большого количества полей, разделив на несколько частей, дабы не спугнуть пользователя.

Использование jQuery UI Slider значительно упрощает заполнение и восприятие пользовательских форм производящих какие-либо расчеты, т.к. удобнее передвинуть ползунок на нужную позицию, чем заполнять поля x=2333, y=3444, z=4555 и т.д.

В сети довольно много статей по этой теме, но нигде нет 100% рабочего скрипта, к примеру, если он и работает на добавление элементов, то в нем нет ограничения на вставку элементов, а это довольно часто необходимо скажем при динамическом добавлении полей для прикрепления файлов к сообщению. Другая часть подобных скриптов не поддерживает всеми любимый Internet Explorer, в общем, я решил написать свой скрипт, в нем реализована поддержка всех браузеров, а также есть ограничение на добавление элементов.

Тема округления углов сейчас довольно актуальна в сфере вэб-разработок. В действительности, округленные изображения будут смотреться симпатичнее прямоугольных в "вэбдванольных" проектах. Примеры: twitter.com minus.com. Много других можно включить в этот список.