方案一：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);
};
