تو این پست، یاد می‌گیریم چطور با جاوااسکریپت شیءگرا (OOP) فرم‌ها رو به‌صورت اصولی و حرفه‌ای اعتبارسنجی کنیم. ✨🛠️
کد جاوااسکریپت برای ولیدیشن: 📜💻
<form method = 'post' action ='somewhere.com' onsubmit = 'return formApp.validateInputs.apply(formApp);'> <p> Name: <input type = 'text' name = 'userName' id = 'userName'> </p> <p> Phone: <input type = 'text' name = 'userPhone' id = 'userPhone'> </p> <input type = 'submit' id = 'sub' value = 'Submit Data'> </form>
var formApp = { userNameReg: /[a-z0-9 ' _ ]+/gi, onlySpaceReg: /\s+/, phoneReg: /\d{3}/, userName: document.getElementById('userName').value, userPhone: document.getElementById('userPhone').value, error: [], reportError: function () { for (var i = 0; i < this.error.length; i++) { alert(this.error[i] + '\n') } }, validateInputs: function () { if (!this.userNameReg.test(this.userName) || this.onlySpaceReg.test(this.userName)) { this.error.push['Name contains illegal character']; return false } validation if (!this.phoneReg.test(this.userPhone)) { this.error.push['Only a three-digit number']; return false; } // end phone validation if (this.error.length > 0) { this.reportError(); return false; } return true; } // end validateInputs };
با این روش، از ورود داده‌های اشتباه جلوگیری می‌کنیم و تجربه کاربری فرم رو بهتر می‌کنیم. ✍️🔐
اگر دنبال یادگیری بیشتر درباره جاوااسکریپت شیءگرا (OOP) و ولیدیشن فرم‌ها هستی، حتما همراه ما بمون. 😉🚀