自定义验证器函数
const forbiddenCharValidator = (rule, value, callback) => {
const forbiddenCharacters = ['as', 'for', 'default', 'in', 'join', 'left', 'inner', 'right', 'where', 'when', 'case', 'select'];
for (let forbiddenCharacter of forbiddenCharacters) {
if (value && value.includes(forbiddenCharacter)) {
callback(new Error(`不能使用关键字 '${forbiddenCharacter}'`));
return;
}
}
callback();
};
使用场景:
这个验证规则对象通常用在表单组件中,例如 Element Plus 的 <el-form>
或 <el-input>
组件,来确保用户输入的数据符合特定的要求。例如,你可能不希望用户在某些输入字段中使用特定的关键字,因为这些关键字可能是保留字或有特殊意义。
示例:
在 Vue 组件中,你可能会这样使用这个验证规则:
<template>
<el-form :model="form" :rules="rules">
<el-form-item label="用户名" prop="username" :rules="{ validator: forbiddenCharValidator, trigger: 'blur' }">
<el-input v-model="form.username"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
username: ''
},
rules: {
username: [
{ validator: forbiddenCharValidator, trigger: 'blur' }
]
}
};
},
methods: {
forbiddenCharValidator(rule, value, callback) {
// 自定义验证逻辑
}
}
};
</script>
原文地址:https://blog.csdn.net/weixin_48420104/article/details/142660439
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!