Input
چکار کنیم که تو input password بتوانیم یه کاری کنیم که کاربر باید حروف هم در پسورد استفاده کنه اگه نکنه invalid بیاد
چه چیزی بنویسم تو input م؟
پاسخها
4
سلام دوست عزیز ببین چیزی که شما میخوای باید براش ولیدیشن بنویسی و ولیدیشن هم کلا به دو صورت هست یکی سمت کلاینت یکی هم سمت سرور به این مساله دقت کن که خیلی خیلی مهمه اگر برنامه نویس سمت سرور هم خودتی کلا همیشه باید حتما سمت سرور ولیدیشنت رو انجام بدی. ( چون این ولیدیشن سمت کلاینت رو میشه به راحتی دور زد با یه دکمه خاموش کردن جاوا اسکریپت تو مرورگر. یا نوشتن چند خط کد جاوا اسکریپت)
اما خوب برای تجربه کاربر بهتر باید ولیدیشن سمت کاربر هم نوشته بشه
حالا سمت کلاینت یا همون مرورگر هم میتونی با کد های جاوا اسکریپت این کار رو انجام بدی.
برای این کار میتونی از regix استفاده کنید یعنی عبارات با قاعده که راکت هم یه دوره راجعبش داره
کد جاوا اسکریپتی (ولیدیشن سمت کلاینتت میتونه این باشه):
function CheckPassword(inputtxt)
{
var passw = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,15}$/;
if(inputtxt.value.match(passw))
{
alert('Correct, try another...')
return true;
}
else
{
alert('Wrong...!')
return false;
}
}الان توی این عبارت با قاعده اگر دقت کنی نوشته شده که حتما حداقل شامل یک عدد، یک حرف کوچک و یک حرف بزرگ باشه. و تعداد کاراکتر های پسورد هم بین ۶ تا 15 تا باشه.
شما اگه جاوا اسکریپت بلد باشین نباید این براتون سخت باشه
حاوا اسکریپت یاد بگیرین که دیگه لازم نباشه اینجه بپرسین
البته regex هم مفیده حتما یاد بگیرین
گفتگوهای مرتبط
شاید پاسخ شما همینجا باشد
باید از ریجکس استفاده کنین
let form = document.querySelector(".form")
let password = document.querySelector("#password")
let evaluatPassword = 0
form.addEventListener("submit", e => {
if (!(evaluatPassword === 3)) {
e.preventDefault()
if (evaluatPassword !== 3) {
form.password.classList.add("is-invalid")
}
}
})
form.password.addEventListener("keyup", e => {
if (e.target.value) {
evaluatPassword = 0
evaluatPassword+= /[a-z]/.test(e.target.value) ? 1 : 0;
evaluatPassword+= /[0-9]/.test(e.target.value) ? 1 : 0;
evaluatPassword+= e.target.value.length >= 5 ? 1 : 0;
if (evaluatPassword === 3) {
e.target.classList.add("is-valid")
e.target.classList.remove("is-invalid")
} else {
e.target.classList.add("is-invalid")
}
}
})