English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
This example shares with you H5New features of form validation, how to create a user registration form page, for your reference, the specific content is as follows
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">-8">
<title>User Registration Form Page</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-->
Email type<input type="email"/><br/>
<!--tel attribute-->
Phone type<input type="tel"/><br/>
<!--number attribute-->
Number type<input type="number"/><br/>
<!--date attribute-->
Date type<input type="date"/><br/>
<!--month attribute-->
Month type<input type="month"/><br/>
<!--week attribute-->
Cycle type<input type="week"/><br/>
<!--range attribute-->
Number range<input type="range" min="18" max="60"/><br/>
<!--search attribute-->
Search type<input type="search"/><br/>
<!--color attribute-->
Color selector<input type="color"/><br/>
<!--url attribute-->
Website type<input type="url"/><br/>
<input type='submit'/>
</form>
<hr/>
<div id="form_content">
<form action="">
<div class="dc"><h3>User registration page</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 your 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 your password</p></div>
<div class="dc"><b>Personal email</b><input id="email" type="email" required/><p class="pc">Please enter your email</p></div>
<div class="dc"><b>Personal homepage</b><input id="url" type="url" required/><p class="pc">Please enter your personal homepage (optional)</p></div>
<div class="dc"><b>Contact phone number</b><input id="tel" type="tel" required/><p class="pc">Please enter your 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 your 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数字或字母组成';
}
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 is correct';
}else if(this.validity.typeMismatch)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='Invalid URL format';
}
}
var uphone=document.getElementById('tel');
uphone.onfocus=function(){
this.nextElementSibling.style.display='block';
this.nextElementSibling.innerHTML='Please enter your contact phone number';
}
uphone.onblur=function(){
if(this.validity.valid)
this.nextElementSibling.className='pc show_pass';
this.nextElementSibling.innerHTML='Phone number format is correct';
else if(this.validity.valueMissing)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='Phone number cannot be empty';
}else if(this.validity.typeMismatch)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='Invalid phone number format';
}
}
var uage=document.getElementById('age');
uage.onfocus=function(){
this.nextElementSibling.style.display='block';
this.nextElementSibling.innerHTML='Please enter your age';
}
uage.onblur=function(){
if(this.validity.valid)
this.nextElementSibling.className='pc show_pass';
this.nextElementSibling.innerHTML='Your age meets the registration requirements';
}else if(this.validity.rangeOverflow)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='Your age is greater than the registration range';
}else if(this.validity.rangeUnderflow)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='Your age is less than the registration range'
else if(this.validity.valueMissing)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='Age cannot be empty';
}
}
var udate=document.getElementById('date');
udate.onfocus=function(){
this.nextElementSibling.style.display='block';
this.nextElementSibling.innerHTML='Please enter your date of birth';
}
udate.onblur=function(){
if(this.validity.valueMissing){
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='Date of birth cannot be empty';
}else if(this.validity.valid){
this.nextElementSibling.className='pc show_pass';
this.nextElementSibling.innerHTML='Date of birth has been selected';
}
}
</script>
</body>
</html>
That's all for this article. Hope it will be helpful to everyone's learning and also hope everyone will support the Yelling Tutorial more.
Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to notice#w.3Please send an email to codebox.com (replace # with @ when sending an email) to report violations, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.