网页制表验证联系
本文共 8785 字，大约阅读时间需要 29 分钟。
文章目录
要求
实现
html代码
Document
css代码
*{ margin: 0; padding: 0;}#head{ width: 528px; height: 57px; border-top-left-radius: 10%; border-top-right-radius: 10%; background-image: url("images/top.gif"); margin: 0 auto;}#form{ width: 520px; height: 300px; background-color: blanchedalmond; margin: 0 auto; border: 5px solid #FF9EB6; border-bottom-left-radius: 2%; border-bottom-right-radius: 2%;}#form div:first-child{ height: 60px; width: 100%; /* background-color: aqua; */}#form div:first-child img{ float: left; margin-top: 17px; margin-right: 5px;}#form div:first-child img:first-child{ margin-left: 100px; margin-top: 0px; margin-right: 5px;}#form div:first-child p{ float: left; font-size: 5px; color:#E41414; line-height: 56px;}#form div:nth-child(2){ height: 180px; width: 100%; /* background-color: blue; */}#form div:nth-child(2) div:first-child{ height: 100%; width:30%; /* background-color: red; */ float: left; /* padding-top: 10px; */}#form div:nth-child(2) div:first-child p{ margin: 0; padding: 0; width: 100%; line-height: 15px; float: right; color: black; margin-top: 10px; margin-right: 0px; /* margin-bottom: 8px; */ text-align: right;}#form div:nth-child(2) div:nth-child(2){ height: 175px; width:32%; /* background-color: yellow; */ float: left; padding-left: 5px; padding-top: 5px; overflow: hidden;}#form div:nth-child(2) div:nth-child(2) input{ margin-bottom: 2px;}#form div:nth-child(2) div:nth-child(3){ height: 100%; width:37%; /* background-color: green; */ float: left;}#form div:nth-child(2) div:last-child span{ margin: 0; padding: 0; width: 100%; line-height: 15px; float: right; color: black; margin-top: 10px; text-align: left;}#form div:last-child{ height: 60px; /* background-color: crimson; */}#form div:last-child img{ margin-left: 180px; /* background-color: crimson; */}#form div:last-child input{ width: 100px; height: 32px; margin-left: 180px; /* background-color: crimson; */} js代码
var inputs = document.getElementsByTagName("input");// console.log(inputs)//验证登录名，不能含有数字长度4-8位var flag_name=false;inputs[0].onblur=function(){ var valuue_name=this.value; var reg_name_true=/[A-z]{4,8}/g; var reg_name_false=/[0-9]+/g; var span=document.getElementById("name"); if(reg_name_true.test(valuue_name)) { if(reg_name_false.test(valuue_name)) { flag_name=false; span.innerHTML="登录名不能含有数字"; span.style.display="inline"; } else if(valuue_name.length<4||valuue_name.length>8){ flag_name=false; span.innerHTML="姓名4-8位"; span.style.display="inline"; } else{ flag_name=true; span.innerHTML="√"; span.style.display="inline"; } } else if(reg_name_false.test(valuue_name)) { flag_name=false; span.innerHTML="登录名不能含有数字"; span.style.display="inline"; } else if(valuue_name=="") { flag_name=false; span.innerHTML="登录名不能为空"; span.style.display="inline"; } else{ flag_name=false; span.innerHTML="登录名格式错误"; span.style.display="inline"; }}//密码不能为空，并且密码包含的字符大等于6个且少等于16,两次输入的密码必须一致// console.log(inputs[1]);var flag_password1=falseinputs[1].onblur=function(){ // console.log(value_password1); var span=document.getElementById("password1"); var value_password1=this.value; var reg_password=/^[A-z]+[0-9]+.*/g;//密码开头为字母，且必须含有数字 if(value_password1=="") { flag_password1=false; span.innerHTML="密码不能为空"; span.style.display="inline"; } else if(reg_password.test(value_password1)) { if(value_password1.length>16||value_password1.length<6){ flag_password1=false; span.innerHTML="密码需6-16位"; span.style.display="inline"; } else{ flag_password1=true; span.innerHTML="√"; span.style.display="inline"; } } else{ flag_password1=false; span.innerHTML="密码格式错误"; span.style.display="inline"; }}//验证密码的一致性var flag_password2=false;inputs[2].onblur=function(){ var value_password1=inputs[1].value; var value_password2=this.value; var span=document.getElementById("password2"); if(value_password2=="") { flag_password2=false; span.innerHTML="密码不能为空"; span.style.display="inline"; } else if(value_password2!=value_password1) { flag_password2=false; span.innerHTML="密码不一致"; span.style.display="inline"; } else{ flag_password2=true; span.innerHTML="√"; span.style.display="inline"; }}//验证身份证号码日期1800-2020 18位最后一位可以是x或数字var flag_ID=false;inputs[3].onblur=function(){ var reg_ID=/^[1-9]\d{5}(((18|19)\d{2})|(20)[0-1]{1}[0-9]{1})((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/g; var value_ID=this.value; var span=document.getElementById("ID"); if(value_ID==""){ flag_ID=false; span.innerHTML="身份证号码不能为空"; span.style.display="inline"; } else if(reg_ID.test(value_ID)){ flag_ID=true; span.innerHTML="√"; span.style.display="inline"; } else { flag_ID=false; span.innerHTML="身份证号码格式错误"; span.style.display="inline"; }}//验证固定电话不以0开头长11位var flag_tel=false;inputs[4].onblur=function(){ var value_tel=this.value; var span=document.getElementById("tel"); var reg_tel=/^[1-9][0-9]{10}/g if(value_tel=="") { flag_tel=false; span.innerHTML="固定电话不能为空"; span.style.display="inline"; } else if(reg_tel.test(value_tel)){ flag_tel=true; span.innerHTML="√"; span.style.display="inline"; }else { flag_tel=false; span.innerHTML="固定电话格式错误"; span.style.display="inline"; }}//验证电话13 15 17 18开头var flag_mobile=false;inputs[5].onblur=function(){ var value_mobile=this.value; var span=document.getElementById("mobile"); var reg_mobile=/^(13|15|17)[0-9]{9}/g if(value_mobile=="") { flag_mobile=false; span.innerHTML="电话不能为空"; span.style.display="inline"; } else if(reg_mobile.test(value_mobile)){ flag_mobile=true; span.innerHTML="√"; span.style.display="inline"; }else { flag_mobile=false; span.innerHTML="电话格式错误"; span.style.display="inline"; }}//验证email：必须有@.且顺序正确，不能为空var falg_email=false;//email正确返回true,否则falseinputs[6].onblur=function(){ var value=this.value;var span = document.getElementById("email")var reg=/@./g;if(reg.test(value)){ // console.log(value.match(value)) span.innerHTML="√"; span.style.display="inline"; falg_email=true; }else if(value==""){ falg_email=false; span.innerHTML="邮箱格式不能为空" span.style.display="inline";}else{ falg_email=false; span.innerHTML="邮箱格式不正确" span.style.display="inline"; }}function check(){ var flag=false; if(flag_name&&flag_password1&&flag_password2&&falg_email&&flag_ID&&flag_mobile&&flag_tel) flag=true; else{ flag=false; alert("请输入正确的注册信息"); } return flag;} 完整文件
转载地址：http://sblwi.baihongyu.com/
你可能感兴趣的文章
android如何使得电阻屏在第一次开机时自动叫起屏幕校准程序
查看>>
android如何实现：当开启图案解锁时，取消滑动解锁
查看>>
Providing Ancestral and Temporal Navigation 设计高效的应用导航
查看>>
Putting it All Together: Wireframing the Example App 把APP例子用线框图圈起来
查看>>
Implementing Lateral Navigation 实现横向导航
查看>>
Implementing Ancestral Navigation 实现原始导航
查看>>
Implementing Temporal Navigation 实现时间导航
查看>>
Responding to Touch Events 响应触摸事件
查看>>
Defining and Launching the Query 定义和启动查询
查看>>
Handling the Results 处理结果
查看>>
如何内置iperf到手机中
查看>>
如何adb shell进入ctia模式
查看>>
Contacts Provider 联系人存储
查看>>
android 图库播放幻灯片时灭屏再亮屏显示keyguard
查看>>
android 图库语言更新
查看>>
android camera拍照/录像后查看图片/视频并删除所有内容后自动回到camera预览界面
查看>>
android 图库中对非mp4格式的视频去掉"修剪"功能选项
查看>>
how to disable watchdog
查看>>
android SDIO error导致wifi无法打开或者连接热点异常的问题
查看>>
android USB如何修改Serial Number or SN?
查看>>