Есть ли полный образец для RadDataForm?

Я рассматриваю возможность использования NativeScript-Vue v7.0 для производственного использования и изучаю его функции проверки формы данных.

Я полагаю, что RadDataForm был бы подходящим компонентом для настройки правил проверки, но следующая документация предназначена для NativeScript v6.0, а отображаемый исходный код поврежден.

https://docs.nativescript.org/vuejs/ns-ui/dataform/dataform-validation

Есть ли какой-либо полный образец кода, который реализует правила проверки на основе регулярных выражений и настраиваемые сообщения об ошибках?


nativescript nativescript-vue
person ksky8864    schedule 08.01.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Документация (v7): Начало работы с RadDataForm

Пример кода в предоставленной вами ссылке (обновлен ) также доступен на GitHub:

https://github.com/ProgressNS/nativescript-ui-samples-vue/blob/master/dataform/app/examples/Validation.ts

import { Frame } from 'tns-core-modules/ui/frame'; import { RegisteringUser } from '../data'; const description = 'Validation'; export default { name: 'Validation', description: description, template: ` <Page> <ActionBar :title="title"> <NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap"></NavigationButton> </ActionBar> <StackLayout> <RadDataForm ref="dataform" :source="person" :metadata="personMetadata"> </RadDataForm> <Label :text="text" textWrap="true" margin="12" android:color="#C73339" ios:color="red" horizontalAlignment="center"></Label> <Button text="Login" margin="12" horizontalAlignment="stretch" @tap="onTap()"></Button> </StackLayout> </Page> `, data () { return { title: description, person: new RegisteringUser(), text: null, personMetadata: { 'isReadOnly': false, 'commitMode': 'Immediate', 'validationMode': 'OnLostFocus', 'propertyAnnotations': [ { 'name': 'username', 'displayName': 'Nick', 'index': 0, 'validators': [ { 'name': 'NonEmpty' }, { 'name': 'MaximumLength', 'params': { 'length': 10 } } ] }, { 'name': 'email', 'displayName': 'E-Mail', 'index': 1, 'editor': 'Email', 'validators': [{ 'name': 'RegEx', 'params': { 'regEx': '^[a-zA-Z0-9\\+\\.\\_\\%\\-\\+]{1,256}\\@telerik.com$', 'errorMessage': 'Please provide your @telerik.com email.' } }] }, { 'name': 'password', 'displayName': 'Password', 'editor': 'Password', 'index': 2, 'validators': [ { 'name': 'NonEmpty', }, { 'name': 'MinimumLength', 'params': { 'length': 6 } }, ] }, { 'name': 'password2', 'displayName': 'Repeat Password', 'editor': 'Password', 'index': 3, 'validators': [ { 'name': 'NonEmpty', }, { 'name': 'MinimumLength', 'params': { 'length': 6 } }, ] }, { 'name': 'age', 'displayName': 'Age', 'index': 4, 'validators': [ { 'name': 'RangeValidator', 'params': { 'minimum': 1, 'maximum': 100, 'errorMessage': 'Age must be between 1-100.', } }, ], }, { 'name': 'agreeTerms', 'displayName': 'Agree Terms', 'index': 5, 'validators': [ { 'name': 'IsTrueValidator', }, ], } ] } }; }, methods: { onNavigationButtonTap() { Frame.topmost().goBack(); }, onTap() { let isValid = true; const pName = this.$refs.dataform.getPropertyByName('username'); const pPwd = this.$refs.dataform.getPropertyByName('password'); const pPwd2 = this.$refs.dataform.getPropertyByName('password2'); if (pName.valueCandidate.toLowerCase() !== 'admin1') { pName.errorMessage = 'Use admin1 as username.'; this.$refs.dataform.notifyValidated('username', false); isValid = false; } else { this.$refs.dataform.notifyValidated('username', true); } if (!pPwd.valueCandidate) { pPwd.errorMessage = 'Password is empty.'; this.$refs.dataform.notifyValidated('password', false); isValid = false; } if (pPwd2.valueCandidate !== pPwd.valueCandidate) { pPwd2.errorMessage = 'Password is not the same as above.'; this.$refs.dataform.notifyValidated('password2', false); isValid = false; } else { this.$refs.dataform.notifyValidated('password2', true); } if (!isValid) { this.text = 'Username or Password is not valid.'; } else { this.text = ''; this.$refs.dataform.commitAll(); alert({ title: 'Successful Login', message: `Welcome, ${this.person.username}`, okButtonText: 'OK', }); } } } };

person Carlos Lázaro Costa    schedule 05.05.2021