名称 alpha 验证不允许空格

Question

我正在用 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)
},

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

Answer 1

这是因为您的输入中有v-model.trim

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

.trim修剪空白，这不是因为正则表达式。

Answer 2

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

试试这个

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