方案一：Element Plus 表单验证
<template><el-form :model="form" :rules="rules" ref="formRef" label-width="120px"><el-form-item label="用户名" prop="username"><el-input v-model="form.username" @input="handleUsernameInput"placeholder="只能输入小写字母、数字和下划线"/></el-form-item><el-form-item><el-button type="primary" @click="submitForm">提交</el-button></el-form-item></el-form>
</template><script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';const formRef = ref();
const form = ref({username: ''
});// 实时过滤非法字符
const handleUsernameInput = (value) => {form.value.username = value.replace(/[^a-z0-9_]/g, '');
};// 表单验证规则
const rules = {username: [{ required: true, message: '用户名不能为空', trigger: 'blur' },{ pattern: /^[a-z0-9_]+$/,message: '只能包含小写字母、数字和下划线',trigger: 'blur'},{ min: 4, max: 16, message: '长度应在4-16个字符之间', trigger: 'blur' }]
};const submitForm = () => {formRef.value.validate((valid) => {if (valid) {ElMessage.success('提交成功');console.log('表单数据:', form.value);} else {ElMessage.error('请检查表单输入');}});
};
</script>
方案二：自定义指令实现
<template><el-form :model="form" ref="formRef" label-width="120px"><el-form-item label="用户名"><el-input v-model="form.username" v-lowercase-num-underscoreplaceholder="只能输入小写字母、数字和下划线"/></el-form-item></el-form>
</template><script setup>
// 自定义指令
const vLowercaseNumUnderscore = {mounted(el) {el.addEventListener('input', (e) => {e.target.value = e.target.value.replace(/[^a-z0-9_]/g, '');// 触发v-model更新e.dispatchEvent(new Event('input'));});}
};const form = ref({username: ''
});
</script>
方案三：组合式函数封装
// useInputValidator.js
import { ref } from 'vue';export function useInputValidator() {const inputValue = ref('');const validateInput = (value) => {return /^[a-z0-9_]*$/.test(value);};const filterInput = (value) => {return value.replace(/[^a-z0-9_]/g, '');};return {inputValue,validateInput,filterInput};
}
<template><el-input v-model="filteredValue"placeholder="只能输入小写字母、数字和下划线"/>
</template><script setup>
import { useInputValidator } from './useInputValidator';const { inputValue, filterInput } = useInputValidator();const filteredValue = computed({get: () => inputValue.value,set: (val) => {inputValue.value = filterInput(val);}
});
</script>
高级功能扩展
1. 添加输入提示
<template><el-inputv-model="form.username"@input="handleUsernameInput"placeholder="只能输入小写字母、数字和下划线"><template #append><el-tooltip content="只能包含a-z, 0-9和_" placement="top"><el-icon><QuestionFilled /></el-icon></el-tooltip></template></el-input>
</template>
2. 实时字符计数
<template><el-inputv-model="form.username"@input="handleUsernameInput"maxlength="16"show-word-limit/><div class="counter">已输入: {{ form.username.length }}/16</div>
</template>
3. 禁止粘贴非法字符
const handlePaste = (e) => {e.preventDefault();const text = e.clipboardData.getData('text/plain');const filtered = text.replace(/[^a-z0-9_]/g, '');document.execCommand('insertText', false, filtered);
};
