【HTML】用户名、身份证号、邮箱、出生日期的格式验证
2024-06-15 12:26:47
直接上代码，如需要格式验证，直接找对应的就可以！
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单验证</title>
//为了使页面不是那么突兀，特地导入了这俩个bootstrap框架相关的包<link rel="stylesheet" type="text/css" href="css/bootstrap-3.3.7-dist/css/bootstrap.css"/><link rel="stylesheet" type="text/css" href="css/bootstrap-3.3.7-dist/js/bootstrap.js"/>
</head>
<body>
<div class="container"><div class="row"><div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 "></div><div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 "><h3 style="font-family: youyuan;color: blue;text-align: center"><strong>表单验证</strong></h3><hr/><form name="form"><span style="color: blue">用户名</span><input type="text" id="name" name="name" required="required" class="form-control" placeholder="用户名（6-14位）"/><span id="namespan" style="color: red"></span><br/><span style="color: blue">密码</span><input type="password" id="pwd"name="pwd" required="required" class="form-control"onclick="checkname()" placeholder="密码（4-16位）"/><span id="pwdspan"style="color: red"></span><br/><span style="color: blue">确认密码</span><input type="password" id="repwd"name="repwd" required="required" class="form-control"onclick="checkpassword()" placeholder="确认密码"/><span id="repwdspan"style="color: red"></span><br/><span style="color: blue">邮箱</span><input type="email" id="email" required="required" class="form-control"onclick="same()" placeholder="邮箱"/><span id="emailspan" style="color: red"></span><br/><span style="color: blue">身份证号</span><input type="text"name="number" id="id" required="required" class="form-control"onclick="checkemail()" placeholder="身份证号"/><span id="idspan" style="color: red"></span><br/><span style="color: blue">出生日期</span><input name="sDate" type="text" id="sDate" required="required" class="form-control"onclick="check(form)" placeholder="出生日期"/><span id="datespan" style="color: red"></span><br/><input type="button" value="检查出生日期" class="btn btn-primary"onclick="checkdate(form)"/><input type="reset" value="重置" class="btn btn-primary"/><input type="submit" value="提交" class="btn btn-primary"/></form></div><div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 "></div></div>
</div>
</body>
</html>
<script language="javascript">//检验用户名格式function checkname(){var name1 = document.form.name.value;if (name1 == "") {document.getElementById("namespan").innerHTML = "用户名不能为空！";document.form.name.focus();return false;}if (name1.length < 6 || name1.length > 14) {document.getElementById("namespan").innerHTML = "格式错误，长度6-14个字符";document.form.name.focus();// document.form.name.select();return false;}var charname1 = name1.toLowerCase();for (var i = 0; i < name1.length; i++) {var charname = charname1.charAt(i);if (!(charname >= 0 && charname <= 9) && (!(charname >= 'a' && charname <= 'z')) && (charname != '_')) {document.getElementById("namespan").innerHTML = "用户名包含非法字符";// document.form.name.select();document.form.name.focus();return false;}}document.getElementById("namespan").innerHTML = "用户名正确";return true;}//检查密码格式function checkpassword(){var div = document.getElementById("pwdspan");div.innerHTML = "";var password = document.form.pwd.value;if (password == "") {div.innerHTML = "密码不能为空";document.form.pwd.focus();return false;}if (password.length < 4 || password.length > 16) {div.innerHTML = "格式错误，密码长度为4-16位";document.form.pwd.select();return false;}div.innerHTML = "密码格式正确";return true;}//检查密码是否一样function same() {var d=document.getElementById("repwdspan");d.innerHTML="";var pValue=document.getElementById("pwd").value;if(pValue==""){//注意空的表示方法d.innerHTML="密码不能为空";return false;}/** 校验确认密码*/var rpValue=document.getElementById("repwd").value;if(rpValue!=pValue){d.innerHTML="两次密码输入不一致";return false;}d.innerHTML="输入一致";return true;}//检验邮箱function checkemail() {var d=document.getElementById("emailspan");d.innerHTML="";var eValue=document.getElementById("email").value;if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){d.innerHTML="邮箱格式错误！";}elsed.innerHTML="邮箱格式正确"}// 检验身份证号格式function checkeNO(NO){var str=NO;//在JavaScript中，正则表达式只能使用"/"开头和结束，不能使用双引号var Expression=/^\d{17}[\d|X]$|^\d{15}$/;var objExp=new RegExp(Expression);if(objExp.test(str)==true){return true;}else{return false;}}function check(form){var d=document.getElementById("idspan");d.innerHTML="";if(form.number.value==""){d.innerHTML="请输入身份证号码!";form.number.focus();return;}if(!checkeNO(form.number.value)){d.innerHTML="身份证号码格式错误!!";form.number.focus();return;}if(checkeNO(form.number.value)){d.innerHTML="身份证号码格式正确!!";}}//判断输入的日期是否正确function CheckDate(INDate){if (INDate==""){return true;}if(INDate.indexOf('-',0)!=-1){ separate="-"}else{if(INDate.indexOf('/',0)!=-1){separate="/"}else {return true;}}area=INDate.indexOf(separate,0)//获取年份subYY=INDate.substr(0,area)if(isNaN(subYY) || subYY<=0){return true;}//转换月份subMM=INDate.substr(area+1,INDate.indexOf(separate,area+1)-(area+1))if(isNaN(subMM) || subMM<=0){return true;}if(subMM.length<2){subMM="0"+subMM}//转换日area=INDate.lastIndexOf(separate)subDD=INDate.substr(area+1,INDate.length-area-1)if(isNaN(subDD) || subDD<=0){return true;}if(eval(subDD)<10){subDD="0"+eval(subDD)}NewDate=subYY+"-"+subMM+"-"+subDDif(NewDate.length!=10){return true;}if(NewDate.substr(4,1)!="-"){return true;}if(NewDate.substr(7,1)!="-"){return true;}var MM=NewDate.substr(5,2);var DD=NewDate.substr(8,2);if((subYY%4==0 && subYY%100!=0)||subYY%400==0){ //判断是否为闰年if(parseInt(MM)==2){if(DD>29){return true;}}}else{if(parseInt(MM)==2){if(DD>28){return true;}}}var mm=new Array(1,3,5,7,8,10,12); //判断每月中的最大天数for(i=0;i< mm.length;i++){if (parseInt(MM) == mm[i]){if(parseInt(DD)>31){return true;}else{return false;}}}if(parseInt(DD)>30){return true;}if(parseInt(MM)>12){return true;}return false;}
function checkdate(myform){var d=document.getElementById("datespan");d.innerHTML="";if(myform.sDate.value==""){d.innerHTML="请输入日期";myform.sDate.focus();return;}if(CheckDate(myform.sDate.value)){d.innerHTML="您输入的日期不正确！\n 请注意日期格式（如：2007/07/17或2007-07-17）以及二月是否为闰年！";myform.sDate.focus();return;}if(!CheckDate(myform.sDate.value)){d.innerHTML="您输入的日期是正确的";}
}
</script>【HTML】用户名、身份证号、邮箱、出生日期的格式验证相关推荐
- sql server 根据身份证号计算出生日期和年龄的存储过程
我这边有一个业务,需要客户填写身份证号,自动计算他的出生日期和年龄 在sql中,具体的存储过程实现是这样的: /******************************************** ...
- 在JS中根据身份证号计算出生日期和年龄
1.根据身份证号计算出生日期 var identificationCardid=document.getElementById("identificationCardid").va ...
- js中如何通过身份证号计算出生日期和年龄
在html中有如下标签 身份证号:<input type="text" id="Gra_IDCard" onChange="IDCardChan ...
- HTML身份证号校验及根据身份证号获取出生日期/性别
一.HTML的方法都写在js里 若HTML.JS.CSS在一个HTML文件中,在HTML中使用HTML需要借助<scirpt>标签,使用<script>标签的方式有两种: 一种 ...
- oracle 导出身份证号_oracle 根据身份证号计算出生日期
1.情景展示 如何根据身份证号推算出出生日期? 2.解决方案 --根据身份证号计算出生日期 SELECT DECODE(LENGTH(ID_CARD), 18, SUBSTR(ID_CARD, 7, ...
- 根据身份证号生成出生日期
/*** @创建时间:2007-5-10 下午04:26:26* @修改者:lics* @修改时间:2007-5-10 下午04:26:26* @说明:根据身份证号生成出生日期*/ package n ...
- python123身份证号掩盖出生日期_身份证号转变为出生日期
转Excel表格中根据身份证号码自动填出生日期.计算年龄 18位身份证号码转换成出生日期的函数公式:如果E2中是身份证,在F2 中求出出生日期,F2=DATE(MIDB(E2,7,4),MIDB(E2 ...
- 根据身份证号获取出生日期
先去这个地址拷贝解析身份证号码的封装方法:(直接全部拷贝) https://blog.csdn.net/weixin_44542781/article/details/116377458?spm=10 ...
- python身份证号掩盖出生日期的代码_利用Python制作全国身份证号验证及查询系统！就问你吊不吊！...
大家好哇,又是一个愉快的周末,今天本鸟给大家分享1个有趣的实战项目,用python制作"全国身份证号验证及查询系统",成品界面如下图: 本系统可以实现身份证号真伪验证,年龄.性别及 ...
最新文章
- java 逻辑校验工具_SpringBoot2.0实战（10）整合fluent-validator优雅业务校验
- Sonya and Queries CodeForces - 714C
- 原生态Vim使用快捷键
- matlab tsai手眼标定程序代码_标定系列一 | 机器人手眼标定的基础理论分析
- winform + INotifyPropertyChanged + IDataErrorInfo + ErrorProvider实现自动验证功能
- centos挂载第二块硬盘
- .NET中获取电脑名、IP地址及用户名方法
- 多功能工具箱微信小程序源码
- Android简单实现汉字笔顺动画——Java版
- 多线程编程——pthread
- Lucene Automaton（二）
- 知识图谱文献综述（第一章 知识表示与建模）
- 因为卡农，重拾《我的野蛮女友》
- 权威发布丨2022 中国开源先锋 33 人之心尖上的开源人物
- Murata村田高压电容的国产替代--赫威斯电容(HVC Capacitor)
- 使用k3s部署轻量Kubernetes集群快速教程
- NetAlly Aircheck G2无线网络测试仪技术参数
- 图像中里面的Ground Truth是什么意思
- PATA 1065 A+B and C (64bit) (20分)
- Vs2013未能正确加载“Microsoft.VisualStudio.Editor.Implementation.EditorPackage”包 解决方案