screen_rotation
Copied to Clipboard
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <h3> Implementing Phone Number Validation in Vue.js for the USA</h3> <div id="app"> <form> <input type="text" v-model="phoneNumber" /> <pre v-if="phoneNumber">Phone Number Length {{phoneNumber.length}}</pre> <p v-if="isValid">Valid Phone Number</p> <p v-else style='color:red'>Invalid Phone Number</p> </form> </div> <script type="module"> const app = new Vue({ el: "#app", data() { return { phoneNumber: '', }; }, computed: { isValid() { return /^(?:\(\d{3}\)|\d{3}[.-]?)\d{3}[.-]?\d{4}$/.test(this.phoneNumber); }, }, }) </script> <style> input[type="text"] { width: 250px; height: 40px; font-size: 16px; padding: 10px; } </style> </body> </html>