Элементы формы — это распространенный способ сбора информации, которую ваш веб-сайт требует от пользователей. Обычно они состоят из элементов ввода, флажков, переключателей и кнопки, с помощью которой пользователи могут отправить введенную информацию. Однако стандартные элементы «ввода» позволяют пользователям вводить все, что они хотят, и если вы хотите стандартизировать введенную ими информацию, разработчики должны реализовать эту функциональность.
Вот где появляется InputMask; Элемент управления Wijmo Vue InputMask позволяет разработчикам легко внедрять маски и предопределенные форматы для поля ввода. Это позволит вам ограничить количество символов, которые пользователи могут вводить в маске, символы приглашения, отображаемые в элементе управления, а также то, позволяет ли элемент управления пользователям вводить цифры, буквы или и то, и другое.
Если вы хотите скачать проект для себя, вы можете найти его здесь.
Создание формы Vue
Первое, что мы рассмотрим, — это создание формы Vue. Откройте файл App.vue и добавьте следующую разметку для формы в HTML-шаблон:
<div class="form-control">
<div class="form-header">
<span>User Information</span>
</div>
<form class="form-body" v-on:submit="onSubmit">
<div class="form-footer">
<button class="form-button" type="submit">Submit</button>
</div>
</form>
</div>
Мы используем форму для агрегирования данных от пользователя и директиву Vue v-on:submit для обработки при отправке формы.
Еще одна вещь, которую мы сделаем в этом разделе, — добавим стили для формы. Внутри тегов ‹style› файла App.vue добавьте следующий CSS:
.form-control {
position: absolute;
width: 400px;
height: 300px;
z-index: 15;
top: 50%;
left: 50%;
margin: -150px 0 0 -200px;
border-radius: 15px;
box-shadow: 1px 0 5px -2px rgb(90, 90, 90);
text-align: center;
}
.form-header {
height: 50px;
width: 100%;
line-height: 50px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
background: rgb(100, 100, 252);
font-weight: bold;
font-size: larger;
color: white;
}
.form-body {
height: 100%;
position: relative;
}
.form-footer {
position: absolute;
bottom: 75px;
right: 2px;
height: 50px;
width: 100%
}
.form-button {
float: right;
margin-top: 10px;
margin-right: 10px;
height: 40px;
width: 100px;
border-radius: 10px;
border: 1px solid black;
background: rgb(100, 100, 252);
color: white;
font-size: 16px;
}
.form-button:hover {
cursor: pointer;
background: rgb(140, 140, 255);
}
CSS, который мы только что написали, будет центрировать форму на странице, а также стилизовать элементы заголовка, нижнего колонтитула и кнопки. Теперь, если вы запустите приложение, вы должны увидеть следующее:
Реализация Wijmo Vue InputMask
Теперь, когда форма создана, пришло время добавить наши маски ввода. Чтобы использовать Wijmo, нам нужно добавить библиотеку в наш проект. Откройте командную строку, перейдите туда, где хранится ваш проект, и выполните следующее:
npm i @grapecity/wijmo.vue2.allПосле того, как NPM установит все файлы, откройте файл App.vue и импортируйте следующие файлы внутри тегов ‹script›:
import '@grapecity/wijmo.styles/themes/wijmo.theme.material.css'; import * as wjcCore from '@grapecity/wijmo'; import * as wjcInput from '@grapecity/wijmo.vue2.input';
При этом загружаются стили CSS Wijmo, а также ядро Wijmo и входной модуль Vue.
Нам также нужно сообщить Vue о компоненте, который мы будем использовать, и разметке, используемой для отображения компонента:
export default {
name: 'App',
components: {
'wj-input-mask': wjcInput.WjInputMask
}
}
Когда все это сделано, теперь мы можем использовать Vue InputMask от Wijmo. Вернитесь к ‹template› и добавьте следующую разметку внутри элемента ‹form›:
<div class="form-element"> <wj-input-mask ref="name" id="name" :placeholder="'Name'"></wj-input-mask> </div> <div class="form-element"> <wj-input-mask ref="email" id="email" :placeholder="'Email'"></wj-input-mask> </div> <div class="form-element"> <wj-input-mask ref="phone" id="phone" :placeholder="'Phone Number'"></wj-input-mask> </div> <div class="form-element"> <wj-input-mask ref="social" id="social" :placeholder="'Social Security Number'"></wj-input-mask> </div>
Здесь мы реализуем 4 маски ввода; один для имени, электронной почты, номера телефона и номера социального страхования. Мы также устанавливаем значение заполнителя для каждой из масок и привязываем их к ссылкам, чтобы мы могли получить доступ к этим элементам управления внутри наших тегов ‹script›.
Последнее, что нам нужно сделать, это добавить немного CSS для стилизации InputMasks:
.form-element {
text-align: center;
margin-top: 15px;
width: 100%;
}
Теперь, если вы запустите приложение, вы должны увидеть следующее:
Определение маски и символов подсказки
Теперь, когда мы реализовали InputMasks, мы рассмотрим, как установить маску и символы приглашения для элементов управления. В этом примере мы хотим определить маску и символы подсказки для ввода номера телефона и номера социального страхования. Мы собираемся изменить разметку для обеих этих InputMask:
<wj-input-mask ref="phone" id="phone" :mask="'000-000-0000'" :placeholder="'Phone Number'" :isRequired="false" :promptChar="'#'" :value="''"></wj-input-mask> <wj-input-mask ref="social" id="social" :mask="'000-00-0000'" :placeholder="'Social Security Number'" :isRequired="false" :promptChar="'*'" :value="''"></wj-input-mask>
Используя числовые символы в свойстве mask , мы сообщаем InputMask, что мы хотим принимать числа только при вводе в элементе управления, и сколько символов мы требуем от пользователя для ввода. Установка свойства prompChar сообщает элементу управления, какой символ мы хотим отображать для значений, для которых нам все еще требуется ввод.
И, наконец, установка свойств isRequired и value позволит нашему заполнителю продолжать отображаться вместо того, чтобы по умолчанию отображать символы приглашения. Теперь, если мы запустим приложение и начнем вводить телефонную или социальную маску ввода, мы должны увидеть следующее:
Как вы можете видеть, когда мы вводим любую из этих масок ввода, он отображает символ подсказки для оставшихся символов, которые ожидает элемент управления.
Проверка информации пользователя
Последнее, что мы обсудим в этой статье, — это то, как мы можем проверить информацию пользователя. В случае с этой формой мы хотим, чтобы они вводили информацию в маски ввода «Имя» и «Электронная почта», и мы хотим убедиться, что маски ввода «Номер телефона» и «Номер социального страхования» были заполнены.
Сначала мы позаботимся о том, чтобы пользователи знали, что последние две маски ввода должны быть полностью заполнены. Для этого мы будем использовать событие Wijmo Vue InputMask valueChanged. Внутри разметки добавьте событие в элемент управления:
<wj-input-mask ref="phone" id="phone" :mask="'000-000-0000'" :placeholder="'Phone Number'" :isRequired="false" :promptChar="'#'" :value="''" :valueChanged="validateMask"></wj-input-mask> <wj-input-mask ref="social" id="social" :mask="'000-00-0000'" :placeholder="'Social Security Number'" :isRequired="false" :promptChar="'*'" :value="''" :valueChanged="validateMask"></wj-input-mask>
Теперь внутри компонента реализуем следующий метод:
methods: {
validateMask: function(ctrl) {
wjcCore.toggleClasee(ctrl.hostElement, 'state-invalid', !ctrl.maskFull);
}
}
Этот метод проверяет, возвращает ли свойство maskFull объекта InputMask значение true; maskFull — логическое значение, которое возвращает true, если пользователь ввел необходимое количество символов по маске, и false, если нет. Если он не возвращает true, мы добавляем к элементу управления класс CSS с именем state-invalid.
Мы добавим этот класс CSS в тег ‹script›:
.state-invalid {
color: red;
}
Теперь, когда мы вводим входные маски «Номер телефона» или «Номер социального страхования», мы увидим следующее:
Как видите, если маска не заполнена полностью, текст будет красным.
Далее мы добавим метод, чтобы проверить, заполнил ли пользователь все входные маски, а также обновить метод onSubmit(), чтобы определить, следует ли отправлять форму:
methods: {
validateMask: function(ctrl) {
wjcCore.toggleClasee(ctrl.hostElement, 'state-invalid', !ctrl.maskFull);
}
isFormComplete: function() {
if(this.$refs.name.control.value !== '' && this.$refs.email.control.value !== '' && this.$refs.phone.control.maskFull && this.$refs.social.control.maskFull) {
return true;
}
return false;
}
onSubmit: function() {
if(this.isFormComplete()) {
// Display user info on form submission
alert('User Information:\nName: ' + this.$refs.name.control.value +
'\nEmail: ' + this.$refs.email.control.value + '\nPhone Number: ' + this.$refs.phone.control.value +
'\nSSN: ' + this.$refs.social.control.value);
}
}
}
Теперь, если мы запустим приложение и правильно заполним все InputMasks, мы увидим следующее предупреждение:
Заключение
Как видите, вы можете легко создавать формы с помощью элемента управления Wijmo Vue InputMask. Если вам нужна дополнительная информация, у нас есть демонстрации, документация и справочные материалы по API для разработчиков.
Если вы хотите скачать готовое приложение, вы можете найти его здесь.
Удачного кодирования!
Первоначально опубликовано на https://www.grapecity.com 29 июля 2022 г.
