java中的接口是类吗
218
2023-07-06
H5用户注册表单页 注册模态框!
本实例为大家分享了H5表单验证新特性,如何用户注册表单页,供大家参考,具体内容如下
#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-blochttp://k;
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;
}
邮箱类型
电话类型
数字类型
日期类型
月份类型
周期类型
数字范围
http://
搜素类型
颜色选择器
网址类型
请输入用户名
请输入密码
清输入邮箱
请输入个人主页(可不填)
请输入联系电话
请输入你的年龄
请选择出生日期
var uname=document.getElementById('user');
uname.onfocus=function(){
this.nextElementSibling.style.display='block';
this.nextElementSibling.innerHTMUqJMnML='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 = '网址格式正确';
}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='已选择出生日期';
}
}
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~