<!DOCTYPE html>
<html>
<سر>
<متا نام=“نمایشگاه” محتوا=“width=device-width, first-scale=1”>
<سبک>
/* استایل کردن همه فیلدهای ورودی */
ورودی {
عرض: 100%;
لایه گذاری: 12 پیکسل;
مرز: 1 پیکسل جامد #cccc;
شعاع مرزی: 4 پیکسل;
اندازه جعبه: جعبه مرزی;
حاشیه بالا: 6 پیکسل;
حاشیه-پایین: 16 پیکسل;
}
/* دکمه ارسال را استایل کنید */
ورودی[type=submit] {
رنگ پس زمینه: آبی;
رنگ: سفید;
}
/* به ظرف برای ورودی ها حالت دهید */
.کانتینر {
رنگ پس زمینه: #f1f1f1;
لایه گذاری: 20 پیکسل;
}
/* وقتی کاربر روی قسمت رمز عبور کلیک می کند کادر پیام نمایش داده می شود */
#پیام {
نمایش دادن:هیچ یک;
زمینه: #f1f1f1;
رنگ: #000;
موقعیت: نسبت فامیلی;
لایه گذاری: 20 پیکسل;
حاشیه بالا: 10 پیکسل;
}
#پیام ص {
لایه گذاری: 10 پیکسل 35 پیکسل;
اندازه فونت: 18 پیکسل;
}
/* یک رنگ متن سبز و یک علامت تیک اضافه کنید وقتی شرایط لازم است */
.معتبر {
رنگ: سبز;
}
معتبر:قبل {
موقعیت: نسبت فامیلی;
ترک کرد: -35 پیکسل;
محتوا: “✔”;
}
/* هنگامی که الزامات اشتباه است، یک رنگ متن قرمز و یک “x” اضافه کنید */
.بی اعتبار {
رنگ: قرمز;
}
.invalid:قبلا {
موقعیت: نسبت فامیلی;
ترک کرد: -35 پیکسل;
محتوا: “✖”;
}
</سر>
<بدن>
<h3>کلمه عبور اعتبار سنجی</h3>
<بخش کلاس=“کانتینر”>
<فرم روش=“پست”>
<برچسب برای=“usrname”>نام</برچسب>
<ورودی نوع=“متن” شناسه=“usrname” نام=“usrname” ضروری>
<برچسب برای=“پست الکترونیک”>پست الکترونیک</برچسب>
<ورودی نوع=“پست الکترونیک” شناسه=“آدرس ایمیل” نام=“آدرس ایمیل” ضروری>
<برچسب برای=“psw”>کلمه عبور</برچسب>
<ورودی نوع=“کلمه عبور” شناسه=“psw” نام=“psw” الگو=“(?=.*d)(?=.*[a-z])(?=.*[A-Z]). {8،}” عنوان=“باید حداقل یک عدد و یک حرف بزرگ و کوچک و حداقل 8 کاراکتر یا بیشتر داشته باشد” ضروری>
<ورودی نوع=“ارسال” ارزش=“ارسال”>
</فرم>
</بخش>
<بخش شناسه=“پیام”>
<h3>کلمه عبور باید حاوی را ذیل:</h3>
<پ شناسه=“حرف” کلاس=“بی اعتبار”>آ <ب>حروف کوچک</ب> حرف</پ>
<پ شناسه=“سرمایه، پایتخت” کلاس=“بی اعتبار”>آ <ب>سرمایه، پایتخت (حروف بزرگ)</ب> حرف</پ>
<پ شناسه=“عدد” کلاس=“بی اعتبار”>آ <ب>عدد</ب></پ>
<پ شناسه=“طول” کلاس=“بی اعتبار”>کمترین <ب>8 شخصیت ها</ب></پ>
</بخش>
<اسکریپت>
جایی که myInput = سند.getElementById(“psw”);
جایی که حرف = سند.getElementById(“حرف”);
جایی که سرمایه، پایتخت = سند.getElementById(“سرمایه، پایتخت”);
جایی که عدد = سند.getElementById(“عدد”);
جایی که طول = سند.getElementById(“طول”);
// وقتی کاربر روی فیلد رمز عبور کلیک کرد، کادر پیام را نشان دهید
myInput.متمرکز = عملکرد() {
سند.getElementById(“پیام”).سبک.نمایش دادن = “مسدود کردن”;
}
// هنگامی که کاربر خارج از قسمت رمز عبور کلیک می کند، کادر پیام را پنهان کنید
myInput.روشن شدن = عملکرد() {
سند.getElementById(“پیام”).سبک.نمایش دادن = “هیچ یک”;
}
// هنگامی که کاربر شروع به تایپ چیزی در قسمت رمز عبور می کند
myInput.onkeyup = عملکرد() {
// اعتبار سنجی حروف کوچک
جایی که حروف کوچک = /[a-z]/g;
اگر(myInput.ارزش.همخوانی داشتن(حروف کوچک)) {
حرف.کلاس لیست.برداشتن(“بی اعتبار”);
حرف.کلاس لیست.اضافه کردن(“معتبر”);
} دیگر {
حرف.کلاس لیست.برداشتن(“معتبر”);
حرف.کلاس لیست.اضافه کردن(“بی اعتبار”);
}
// اعتبار سنجی حروف بزرگ
جایی که حروف بزرگ = /[A-Z]/g;
اگر(myInput.ارزش.همخوانی داشتن(حروف بزرگ)) {
سرمایه، پایتخت.کلاس لیست.برداشتن(“بی اعتبار”);
سرمایه، پایتخت.کلاس لیست.اضافه کردن(“معتبر”);
} دیگر {
سرمایه، پایتخت.کلاس لیست.برداشتن(“معتبر”);
سرمایه، پایتخت.کلاس لیست.اضافه کردن(“بی اعتبار”);
}
// اعتبارسنجی اعداد
جایی که شماره = /[0-9]/g;
اگر(myInput.ارزش.همخوانی داشتن(شماره)) {
عدد.کلاس لیست.برداشتن(“بی اعتبار”);
عدد.کلاس لیست.اضافه کردن(“معتبر”);
} دیگر {
عدد.کلاس لیست.برداشتن(“معتبر”);
عدد.کلاس لیست.اضافه کردن(“بی اعتبار”);
}
// اعتبارسنجی طول
اگر(myInput.ارزش.طول >= 8) {
طول.کلاس لیست.برداشتن(“بی اعتبار”);
طول.کلاس لیست.اضافه کردن(“معتبر”);
} دیگر {
طول.کلاس لیست.برداشتن(“معتبر”);
طول.کلاس لیست.اضافه کردن(“بی اعتبار”);
}
}
</بدن>
</html>
