Слияние кода завершено, страница обновится автоматически
TinyForm — это инструмент для работы с веб-формами на основе jQuery.
Он выполняет следующие функции:
Инструмент не изменяет существующую структуру и стиль DOM, а также не добавляет и не удаляет элементы. TinyForm создаёт экземпляр формы на основе переданного селектора или объекта DOM/jQuery и ищет поля с атрибутом name в указанной области. По умолчанию используется селектор input[name]:not(:button,:submit,:reset), select[name], textarea[name]. Можно настроить собственный селектор с помощью параметра TinyForm.defaults.selector. Однако следует учесть, что пользовательский селектор будет использоваться только как дополнение к стандартному, но не заменит его.
<form id="foo" method="post" action="/foo/bar">
<input type="text" name="name" value="hyjiacan" data-rule="required" />
<input type="text" name="age" value="16" />
</form>
<script>
var form = new TinyForm('#foo')
// Считываем все значения полей
var data = form.getData() // {name: 'hyjiacan', age: '16'}
// Получаем значение поля name
var name = form.getData('name') // 'hyjiacan'
// Записываем значения во все поля
form.setData({
name: 'Korra',
age: 21
})
// Устанавливаем значение поля name
form.setData('Korra', 'name')
// Проверяем ввод
var result = form.validate()
// Отправляем форму
form.submit()
</script>
dist — каталог сборки:
src — исходный код:
Файлы можно скачать, используя контекстное меню «Сохранить как».
Если вам нужны только функции получения значений полей и чтения и записи данных с возможностью асинхронной отправки, достаточно использовать файл tinyform.core.js (версия для разработки) или tinyform.core.min.js (минифицированная версия).
Для использования проверки данных подойдёт файл tinyform.common.js (версия для разработки) или tinyform.common.min.js (минифицированная версия).
Чтобы использовать функцию хранения данных, используйте файл tinyform.all.js (версия для разработки) или tinyform.all.min.js (минифицированная версия).
Клонировать репозиторий можно с помощью команды git:
$ git clone https://gitee.com/hyjiacan/TinyForm.git
TinyForm можно применять не только для форм, но и для других элементов. Инструмент будет считывать атрибуты method и action даже если они не относятся к форме. Это сделано для предотвращения случайного запуска отправки формы при нажатии кнопки внутри неё. rows="5" cols="40" data-rule="length: 20, 32" placeholder="字符数量需要在20-32之间"></textarea>
В тексте используются различные функции и методы, такие как: Также в коде используется функция beforeSubmit, которая позволяет изменять данные перед их отправкой через AJAX. Форма с полем для загрузки файла: функция обратного вызова при загрузке Функция обратного вызова, которая вызывается при загрузке файла в поле формы, может быть задана следующим образом: После выполнения этой команды все формы TinyForm будут автоматически проверяться после потери фокуса. Атрибуты тегов data-checkbox: атрибут используется для указания значений состояния «выбрано» и «не выбрано» для чекбокса. Значения разделяются символом | (вертикальная черта). Например: data-checkbox=1|0 или data-checkbox=выбрано|не выбрано. При установке на элемент формы атрибут действует аналогично опции option.checkbox при инициализации. Если атрибут установлен на поле, он применяется только к этому полю. Примечание: этот атрибут конфигурации имеет более высокий приоритет, чем код: поле > форма > опция. data-rule: атрибут содержит правило проверки поля ввода. Поддерживаются следующие значения (с учётом регистра): При указании нескольких правил проверки они разделяются символом |. Например: Обратите внимание, что использование символа | для разделения правил проверки эффективно только при указании имён правил. Нельзя смешивать имена правил и регулярные выражения, например: Это неправильный способ записи. Если необходимо проверить, совпадает ли значение поля с другим значением (например, для функции подтверждения пароля), можно использовать следующий синтаксис: Здесь правило &pswd ссылается на значение поля pswd. Таким образом, при проверке поля pswdconfirm будет автоматически сравниваться его значение со значением поля pswd. Для полей с одинаковым именем data-rule и data-msg берутся из первого поля. Можно изменить сообщение проверки, используя следующий код: Также атрибут data-msg поддерживает ссылки на label и placeholder. Например: В этом случае, если поле не заполнено, появится сообщение «Введите имя пользователя», а при вводе неправильного формата имени (согласно правилу format) появится сообщение «Формат введённого имени пользователя неверен». &l и &p могут встречаться несколько раз, и если они должны отображаться в сообщении, их следует записывать как &&l и &&p. Эти атрибуты игнорирования и исключения могут использоваться для создания подформ в основной форме. Свойства экземпляра Пример: Примеры параметров, которые можно изменить во время выполнения: — data: selector — динамически устанавливает селектор полей. После изменения необходимо вызвать метод refresh для обновления кеша.
— storage: container — изменяет контейнер хранения. Установка значения 0 останавливает автоматическое хранение данных.
— storage: time — устанавливает время автоматического хранения данных. Значение 0 отключает автоматическое хранение (до конца жизненного цикла экземпляра).
— storage: onstore — изменяет функцию обратного вызова автоматического хранилища.
— storage: name — изменяет имя элемента хранения. Не рекомендуется изменять это значение, так как это может привести к проблемам с чтением ранее сохранённых данных.
— validate: stop — изменяет поведение при первой неудачной проверке: останавливает проверку или продолжает её.
— validate: callback — изменяет функцию обратного вызова проверки полей. Методы экземпляра Все методы, кроме методов получения данных (включая проверку), возвращают экземпляр формы. data используется как данные по умолчанию. Если не передаются, используются данные текущего поля формы. return возвращает экземпляр формы. getChanges(returnField: boolean): object|Boolean Получает изменённые значения полей. returnField определяет, будет ли возвращено поле (по умолчанию false). Если передано true, возвращается набор изменённых полей. Если передано false, возвращается набор изменённых значений. Если есть изменения, return возвращает изменённые данные, иначе — false. reset(): Instance Сбрасывает значения формы (очищает все данные). submit(option: Object): Instance|Promise Асинхронно отправляет форму. Обратите внимание: начиная с версии 0.7, возвращаемое значение этой функции изменилось:
если beforeSubmit возвращает false, эта функция не отправляет форму, и в этом случае она возвращает undefined. Если форма отправлена, эта функция возвращает Promise объекта ajax, чтобы можно было использовать возвращаемые данные через form.submit().then(function(){}). getRule(fieldName: String): Object Возвращает правило проверки для указанного поля формы или все правила. При получении нескольких правил проверки структура следующая: validate(field: String|Array): Boolean|Object Проверяет форму на основе правил, указанных в атрибуте метки data-rule. store(fn: Function): Object Сохраняет данные формы. load(fill: Boolean, fn: Function): Object Загружает сохранённые данные формы и автоматически загружает их в форму. abandon(): Object Загружает данные формы из хранилища, а затем удаляет данные из хранилища. TinyForm также предоставляет некоторые функциональные возможности. Интерфейс для получения экземпляра формы в любом месте. Можно получить указанный экземпляр формы, не запоминая его, просто указав идентификатор формы. TinyForm.get(id) Параметр id — это идентификатор экземпляра формы, который можно найти в свойстве id экземпляра или в атрибуте data-tinyform тега формы.
Если указанный экземпляр не существует, возвращается undefined. Если параметр id не передан, возвращаются все экземпляры на странице. TinyForm поддерживает добавление пользовательских расширений функциональности экземпляров с помощью вызова функции TinyForm.extend. Обычно расширение используется следующим образом: После этого можно напрямую вызывать:
标签忽略的字段
配置忽людение的字段
var form = TinyForm('#f1', {
// 自定义 checkbox 选中(第0个元素)和未选中(第1个元素)状态的值，默认为 ['on', 'off']
checkbox: [1, 0],
// 在表单内查找字段时，要忽略的字段或字段集合
// 值可以为false、字符串或数组：
// boolean: 仅设置false有效，表示没有需要忽略的
// array: 要忽略的字段的name组成的数组
// 要注意的是：这里的优先级比标签上设置的优先级更低
// 也就是说，即使这里设置的是false，只在要标签上有属性 data-ignore
ignore: 'ignore-field-2',
validate: {
// 用于自定义html标签上写验证规则与提示消息的属性
attr:{
// 标签的验证规则属性名称
rule: 'data-rule',
// 标签的规则验证失败时的提示消息属性名称
msg: 'data-msg'
},
// 是否在输入字段失去焦点时自动验证，默认为false
auto: true,
// 是否在第一次验证失败时停止验证，默认为true
stop: false,
// 每个字段验证后的回调函数
callback: function(e) {
//正在验证的字段的jQuery对象
console.log('字段:' + e.field.attr('name'));
//此字段的值
console.log('值:' + e.value);
//表单验证是否通过
console.log('结果:' + e.pass);
// 验证的提示消息，无论验证是否通过都有
console.log('消息:' + e.msg);
// 可以通过 return来改变验证的结果，若不想改变原验证结果，可以不返回任何值
},
// 这个表单实例附加的验证规则
rules: {
// 小写规则
lower: {
rule: /^[a-z]+$/,
msg: '请输入小写字母'
},
// 大写规则
upper: {
// @param value 字段的值
// @param name 字段的name属性
rule: function(value, name){
if(value===''){
// 输入为空 返回true表示验证通过
return true;
}
**if(/^[A-Z]+$/.test(value)){**
**// 是大写的，返回true表示验证通过**
**return true;**
**}**
**// 验证失败，返回提示消息**
**return '请输入大写字母';**
**// 或者，此时使用data-msg或下面的msg属性**
**// return false;**
**},**
**msg: '只接收大写字母输入'**
**}**
**// 当然，还可以加上更多**
**}**
**},**
**storage: {**
**// 存储的唯一名称，如果不指定，会使用表单的name值或id值，否则自动计算一个唯一名称**
**name: 'xxx',**
**// 数据存储的容器，根据应用场景可以设置为 localStorage或sessionStorage**
**container: localStorage,**
**// 是否在实例化的时候加载存储的数据，默认为false**
**load: false,**
**// // 自动保存表单数据到存储的间隔(毫秒)，不设置或设置0表示不自动保存**
**time: 0,**
**// 自动保存数据后的回调函数**
**// this 是表单实例**
**onstore: function(data) {**
**console.log('表单数据已经自动保存');**
**}**
**},**
**// 调用ajax前的数据处理**
**beforeSubmit: function(ajaxOption) {**
**var data = ajaxOption.data || {};**
**data.addition = 'xxxxxxxxxxxxxx';**
**if(data.gender) {**
**if(data.gender == '0') {**
**data.gender = '男的';**
**} else {**
**data.gender = '女的';**
**}**
**}**
**}**
**});**
*Данный текст представляет собой фрагмент программного кода на языке JavaScript. В нём описывается создание экземпляра объекта TinyForm и настройка его параметров.*
// Установка всех форм на потерю фокуса для автоматической проверки
TinyForm.defaults.validate.auto = true;
// Добавление правила проверки с именем xxx
TinyForm.defaults.validate.rules.xxx = {
rule: /xxx/,
msg: 'Требуется xxx'
};
<input type="text" name="username" data-rule="required|number" data-msg="Укажите ваше имя|Только цифры" placeholder="Не может быть пустым" />
<input type="text" name="username" data-rule="regex: ^xxx$|number" data-msg="Введите ваше имя|Только цифры" placeholder="Не может быть пустым" />
<input type="password" name="pswd" data-rule="required|password" />
<input type="password" name="pswdconfirm" data-rule="required|&pswd" />
var form = $('#form', {
validate:{
required: {
msg: 'Пожалуйста, заполните обязательные поля'
}
}
})
<label for="username">Имя пользователя</label>
<input name="username" data-rule="required|format" data-msg="&p|Формат введённого имени &l неверен" placeholder="Введите имя пользователя" />
<input type="text" name="ignore-field" data-ignore />
<div data-exclude>
<input type="text" name="ignore-field" />
</div>
// Поиск кнопки в форме
form.context.find('input[type=button]');
var option = {
url: 'String', // Используется атрибут action формы. Если его нет, используется "post"
type: 'String', // Используется атрибут method формы, если его нет — "post".
data: 'Object' // Используются данные формы, полученные с помощью getData(). Они добавляются к параметрам.
}
tinyform.common
var rule = {
rule: /^.+$/, // Здесь может быть регулярное выражение или функция
msg: 'Нельзя оставлять пустым' // Сообщение об ошибке, заданное через атрибут *data-msg* метки.
}
var rules = {
username:{
rule: /^.+$/, // Обязательное поле
msg: 'Нельзя оставлять пустым' // Сообщение об ошибке, заданное через атрибут *data-msg* метки.
},
gender: {
rule: false, // Нет правила проверки
msg: ''
}
}
var result = {
имя пользователя: false,
пол: true
}
tinyform.all
Статические функции
Получение экземпляра
Расширение функциональности экземпляра
(function($, TinyForm){
TinyForm.extend({
setup: function(){
// Здесь код инициализации.
},
refresh:function(){
// Здесь код обновления формы, включая обновление кэшированных данных.
},
method2:function(){
// Расширение метода method2.
},
methodn:function(){
// Расширение метода methodn.
}
});
})(jQuery, TinyForm);
form.method2();
form.methodn();
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )