screen_rotation
Copied to Clipboard
<html> <head> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <body> <h3>Vue Js Allow only Alphabets and Number</h3> <div id="app"> <input type="text" v-model="inputValue" v-bind:value="cleanInputValue"> <p v-if="!inputValid" style="color: red;">Input can only contain letters and numbers</p> </div> <script type="module"> const app = Vue.createApp({ el: "#app", data() { return { inputValue: '', inputValid: true }; }, computed: { cleanInputValue() { const cleanedValue = this.inputValue.replace(/[^a-zA-Z0-9]/g, ''); this.inputValid = cleanedValue === this.inputValue; return cleanedValue; } }, }) app.mount("#app") </script> </body> </html>