时间戳

首页 > 解决方案 > 名称 Alpha 验证不允许使用空格

vue.js - 名称 Alpha 验证不允许使用空格

问题描述

我在 vue js 中编写如下新形式。在名称字段中，我想输入“John Doe”。基本上它是名字和姓氏的组合。

我尝试了一些正则表达式而不是名称的 alpha 验证。但它也不允许我输入空格键。当我点击空格键时，单词之间没有显示空格。


validations: {
      name: {
        required,
        isNameValid:helpers.regex('isNameValid',^[a-zA-Z0-9_ ]*$),
        minLength: minLength(4)
      },

<input
          v-model.trim="$v.name.$model"
          name="name"
          label="Name"
          :error="$v.name.$error"
          @input="delayTouch($v.name)"
        />

<script>

  import {
    validationMixin
  } from "vuelidate";
  import {
    required,
    alpha,
    minLength,
    email,
    helpers
  } from "vuelidate/lib/validators";

  import { createNamespacedHelpers } from "vuex";

  const {
    mapGetters: mapQuoteGetters,
    mapState: mapQuoteState
  } = createNamespacedHelpers("mydata");

  // For delayed validation
  const touchMap = new WeakMap();
export default {
name: "MoveInfo",
mixins: [validationMixin],
    data() {
      return {
        name: ""

      };
    },
    computed: {
      ...mapQuoteState({
        mydata: "mydata"
      })
    },
  methods: {
      delayTouch($v) {
        $v.$reset()
        if (touchMap.has($v)) {
          clearTimeout(touchMap.get($v))
        }
        touchMap.set($v, setTimeout($v.$touch, 1000))
      }
    },
    validations: {
      name: {
        required,
        alpha,
        minLength: minLength(4)
      },

谁能告诉我如何解决这个问题以及我的正则表达式有什么问题？

标签： vue.jsvuejs2

解决方案

您的正则表达式接近正确：

尝试这个

isNameValid: helpers.regex('isNameValid',/^[a-z0-9_ ]*$/i),

您所缺少的只是表达式的开始和结束斜杠，JavaScript 需要这些斜杠才能知道您指的是正则表达式 - 可以在此处找到更多信息：https ://stackoverflow.com/a/ 32120870/8298506

我还删除了A-Za-z并将其替换/i为不区分大小写的标志，这将导致[A-Z]匹配[A-Za-z]

值得注意的[A-Za-z0-9_ ]是等价速记[\w ]

请理解，这些只会匹配 A-Za-z，它不会接受重音字符、希腊语或俄语等。如果国际化支持对您很重要，您需要查找 regexp-unicode 的解决方案 - 详细信息其中有点超出了这个答案的范围，但这是一个起点https://javascript.info/regexp-unicode

推荐阅读