vue vxe-form中的input限制只能输入英文和数字

最新推荐文章于 2024-10-28 10:44:24 发布

原创最新推荐文章于 2024-10-28 10:44:24 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue3 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何在Vue3中使用vxe-form组件进行表单验证，通过`curformRules`定义规则，例如限制description字段只能输入数字或英文。示例代码展示了在vxe-form-item中结合vxe-textarea进行验证的实现方式。

1、定义rules

<vxe-form

          :data="childPopData.list"

          title-align="right"

          title-width="100"

          title-overflow="tooltip"

          @submit="submitChildEvent"

          :rules="curformRules" //主要是rules

        >

2、


 <vxe-form-item field="description" title="Description" :span="12" :item-render="{}">

      <template #default="{data }">

              <vxe-textarea

                v-model="data.description"

                placeholder="please input description"

                maxlength="200"

                showWordCount

              ></vxe-textarea>
               //input同理

        </template>

</vxe-form-item>

3、

 let curformRules=reactive({ //vue3写法

    description:[{

      pattern: new RegExp('^[A-z0-9]*$'),message: '只能输入数字或英文！!'

    }]

  })

data(){ //vue写法
    return {
        curformRules:{
            description:[{

              pattern: new RegExp('^[A-z0-9]*$'),message: '只能输入数字或英文！!'

            }]
        }
    }
}