English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
هذا المثال يشارك جميعكم ميزات التحقق من صحة النماذج H5، كيفية إنشاء صفحة تسجيل المستخدم، للاستعانة بها، والمحتوى التفصيلي كالتالي
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>صفحة تسجيل المستخدم</title>
<style>
#form_content{
width:600px;
margin:0 auto;
position:absolute;
left:400px;
}
#form_content .dc{
width:600px;
margin-top:10px;
overflow:hidden;
}
#form_content .dc h3{
text-align:center;
}
#form_content b{
display:inline-block;
height:40px;
line-height: 40px;
margin-left:20px;
}
#form_content input{
display:inline-block;
height:34px;
width:200px;
border-radius:2px;
margin-left:60px;
padding-left:10px;
}
.pc{
width:200px;
height:40px;
float:right;
line-height:40px;
text-align:center;
margin:0 20px 0;
background:#333;
color:#fff;
font-weight:bold;
border-radius:8px;
display:none;
}
input#sub{
display:inline-block;
width:215px;
background:#f0f;
margin-left:144px;
}
.show_pass{
background:limegreen;
display:block;
}
.show_warn{
background:#e4393c;
display:block;
}
#audio_bground{
width:100%;
height:100%;
background:#afa;
position:absolute;
z-index:-10;
}
</style>
</head>
<body>
<!--new features of input tag-->
<form>
<!--email attribute-->
نوع البريد الإلكتروني<input type="email"/><br/>
<!--tel attribute-->
نوع الهاتف<input type="tel"/><br/>
<!--number attribute-->
نوع الرقم<input type="number"/><br/>
<!--date attribute-->
نوع التاريخ<input type="date"/><br/>
<!--month attribute-->
نوع الشهر<input type="month"/><br/>
<!--week attribute-->
نوع الفترة<input type="week"/><br/>
<!--range attribute-->
نطاق الأرقام<input type="range" min="18" max="60"/><br/>
<!--search attribute-->
نوع البحث<input type="search"/><br/>
<!--color attribute-->
محدد اللون<input type="color"/><br/>
<!--url attribute-->
نوع عنوان الموقع<input type="url"/><br/>
<input type='submit'/>
</form>
<hr/>
<div id="form_content">
<form action="">
<div class="dc"><h3>صفحة تسجيل المستخدم</h3></div>
<div class="dc"><b>user nickname</b><input id="user" type="text" autofocus required pattern="^[0-9a-zA-Z]{6,10}$"/><p class="pc">please enter the username</p></div>
<div class="dc"><b>user password</b><input id="pwd" type="password" required pattern="^\w{8,12}$"/><p class="pc">please enter the password</p></div>
<div class="dc"><b>personal email</b><input id="email" type="email" required/><p class="pc">please enter the email</p></div>
<div class="dc"><b>personal homepage</b><input id="url" type="url" required/><p class="pc">please enter the personal homepage (optional)</p></div>
<div class="dc"><b>contact phone number</b><input id="tel" type="tel" required/><p class="pc">please enter the contact phone number</p></div>
<div class="dc"><b>your age</b><input id="age" type="number" min="18" max="60" required/><p class="pc">please enter your age</p></div>
<div class="dc"><b>date of birth</b><input id="date" type="date" required/><p class="pc">please select the date of birth</p></div>
<div class="dc"><input id="sub" type="submit" value="submit registration"/></div>
</form>
</div>
<script>
var uname=document.getElementById('user');
uname.onfocus=function(){
this.nextElementSibling.style.display='block';
this.nextElementSibling.innerHTML='8-12 digits or letters';
}
uname.onblur=function(){
if(this.validity.valid){
this.nextElementSibling.className='pc show_pass';
هذا العنصر التالي للشقيق.innerHTML='صيغة اسم المستخدم صحيحة';
}
else if(this.validity.valueMissing) {
this.nextElementSibling.className = 'pc show_warn';
هذا العنصر التالي للشقيق.innerHTML = 'اسم المستخدم لا يمكن أن يكون فارغًا';
}else if(this.validity.patternMismatch){
this.nextElementSibling.className='pc show_warn';
هذا العنصر التالي للشقيق.innerHTML='صيغة اسم المستخدم غير قانونية';
}
}
var upwd=document.getElementById('pwd');
upwd.onfocus=function(){
this.nextElementSibling.style.display='block';
هذا العنصر التالي للشقيق.innerHTML='مكون من 6-12数字/حرف/رمز إنجليزي';
}
upwd.onblur=function(){
if(this.validity.valid){
this.nextElementSibling.className='pc show_pass';
هذا العنصر التالي للشقيق.innerHTML='صيغة كلمة المرور صحيحة';
else if(this.validity.valueMissing)
this.nextElementSibling.className='pc show_warn';
هذا العنصر التالي للشقيق.innerHTML='كلمة المرور للمستخدم لا يمكن أن تكون فارغة';
}else if(this.validity.patternMismatch){
this.nextElementSibling.className='pc show_warn';
هذا العنصر التالي للشقيق.innerHTML='صيغة كلمة المرور غير قانونية';
}
}
var e_mail=document.getElementById('email');
e_mail.onfocus=function(){
this.nextElementSibling.style.display='block';
هذا العنصر التالي للشقيق.innerHTML='ادخل بريدك الإلكتروني المفضل';
}
e_mail.onblur=function(){
if(this.validity.valid) {
this.nextElementSibling.className = 'pc show_pass';
هذا العنصر التالي للشقيق.innerHTML = 'صيغة البريد الإلكتروني صحيحة';
else if(this.validity.valueMissing)
this.nextElementSibling.className='pc show_warn';
هذا العنصر التالي للشقيق.innerHTML='البريد الإلكتروني لا يمكن أن يكون فارغًا';
}else if(this.validity.typeMismatch)
this.nextElementSibling.className='pc show_warn';
هذا العنصر التالي للشقيق.innerHTML='صيغة البريد الإلكتروني غير صحيحة';
}
}
var url=document.getElementById('url');
url.onfocus=function(){
this.nextElementSibling.style.display='block';
هذا العنصر التالي للشقيق.innerHTML='ادخل رابط صفحتك الشخصية (اختياري)';
}
url.onblur=function(){
if(this.validity.valid) {
this.nextElementSibling.className = 'pc show_pass';
this.nextElementSibling.innerHTML = 'صيغة عنوان الموقع صحيحة';
}else if(this.validity.typeMismatch)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='صيغة عنوان الموقع غير صحيحة';
}
}
var uphone=document.getElementById('tel');
uphone.onfocus=function(){
this.nextElementSibling.style.display='block';
this.nextElementSibling.innerHTML='رجاء إدخال رقم هاتفك';
}
uphone.onblur=function(){
if(this.validity.valid){
this.nextElementSibling.className='pc show_pass';
this.nextElementSibling.innerHTML='صيغة هاتف صحيحة';
else if(this.validity.valueMissing)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='لا يمكن أن يكون هاتفك فارغًا';
}else if(this.validity.typeMismatch)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='صيغة هاتف غير صحيحة';
}
}
var uage=document.getElementById('age');
uage.onfocus=function(){
this.nextElementSibling.style.diplay='block';
this.nextElementSibling.innerHTML='رجاء إدخال عمرك';
}
uage.onblur=function(){
if(this.validity.valid){
this.nextElementSibling.className='pc show_pass';
this.nextElementSibling.innerHTML='سنك يتوافق مع متطلبات التسجيل';
}else if(this.validity.rangeOverflow)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='سنك أكبر من نطاق التسجيل';
}else if(this.validity.rangeUnderflow)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='سنك أقل من نطاق التسجيل'
else if(this.validity.valueMissing)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='العمر لا يمكن أن يكون فارغًا';
}
}
var udate=document.getElementById('date');
udate.onfocus=function(){
this.nextElementSibling.style.display='block';
this.nextElementSibling.innerHTML='يرجى إدخال تاريخ ميلادك';
}
udate.onblur=function(){
if(this.validity.valueMissing){
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='لا يمكن أن يكون تاريخ الميلاد فارغًا';
}else if(this.validity.valid){
this.nextElementSibling.className='pc show_pass';
this.nextElementSibling.innerHTML='تم اختيار تاريخ الميلاد';
}
}
</script>
</body>
</html>
هذا هو نهاية محتوى هذا المقال، نأمل أن يكون قد ساعد في تعلمكم، ونأمل أن تشجعوا دروس النطق بشكل أكبر.
إعلان: محتوى هذا المقال تم جمعه من الإنترنت، ويتمتع صاحب الحقوق الأصلية، ويتم جمع المحتوى من قبل المستخدمين عبر الإنترنت بطرق متفرقة، ولا يمتلك هذا الموقع حقوق الملكية، ولا يتم تعديل المحتوى بشكل يدوي، ولا يتحمل هذا الموقع أي مسؤولية قانونية ذات صلة. إذا اكتشفت محتوى مخالف للحقوق النشرية، فأنت مرحب بك في إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (يرجى استبدال # ب @ عند إرسال البريد الإلكتروني) لتقديم الشكوى، وتقديم الدليل المطلوب، إذا تم التحقق من ذلك، فإن هذا الموقع سيرحل على الفور عن المحتوى المزعوم.