Слияние кода завершено, страница обновится автоматически
eg-validation
eg表单数据校验
<!DOCTYPE html>
<html>
<head>
<title>Validation Form Template</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery-1.11.3.min.js"></script>
<script src="eg-validation.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class='well'>
<form class="form-horizontal" id="form" action="###">
<div >QQ:<input type="text" id="email" eg-valid="true" name="email" eg-tips="请输入QQ号" eg-qq eg-success="校验通过" > </div>
<div >邮箱<input type="text" eg-valid eg-email="正确的邮箱" eg-tips="请输入邮箱" eg-required eg-position="bottom"></div>
<button type="submit" class="btn">登录</button>
</form>
</div>
<script type="text/javascript" charset="utf-8">
$(function () {
$('#form').validation();
})
</script>
</body>
</html>
| Свойство | Описание |
|---|---|
| eg-valid | Определяет, включена ли проверка. Значение по умолчанию: true. |
| eg-tips | Текст подсказки, который отображается после того, как текстовое поле получает фокус. |
| eg-position | Определяет положение, в котором отображаются результаты проверки: top, right, bottom, left. Значение по умолчанию: right. |
| eg-inline | Указывает узел, на котором будут отображаться результаты всех проверок текстового поля. |
| eg-{проверка правила} | Включает соответствующее правило проверки. Значение представляет собой текст подсказки для проверки. |
| eg-{правило проверки}-param | Параметр правила проверки, необязательный. Зависит от параметров правила проверки. Несколько значений разделяются запятой (","). |
| eg-{правило проверки}-inline | Определяет узел, на котором будет отображаться результат проверки текстового поля по соответствующему правилу проверки. |
| eg-success | Текст сообщения, которое отображается после успешной проверки текстового поля. Значение по умолчанию: «Проверка пройдена». |
| Правило | Описание |
|---|---|
| required | Поле должно быть заполнено. |
| number | Поле должно содержать допустимое число (отрицательное число, десятичное число). |
| digits | Поле должно содержать целое число. |
| decimal | Поле должно содержать денежную сумму. |
| date | Поле должно содержать правильную дату. Проверка даты может не работать в IE6, используйте с осторожностью. |
| url | Поле должно содержать правильный URL. |
| Поле должно содержать корректный адрес электронной почты. | |
| char | Поле должно содержать английские символы. |
| Поле должно содержать действительный номер QQ. | |
| phone | Поле должно содержать действительный телефонный номер. |
| equalto | Поле должно содержать два одинаковых символа, соответствующих уникальному идентификатору текстовой области: eg-equalto-param=#password. |
| chinese | Поле должно содержать китайские иероглифы. |
| minlength | Длина ввода должна быть не менее 3 символов: eg-minlength-param=3. |
| maxlength | Максимальная длина ввода составляет 6 символов: eg-maxlength-param=6. |
| length | Длина ввода должна находиться в диапазоне от 3 до 6 символов (китайские иероглифы считаются одним символом): eg-length-param=3,6. |
| min | Введённое значение не должно быть меньше 3: eg-min-param=3. |
| max | Введённое значение не должно превышать 6: eg-max-param=6. |
| pattern | Ввод должен соответствовать заданному регулярному выражению: eg-pattern-param=/^\d+$/. |
| Опция | Описание |
|---|---|
| rules | Объект, содержащий набор правил проверки. |
| isSubmit | Логическое значение, определяющее, будет ли форма отправлена после прохождения проверки. По умолчанию: true — отправка формы. |
| valiAfter | Метод, вызываемый после завершения проверки всех полей формы. |
| valiSuccess | Метод, вызываемый после успешного прохождения проверки всех полей и отправки формы. |
<!DOCTYPE html>
<html>
<head>
<title>Validation add rules Template</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery-1.11.3.min.js"></script>
<script src="eg-validation.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="form">
<div >zip:<input type="text" eg-valid="true" eg-zip eg-success="Проверка пройдена"> </div>
</div>
<script type="text/javascript" charset="utf-8">
$(function () {
//Здесь добавляется проверка почтового индекса
$('#form').validation({
rules :{'zip':{validate: function(value) {return (/^[1-9][0-9]{5}$/.test(value) || /^.{4,15}$/.test(value));}, defaultMsg: 'Пожалуйста, введите правильный почтовый индекс'}}
});
})
</script>
</body>
</html>
``` **Эффект изображения**
Изображение можно посмотреть по ссылке: https://github.com/egzosn/eg-validation/blob/master/20180929152810.png?raw=true
**Пример использования eg-inline**
```html
<!DOCTYPE html>
<html>
<head>
<title>Validation inline Form Template</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery-1.11.3.min.js"></script>
<script src="eg-validation.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="form">
<div >email1:<input type="text" eg-valid="true" eg-email="" eg-required eg-success="Проверка пройдена" eg-inline="#eg-inline"> </div>
<div >email2:<input type="text" eg-valid="true" eg-email eg-required eg-email-inline="#eg-email-inline"> </div>
</div>
email1 все сообщения проверки отображаются здесь: <div id="eg-inline"></div>
email2 сообщения о проверке формата электронной почты отображаются здесь: <div id="eg-email-inline"></div>
<br/>
<script type="text/javascript" charset="utf-8">
$(function () {
// Здесь добавляется проверка почтового индекса
$('#form').validation({
isSubmit: false
});
})
</script>
</body>
</html>
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )