Слияние кода завершено, страница обновится автоматически
avalidate-v2.0.0.js: плагин для перемещения форм проверки.
Автор: 百小僧
avalidate-v2.0.0.js — это плагин для проверки форм, написанный на чистом JavaScript. Он не зависит от каких-либо сторонних фреймворков и может быть использован непосредственно на веб-странице. Плагин обладает кроссплатформенностью, компактностью, высокой расширяемостью и является полностью открытым исходным кодом! С помощью короткого кода или даже без него вы можете реализовать полную проверку формы. Кроме того, плагин включает в себя множество встроенных библиотек проверки, что значительно ускоряет разработку.
Первая версия avalidate.js была написана автором за более чем три часа. Возможно, в процессе использования могут возникнуть упущенные моменты или непредвиденные ошибки, поэтому автор просит своевременно сообщать об этом и обещает исправить все ошибки.
Пользовательские атрибуты тегов:
Встроенные правила проверки:
cname: обязательно для заполнения, не может быть пустым и должен быть китайским именем. Пример: data-rule="cname".
ename: обязательно для заполнения, не может быть пустым и должно быть английским именем. Пример: data-rule="ename".pn: обязательно для заполнения, не может быть пустым и должно быть положительным числом. Пример: data-rule="pn".upn: обязательно для заполнения, не может быть пустым и должно быть отрицательным числом. Пример: data-rule="upn".Недостаточно?
Если вышеперечисленное не соответствует вашим потребностям, не беспокойтесь, data-rule также поддерживает универсальные регулярные выражения, такие как:
/\w{3,6}/i означает от 3 до 6 символов./^\d$/ допускает только одно число.Обратите внимание: если data-rule принимает регулярное выражение, оно должно быть заключено в / /.
Я хочу заменить регулярное выражение на стандартный идентификатор, можно? Конечно, можно!
ac.addRule({
// Поддержка проверки стационарных и мобильных телефонов
"tm": /(^[0-9]{3,4}\-[0-9]{3,8}$)|(^[0-9]{3,8}$)|(^\([0-9]{3,4}\)[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)/
});
Таким образом, вы можете использовать data-rule="tm" для проверки мобильных и стационарных телефонов.
availdate.js публичные методыvar v=ac.form(params); Описание: все области, которые необходимо проверить, должны вызывать этот метод, который возвращает базовый прототип проверки Winu, который можно вызвать с помощью возвращаемого объекта для запуска проверки.Параметры:
area: область, которую необходимо проверить.btn: кнопка, которая запускает проверку, поддерживает метки, id и class, рекомендуется использовать id или class.startCheck: function () {}: функция, выполняемая перед началом проверки, обычно используется для анимации загрузки и отправки.singleSuccess: function (e, msg) {}: функция, вызываемая при успешной проверке одного элемента, e возвращает объект формы, а msg указывает сообщение подсказки.singleError: function (e, msg) { }: функция, вызываемая при неудачной проверке одного элемента, e возвращает объект формы, а msg указывает сообщение об ошибке.endSuccess: function (data) {}: функция, вызываемая после успешной проверки всех элементов, data — это объект JSON.Возвращаемый объект:
beginCheck: мы часто запускаем проверку с помощью кнопки, но вы также можете запустить проверку вручную с помощью v.beginCheck(), если вы хотите выполнить другую функцию после успешной проверки, вы можете сделать это с помощью b.beginCheck(function(data){}).ac.addRule(params); Описание: расширение стандартного идентификатора data-rule, после расширения вы можете напрямую использовать идентификатор для представления регулярного выражения.Параметры:
свойство: имя свойства определяет пользовательский идентификатор.значение: значение свойства должно быть регулярным выражением, а не строкой. data-rule внутренне находит соответствующее регулярное выражение для выполнения проверки на основе идентификатора.<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<!--引入插件-->
<script type="text/javascript" src="availdate-v1.0.1.js"></script>
</head>
<body>
<form id="frm">
<h3>Обязательное поле: data-rule="*"</h3>
Имя: <input type="text" data-rule="*" data-nullmsg="Имя не может быть пустым" data-errmsg="Проверка не удалась" data-sucmsg="" />
<h3>Указание количества символов: data-rule="*3-5", допускается ввод только от 3 до 5 символов</h3>
Имя2: <input type="text" data-rule="*3-5" data-nullmsg="Имя2 не может быть пустым" data-errmsg="В имени2 может быть только от 3 до 5 символов" data-sucmsg="Проверка прошла успешно" />
<h3>Проверка положительного целого числа: data-rule="n"</h3>
Возраст: <input type="text" data-rule="n" data-nullmsg="Возраст не может быть пустым" data-errmsg="Возраст должен быть целым положительным числом" data-sucmsg="Проверка пройдена успешно" />
<h3>Проверка положительного целого числа: data-rule="n3-6", допускается ввод от 3 до 6 цифр</h3>
Количество: <input type="text" data-rule="n3-6" data-nullmsg="Количество не может быть пустым" data-errmsg="Допускается ввод только 3–6 цифр" data-sucmsg="Проверка прошла успешно" />
<h3>Разрешается вводить только строку, без специальных символов: data-rule="s"</h3>
Псевдоним: <input type="text" data-rule="s" data-nullmsg="Псевдоним не может быть пустым" data-errmsg="Псевдоним содержит специальные символы" data-sucmsg="Проверка прошла успешно" />
<h3>Разрешено вводить только строку без специальных символов, от 3 до 6 символов:</h3>
Псевдоним2: <input type="text" data-rule="s3-6" data-nullmsg="Псевдоним2 не может быть пустым" data-errmsg="Псевдоним2 должен содержать только цифры или буквы, и его длина должна составлять от 3 до 6 символов" data-sucmsg="Проверка прошла успешно" />
<h3>Проверка почтового индекса: data-rule="p"</h3>
Почтовый индекс: <input type="text" data-rule="p" data-nullmsg="Почтовый индекс не может быть пустым" data-errmsg="Вы ввели неправильный почтовый индекс" data-sucmsg="Проверка прошла успешно" />
<h3>Проверка номера мобильного телефона: data-rule="m"</h3>
Номер мобильного телефона: <input type="text" data-rule="m" data-nullmsg="Номер мобильного телефона не может быть пустым" data-errmsg="Вы ввели номер, который не является номером мобильного телефона" data-sucmsg="Проверка прошла успешно" />
<h3>Проверка адреса электронной почты: data-rule="e"</h3>
Адрес электронной почты: <input type="text" data-rule="e" data-nullmsg="Адрес электронной почты не может быть пустым" data-errmsg="Вы ввели адрес, который не является адресом электронной почты" data-sucmsg="Проверка прошла успешно" />
<h3>Проверка, является ли это URL-адресом: data-rule="url"</h3>
URL: <input type="text" data-rule="url" data-nullmsg="URL не может быть пустым" data-errmsg="Вы ввели URL, который не является действительным" data-sucmsg="Проверка прошла успешно" />
<h3>Проверка формата даты: data-rule="date", поддерживает различные форматы дат</h3>
Дата рождения: <input type="text" data-rule="date" data-nullmsg="Дата рождения не может быть пустой" data-errmsg="Ваша дата имеет неправильный формат" data-sucmsg="Проверка прошла успешно" />
<h3>Проверка на китайский язык: data-rule="zh"</h3>
Китайское имя: <input type="text" data-rule="zh" data-nullmsg="Китайское имя не может быть пустым" data-errmsg="Ваш ввод не полностью на китайском языке" data-sucmsg="Проверка прошла успешно" />
<h3>Проверка китайского языка: data-rule="/^[\u4e00-\u9fa5]{3,6}$/", допускается ввод от 3 до 6 китайских символов, <font style="color:#f00">поддерживает универсальные регулярные выражения</font></h3>
Китайское имя: <input type="text" data-rule="/^[\u4e00-\u9fa5]{3,6}$/" data-nullmsg="Китайское имя не может быть пустым" data-errmsg="Допустимо только от 3 до 6 китайских иероглифов" data-sucmsg="Проверка прошла успешно" /> **Проверка формата денег: data-rule="money"**
Ваша зарплата:
<input type="text" data-rule="money" data-nullmsg="Зарплата не может быть пустой" data-errmsg="Введённый вами формат не является денежным" data-sucmsg="Проверка прошла успешно" />
**Проверка типа значения: data-rule="num", поддерживает десятичные дроби и целые числа**
Ваш рост:
<input type="text" data-rule="num" data-nullmsg="Рост не может быть пустым" data-errmsg="Введённое вами значение не является числовым типом" data-sucmsg="Проверка пройдена успешно" />
**Ваш пол: data-rule="*"**
Пол:
<input type="radio" name="gender" data-rule="*" data-nullmsg="Необходимо выбрать пол" data-sucmsg="Проверка успешна" value="мужской" /> мужской
<input type="radio" name="gender" data-rule="*" data-nullmsg="Необходимо выбрать пол" data-sucmsg="Проверка успешна" value="женский" /> женский
**Ваши интересы и хобби: data-rule="*"**
Пол:
<input type="checkbox" name="like" data-rule="*" data-nullmsg="Выберите хотя бы один вариант" data-sucmsg="Проверка успешна" value="баскетбол" /> баскетбол
<input type="checkbox" name="like" data-rule="*" data-nullmsg="Выберите хотя бы один вариант" data-sucmsg="Проверка успешна" value="футбол" /> футбол
<input type="checkbox" name="like" data-rule="*" data-nullmsg="Выберите хотя бы один вариант" data-sucmsg="Проверка успешна" value="волейбол" /> волейбол
**Вы мачо? data-rule="*"**
Мачо?:
<select data-rule="*">
<option value="">Выберите</option>
<option value="да">да</option>
<option value="нет">нет</option>
</select>
<br />
<br />
<input type="button" id="btn" value="Отправить" /> **4. В таблице при проверке всех данных выполняется пользовательская функция. Основная задача — написать метод endSuccess.**
В случае успешной проверки всех данных в форме, выполняется пользовательская функция, которая выводит сообщение об успешном завершении проверки. Это реализуется с помощью метода endSuccess, который принимает данные о проверке и выводит соответствующее сообщение.
**5. Создание пользовательского правила data-rule для проверки телефона или стационарного телефона.**
Создаётся пользовательское правило data-rule с именем «tm», которое проверяет соответствие ввода формату номера телефона. Правило добавляется с помощью функции ac.addRule. Затем выполняется проверка поля формы с использованием этого правила. Если ввод соответствует формату, то проверка считается успешной.
*Примечание: В запросе не удалось найти информацию о пункте 3.*
<br />
<br />
<input type="button" id="btn" value="提交">
</form>
<script type="text/javascript">
// 对，就这么简单就初始化了。
ac.form({
area: "#frm", // 验证区域，支持标签，id，class，推荐使用id或者class
btn: "#btn", // 触发验证的按钮或者元素，支持标签，id，class，推荐使用id或者class
startCheck: function() {
// 自定义验证之前执行函数
alert("开始验证啦！一般用于加载！");
},
singleError: function(e, msg) {
// 自定义弹窗格式###############
alert(
"我是自定义弹窗格式：错误消息：" + msg
);
},
singleSuccess: function(e, msg) {
// 验证单个成功之后提示信息
alert("我自己通过验证了！别人我不知道！");
},
endSuccess: function(data) {
alert("全部验证成功啦！！！！！！" + JSON.stringify(data));
}
});
</script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<meta charset="utf-8">
<!-- 引入插件 -->
<script type="text/javascript" src="availdate-v1.0.1.js"></script>
</head>
<body>
<form id="frm">
<h3>手机或者固话：data-rule="tm" 我是自定义验证规则标识的，本来没有tm的标识，tm标识固话或者手机</h3>
手机或者固话：
<input
type="text"
data-rule="tm"
data-nullmsg="手机或固话不能为空"
data-errmsg="你输入的不是一个手机或者固话"
data-sucmsg=""
/>
<br /><br />
<input type="button" id="btn" value="提交">
</form>
<script type="text/javascript">
// 自定义标识规则
ac.addRule({
"tm": /((15)\d{9})|((13)\d{9})|((18)\d{9})|(0[1-9]{2,3}\-?[1-9]{6,7})/i
});
// 对，就这么简单就初始化了。
ac.form({
area: "#frm", // 验证区域，支持标签，id，class，推荐使用id或者class
btn: "#btn",
endSuccess: function(data) {
alert("全部验证成功啦！！！！！！" + JSON.stringify(data));
}
});
</script>
</body>
</html>
``` **2. Если не заполнять, то игнорировать проверку, а если заполнить — выполнять проверку. В основном используется атрибут data-haved="true".**
```html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<meta charset="utf-8">
<!-- 引入插件 -->
<script type="text/javascript" src="availdate-v1.0.1.js"></script>
</head>
<body>
<form id="frm">
<h3>Необходимо ввести от 3 до 6 символов: data-rule="*3-6". После добавления data-haved="true" проверка на пустоту пропускается, и проверка выполняется только при вводе значения.</h3>
Имя: <input type="text" data-rule="*3-6" data-nullmsg="Имя не может быть пустым" data-errmsg="Должно быть от 3 до 6 символов" data-sucmsg="" data-haved="true">
<br />
<br />
<input type="button" id="btn" value="Отправить">
</form>
<script type="text/javascript">
// 对, всё так просто инициализируется.
ac.form({
area: "#frm", // Область проверки, поддерживает теги, id, class, рекомендуется использовать id или class
btn: "#btn",
endSuccess: function (data) {
alert("Все проверки прошли успешно! " + JSON.stringify(data));
}
});
</script>
</body>
</html>
Больше примеров вы можете найти самостоятельно!
Исходный код availdate.js доступен по адресу Github.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )