English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Dieser Beispiel zeigt H5Neue Funktionen zur Formularvalidierung, wie man eine Benutzerregistrierungsformularseite erstellt, hier für alle zur Verfügung gestellt, die Details sind wie folgt
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">-8">}}
<title>Benutzerregistrierungsformularseite</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>
<!--Neue Eigenschaften des input-Labels-->
<form>
<!--email-Attribut-->
E-Mail-Typ<input type="email"/><br/>
<!--tel-Attribut-->
Telefon-Typ<input type="tel"/><br/>
<!--number-Attribut-->
Zahlen-Typ<input type="number"/><br/>
<!--date-Attribut-->
Datum-Typ<input type="date"/><br/>
<!--month-Attribut-->
Monats-Typ<input type="month"/><br/>
<!--week-Attribut-->
Zeitzyklus-Typ<input type="week"/><br/>
<!--range-Attribut-->
Zahlenbereich<input type="range" min="18" max="60"/><br/>
<!--search-Attribut-->
Suchtyp<input type="search"/><br/>
<!--color-Attribut-->
Farbauswahl-Selektor<input type="color"/><br/>
<!--url-Attribut-->
Web-Adresse-Typ<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>用户昵称</b><input id="user" type="text" autofocus required pattern="^[0-9a-zA-Z]{6,10}$"/><p class="pc">请输入用户名</p></div>
<div class="dc"><b>用户密码</b><input id="pwd" type="password" required pattern="^\w{8,12}$"/><p class="pc">请输入密码</p></div>
<div class="dc"><b>个人邮箱</b><input id="email" type="email" required/><p class="pc">请输入邮箱</p></div>
<div class="dc"><b>个人主页</b><input id="url" type="url" required/><p class="pc">请输入个人主页(可不填)</p></div>
<div class="dc"><b>联系电话</b><input id="tel" type="tel" required/><p class="pc">请输入联系电话</p></div>
<div class="dc"><b>你的年龄</b><input id="age" type="number" min="18" max="60" required/><p class="pc">请输入你的年龄</p></div>
<div class="dc"><b>出生日期</b><input id="date" type="date" required/><p class="pc">请选择出生日期</p></div>
<div class="dc"><input id="sub" type="submit" value="提交注册"/></div>
</form>
</div>
<script>
var uname = document.getElementById('user');
uname.onfocus = function() {
this.nextElementSibling.style.display='block';
this.nextElementSibling.innerHTML='8-12由数字或字母组成';
}
uname.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.patternMismatch){
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='用户名格式非法';
}
}
var upwd=document.getElementById('pwd');
upwd.onfocus=function(){
this.nextElementSibling.style.display='block';
this.nextElementSibling.innerHTML='6-12位数字;/字母;/由英文符号组成;
}
upwd.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.patternMismatch){
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='密码格式非法';
}
}
var e_mail=document.getElementById('email');
e_mail.onfocus=function(){
this.nextElementSibling.style.display='block';
this.nextElementSibling.innerHTML='请输入你的常用邮箱';
}
e_mail.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 url=document.getElementById('url');
url.onfocus=function(){
this.nextElementSibling.style.display='block';
this.nextElementSibling.innerHTML='请输入你的个人主页(选填)';
}
url.onblur=function(){
if(this.validity.valid) {
this.nextElementSibling.className = 'pc show_pass';
this.nextElementSibling.innerHTML = 'URL-Format ist korrekt';
}else if(this.validity.typeMismatch)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='Falsches URL-Format';
}
}
var uphone=document.getElementById('tel');
uphone.onfocus=function(){
this.nextElementSibling.style.display='block';
this.nextElementSibling.innerHTML='Bitte gib deine Kontakttelefonnummer ein';
}
uphone.onblur=function(){
if(this.validity.valid)
this.nextElementSibling.className='pc show_pass';
this.nextElementSibling.innerHTML='Telefonnummerformat ist korrekt';
else if(this.validity.valueMissing)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='Telefonnummer darf nicht leer sein';
}else if(this.validity.typeMismatch)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='Falsches Telefonnummerformat';
}
}
var uage=document.getElementById('age');
uage.onfocus=function(){
this.nextElementSibling.style.display='block';
this.nextElementSibling.innerHTML='Bitte gib dein Alter ein';
}
uage.onblur=function(){
if(this.validity.valid)
this.nextElementSibling.className='pc show_pass';
this.nextElementSibling.innerHTML='Dein Alter entspricht den Registrierungsanforderungen';
}else if(this.validity.rangeOverflow)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='Dein Alter ist über dem Registrierungsbereich';
}else if(this.validity.rangeUnderflow)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='Deine Alter ist unter dem Registrierungsbereich'
else if(this.validity.valueMissing)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='Alter darf nicht leer sein';
}
}
var udate=document.getElementById('date');
udate.onfocus=function(){
this.nextElementSibling.style.display='block';
this.nextElementSibling.innerHTML='Bitte geben Sie Ihr Geburtsdatum ein';
}
udate.onblur=function(){
if (this.validity.valueMissing) {
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='Geburtsdatum darf nicht leer sein';
} else if (this.validity.valid) {
this.nextElementSibling.className='pc show_pass';
this.nextElementSibling.innerHTML='Gewähltes Geburtsdatum';
}
}
</script>
</body>
</html>
Das ist der gesamte Inhalt dieses Artikels. Ich hoffe, er hilft Ihnen bei Ihrem Lernen und ich hoffe, dass Sie die Anleitungshilfe stark unterstützen.
Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet bezogen und gehört dem Urheber. Der Inhalt wurde von Internetbenutzern freiwillig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte, hat den Inhalt nicht manuell bearbeitet und übernimmt keine rechtlichen Verantwortlichkeiten. Wenn Sie verdächtige urheberrechtliche Inhalte finden, senden Sie bitte eine E-Mail an: notice#oldtoolbag.com (Bitte ersetzen Sie # durch @ beim Senden einer E-Mail zur Meldung von Verstößen und geben Sie relevante Beweise an. Sobald überprüft, wird diese Website den mutmaßlich urheberrechtlich verletzten Inhalt sofort löschen.