Всем привет,
Сегодня я хочу рассказать, как мы можем проверять вводимые данные с помощью числа с плавающей запятой в зависимости от языкового стандарта пользователя. (не установлен на английский или немецкий).
Если вы знаете sapui5, возможно, вы уже посещали эту ссылку API для ввода (наиболее распространенный элемент управления вводом, используемый в sapui5):
На основе API, предоставляемого SAPUI5, мы можем предложить следующие методы проверки:
- Установите тип ввода как String; напишите свой собственный метод проверки: простой для понимания реализации. Но это худший метод, поскольку требует наибольших усилий.
- Установите тип ввода как Число; напишите небольшую дополнительную проверку: легко настроить. Но не работает со старой версией IE и Firefox.
- Привязать ввод к модели с типом «sap.ui.model.type.float» и написать дополнительную проверку: лучший способ, требует наименьших усилий; но сложно понять и требует, чтобы вы знали механизм привязки в SAPUI5.
Начнем с каждого метода:
Установите тип ввода как String; напишите свой собственный метод проверки
Вы можете быстро настроить ввод:
1 / Пользователь ниже вводит данные в представлении:
Label text=”Input with type ‘String’: “/> <Input></Input>
По умолчанию тип ввода - String. Таким образом, вы позволите пользователю вводить любой текст без проверки.
2 / Проверка
Поскольку пользователь может ввести любой символ, вы можете придумать множество способов проверки ввода. Вы можете сделать это при изменении в реальном времени или при отправке пользователем. В разделе ниже могут быть некоторые подсказки о том, как проверить входную строку:
И есть много других способов проверить ввод, является ли он String или нет, но я советую вам забыть об этом подходе, если вы хотите сократить, но усилить код, поскольку:
- Этот подход требовал проверки: которая не будет полной, если вы следите за решением в Интернете. (По крайней мере не для меня)
- Это не может быть использовано в сценариях с несколькими странами. например, ваш пользователь из Англии (используйте точку «.» в качестве десятичного разделителя) и Германии (пользователь «,» в качестве десятичного разделителя). Если вы последуете этому подходу, у вас будет головная боль.
- Вам необходимо настроить сообщение проверки самостоятельно. И поверьте мне, сообщение о валидации непросто, если вы хотите, чтобы оно выглядело хорошо.
Следовательно, со всем этим недостатком, я думаю, вам следует рассмотреть следующие подходы:
Установите тип ввода как Число; напишите небольшую дополнительную проверку.
Вид выглядит так:
<Label text="Input with type 'Number': "/> <Input type="Number"></Input>
Если ваш пользователь использует только Chrome, ура, проблема решена. Все, что вам нужно, это добавить код, и библиотека поможет вам все это завершить:
- Разрешить пользователю вводить только числа и соответствующие символы (например, «,»; «.», «E» (для эпсилон)).
- Вызовите цифровую клавиатуру на мобильных устройствах. (что отлично подходит для мобильных пользователей)
К сожалению, многие пользователи по-прежнему используют IE, Firefox и другие браузеры, которые еще не поддерживают этот тип ввода «Число».
Если вы хотите поддерживать все браузеры и все языки, нам нужно проверить последний, на мой взгляд, лучшее решение.
Привязать ввод к модели с типом «sap.ui.model.type.float» и написать дополнительную проверку
Для проверки числа не нужно изобретать велосипед. SAP сделал это, и все, что нам нужно сделать, - это повторно использовать его. Единственная проблема в том, что повторно использовать это не так-то просто.
Предпосылкой для этого подхода является понимание концепции привязки sapui5, которая подробно объясняется в документах здесь.
Приступим к реализации проверки с плавающей запятой:
1 / Определить привязку к модели с типом Float
xml-представление можно определить по следующему адресу:
<Label text="bound to view's JSON model: "/> <Input value="{path: 'viewModel>/number', type:'sap.ui.model.type.Float'}" liveChange="onInputLiveChange" change="onInputChange"></Input>
И не забудьте создать модель в файле контроллера:
sap.ui.define([ "sap/ui/core/mvc/Controller" ], function (Controller) { "use strict"; return Controller.extend("barcodescan.controller.barcode", { onInit: function () { var oViewModel = new sap.ui.model.json.JSONModel({ number: 0 }, true); this.getView().setModel(oViewModel, "viewModel"); } }); });
Вы можете видеть, что мы привязываем значение ввода к пути ‘viewModel› / number ’ (эта модель будет создана в контроллере). И у нас также есть вызов другого атрибута ‘type’, для которого установлено значение ‘ sap.ui.model.type.Float ’. Это означает, что тип значения этой привязки - Float. Настройка типа поплавка для привязки поможет вам:
- Вызовите цифровую клавиатуру на мобильном телефоне (да, то же самое, что и номер входа)
- Но что еще более удивительно, они разделяют представление (формат) и истинное значение числа. И это именно то, что нам нужно, чтобы сделать локализацию (или интернационализацию) идеальной. Позвольте мне объяснить об этом подробнее:
Давайте рассмотрим пример, который я показал в верхней части этого сообщения:
Вы можете видеть, что после того, как я ввел «123456.1456», ввод был преобразован в «123,456,15» в соответствии с этим английским форматом. Поскольку у нас есть привязка к модели, модель будет хранить 2 типа входного значения:
- Истинное значение: точное значение числа, которое находится в типе Javascript с плавающей запятой. В данном случае это 123456.1456.
- Форматированное значение: форматированное значение, основанное на местоположении пользователя, хранящееся как строковый тип в Javascript. В данном случае это «123,456,15».
Тип привязки - это основная концепция и механизм, который помогает нам форматировать число в зависимости от местоположения пользователя.
После настройки библиотека поможет вам со всеми задачами форматирования. Как показано в демонстрации выше, как только вы вводите номер, библиотека автоматически запускает функцию для переформатирования значения в соответствии с его локализацией. И если вы проверяете модель, вы всегда найдете 2 значения ввода (одно для точного значения, а другое для форматированного значения).
ОК, теперь вы успешно настроили привязку. Но если вы введете нечисловое значение в свой ввод, ничего не произойдет. Библиотека преобразует текст в число, не сообщая об ошибке проверки. Как вы можете видеть ниже:
2 / Добавить проверку изменений в реальном времени
Проблема в том, что мы не уверены, правильно ли проанализирован номер. И нет смысла так хранить число с латинскими буквами внутри него. Вот почему нам нужно добавить дополнительную проверку к нашему вводу. И вы уже можете увидеть проверку, определенную в представлении, когда ввод change или liveChange:
<Input value="{path: 'viewModel>/number', type:'sap.ui.model.type.Float'}" liveChange="onInputLiveChange" change="onInputChange"></Input>
Нам нужно добавить соответствующую функцию для обработки валидации внутри контроллера:
onInputLiveChange: function (oEvt) { var oControl = oEvent.getSource(); this.validateFloatInput(oControl); }, onInputChange: function (oEvent) { var oControl = oEvent.getSource(); this.validateFloatInput(oControl); }, validateFloatInput: function (oControl) { var oBinding = oControl.getBinding("value"); var oValue = oControl.getValue(); try { var oParsedValue = oBinding.getType().parseValue(oValue, oBinding.sInternalType); // throw error if cannot parse value if (oParsedValue) { oControl.setValueState(sap.ui.core.ValueState.None); } else { oControl.setValueState(sap.ui.core.ValueState.Error); } } catch (ex) { oControl.setValueState(sap.ui.core.ValueState.Error); } }
Давайте разберемся с кодом:
- Когда пользователь вводит данные, запускается событие liveChange. Или, если пользователь завершит ввод, будет инициировано событие «изменение».
- В обработчике событий мы получаем oControl, который является нашим Вводом, нуждающимся в проверке, и отправляем в качестве параметра функции validateFloatInput.
- validateFloatInput: проверяет, является ли введенное значение числом или нет. Идея здесь заключается в использовании библиотечной функции oBinding.getType (). ParseValue (), которая выдает ошибку, если не может преобразовать строку в число (что нам нужно знать, если входное значение является числом ).
- Если во время синтаксического анализа возникла ошибка, мы установим для параметра Value State входа значение «Error», в противном случае - «None», чтобы ошибки не было. И что удивительно, библиотека SAPUI5 поможет вам выполнить все форматирование выделения ввода и показать текст информирующему пользователю. SAPUI5 также автоматически переводит сообщение об ошибке на местный язык, экономя вам много усилий.
И, наконец, вы сделали простой пример проверки чисел с плавающей запятой для нескольких языков и регионов.
Что дальше?
SAPUI5 не только имеет тип для числа, но также поддерживает такие популярные типы ввода, как:
- Валюта
- DateTime
- Размер файла
- Временной интервал
- Единица измерения
- …
Что поможет вам в 99% требований к вашим входам.
Если есть время, загляните в его документацию.
А пока ура и до свидания!
— V —
Обработка больших чисел:
Это редкий вариант использования, но вы можете столкнуться с этим при работе с международным предприятием, где число в базе данных может быть огромным. Пока Javascript поддерживает только 64-битные числа. Если вы введете большое число в SAPUI5 Input с типом привязки как float / Integer, число будет округлено, и вы потеряете детали.
Чтобы избежать этой ситуации, самый простой способ - добавить эту опцию формата «parseAsString: true» в вашу привязку:
oInput.bindProperty("value", { path: sBindingPath, type: new sap.ui.model.type.Float({ maxIntegerDigits: 18, maxFractionDigits: 2, minFractionDigits: 2, parseAsString: true, style: "standard" }) });
Платформа UI5 сохранит число как String, чтобы избежать проблемы переполнения с 64-битным числом.
В случае, если вы уже связали входные данные как тип float, вам нужно написать некоторую функцию для обработки концепции больших данных. Дайте мне знать в комментарии ниже, мы обсудим эту обработку больших чисел в отдельном сообщении в блоге.
Спасибо.