我正在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)
},
有人可以告诉我如何解决这个问题以及我的正则表达式有什么问题吗?
答案 0 :(得分:0)
这是因为您在输入中输入了v-model.trim
<input
v-model.trim="$v.name.$model"
name="name"
label="Name"
:error="$v.name.$error"
@input="delayTouch($v.name)"
/>
.trim
会修剪空白,这不是因为正则表达式。
答案 1 :(得分:0)
您的正则表达式几乎是正确的:
尝试一下
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匹配,不接受带重音符号,希腊语或俄语等。如果国际化支持对您很重要,则需要查找正则表达式的解决方案unicode-详细信息超出了此答案的范围,但这是一个起点https://javascript.info/regexp-unicode