是否有 RadDataForm 的完整示例？

如何解决是否有 RadDataForm 的完整示例？

我正在考虑将 NativeScript-Vue v7.0 用于生产用途并研究其数据表单验证功能。

我认为 RadDataForm 是自定义验证规则的合适组件，但以下文档适用于 NativeScript v6.0，并且显示的源代码已损坏。

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

是否有实现基于正则表达式的验证规则和自定义错误消息的完整示例代码？

解决方法

文档 (v7)：RadDataForm Getting Started

您提供的链接 (updated) 中的示例代码也可在 GitHub 上获得：

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

email property with RegEx validator from the link above

完整示例：

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','index': 3,{
            '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',});
      }
    }
  }
};