JavaScript 正则表单验证（用户名、密码、确认密码、手机号、座机号、身份证号）
1、关于JavaScript表单验证，如果使用双向绑定的前端js框架，会更容易的多。但是博主还是建议大家不要脱离源生js本身。因为源生js才是王道。
注意：
a、代码中的错误提示可能会没有，在代码中找到 “错误.jpg” 图片，自己制作一个
b、验证的判断已经完成，只需要根据自己的验证规则进行表单验证，更换自己的正则表达式。
c、博主将错误提示图片插入本文档中。需要更名为 “错误.jpg”,放到与html根目录下方可使用。
（错误提示图片）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1">
<form action="正则验证手机号.html" name="form1" method="post" onsubmit="return test()">
<tr>
<td align="right">用户名：</td>
<td><input type="text" name="username"></td>
<td><span id="namemsg">*</span></td>
</tr>
<tr>
<td align="right">密码：</td>
<td><input type="password" name="pwd"></td>
<td><span id="pwdmsg">*</span></td>
</tr>
<tr>
<td align="right">确认密码：</td>
<td><input type="password" name="pwd1"></td>
<td><span id="pwd1msg">*</span></td>
</tr>
<tr>
<td align="right">手机号：</td>
<td><input type="text" name="phone"></td>
<td><span id="iphone1">*</span></td>
</tr>
<tr>
<td align="right">座机号：</td>
<td><input type="text" name="phone1"></td>
<td><span id="iphone2">*</span></td>
</tr>
<tr>
<td align="right">身份证号：</td>
<td><input type="text" name="sfzid"></td>
<td><span id="sfzmsg">*</span></td>
</tr>
<tr>
<td colspan="3">
<input type="submit" name="sub" value="注册">
<input type="reset" name="ret" value="重置" onclick="test1()">
</td>
</tr>
</form>
</table> <script type="text/javascript">
//用户名验证
document.form1.username.onkeyup=function(){
var reg=/^[a-zA-Z]{1}[A-Z|a-z|0-9]{5,29}/;
if(reg.test(this.value)&&this.value.length>=6&&this.value.length<=30){
document.getElementById("namemsg").innerHTML="输入正确";
}else{
document.getElementById("namemsg").innerHTML="<img src='错误.jpg' width='15' height='15'>";
}
}
//密码验证
document.form1.pwd.onkeyup=function(){
var reg1=/[A-Za-z]+[0-9]+/;
if(reg1.test(this.value)&&this.value.length>=6&&this.value.length<=8){
document.getElementById("pwdmsg").innerHTML="输入正确";
}else{
document.getElementById("pwdmsg").innerHTML="<img src='错误.jpg' width='15' height='15'>";
}
}
//确认密码
document.form1.pwd1.onkeyup=function(){
if(this.value==document.form1.pwd.value&&this.value!=""){
document.getElementById("pwd1msg").innerHTML="输入正确";
}else{
document.getElementById("pwd1msg").innerHTML="<img src='错误.jpg' width='15' height='15'>";
}
}
//手机号验证
document.form1.phone.onkeyup=function(){
var reg2=/^(13|14|15|17|18)[0-9]{9}/;
if(reg2.test(this.value)&&this.value.length==11){
document.getElementById("iphone1").innerHTML="输入正确";
}else{
document.getElementById("iphone1").innerHTML="<img src='错误.jpg' width='15' height='15'>";
}
}
//座机号验证
document.form1.phone1.onkeyup=function(){
var reg3=/^[0-9]{3,4}(\-{1})[0-9]{7,8}/;
if(reg3.test(this.value)&&this.value.length==13||this.value.length==12){
document.getElementById("iphone2").innerHTML="输入正确";
}else{
document.getElementById("iphone2").innerHTML="<img src='错误.jpg' width='15' height='15'>";
}
}
//身份证号验证
document.form1.sfzid.onkeyup=function(){
var reg4=/^\d{17}[(0-9)|X|x ]{1}/;
if(reg4.test(this.value)&&this.value.length==18){
document.getElementById("sfzmsg").innerHTML="输入正确";
}else{
document.getElementById("sfzmsg").innerHTML="<img src='错误.jpg' width='15' height='15'>";
}
} //注册按钮方法
function test(){
var str="输入正确"
if(document.getElementById("namemsg").innerHTML!==str){
document.getElementById("namemsg").innerHTML="<img src='错误.jpg' width='15' height='15'>";
document.form1.username.focus();
document.form1.username.value="";
return false;
}
if(document.getElementById("pwdmsg").innerHTML!==str){
document.getElementById("pwdmsg").innerHTML="<img src='错误.jpg' width='15' height='15'>";
document.form1.pwd.focus();
document.form1.pwd.value="";
return false;
}
if(document.getElementById("pwd1msg").innerHTML!==str){
document.getElementById("pwd1msg").innerHTML="<img src='错误.jpg' width='15' height='15'>";
document.form1.pwd1.focus();
document.form1.pwd1.value="";
return false;
}
if(document.getElementById("iphone1").innerHTML!==str){
document.getElementById("iphone1").innerHTML="<img src='错误.jpg' width='15' height='15'>";
document.form1.phone.focus();
document.form1.phone.value="";
return false;
}
if(document.getElementById("iphone2").innerHTML!==str){
document.getElementById("iphone2").innerHTML="<img src='错误.jpg' width='15' height='15'>";
document.form1.phone1.focus();
document.form1.phone.value="";
return false;
}
}
</script>
</body>
</html>
JavaScript 正则表单验证（用户名、密码、确认密码、手机号、座机号、身份证号）的更多相关文章
- 第一百五十一节，封装库--JavaScript，表单验证--密码确认验证--回答验证--电子邮件验证加自动补全
封装库--JavaScript,表单验证--密码确认验证--回答验证--电子邮件验证加自动补全 效果图 html <div id="reg"> <h2 class ...
- 第一百五十节，封装库--JavaScript，表单验证--密码验证
封装库--JavaScript,表单验证--密码验证 效果图 html <div id="reg"> <h2 class="tuo">& ...
- 第一百四十九节，封装库--JavaScript，表单验证--验证用户名
封装库--JavaScript,表单验证--验证用户名 注册验证功能,顾名思义就是验证表单中每个字段的合法性,如果全部合法才可以提交表单. 效果图 聚集光标时 信息不合法是 信息合法时 html &l ...
- 第一百五十四节，封装库--JavaScript，表单验证--提交验证
封装库--JavaScript,表单验证--提交验证 将表单的所有必填项,做一个判断函数,填写正确时返回布尔值 最后在提交时,判断每一项是否正确,全部正确才可以 提交 html <div id= ...
- 第一百五十三节，封装库--JavaScript，表单验证--备注字数验证
封装库--JavaScript,表单验证--备注字数验证 效果图 html <div id="reg"> <h2 class="tuo"> ...
- 第一百五十二节，封装库--JavaScript，表单验证--年月日注入
封装库--JavaScript,表单验证--年月日注入 效果图 html <div id="reg"> <h2 class="tuo"> ...
- JavaScript：表单验证模型
之前做的验证提示以弹框的形式出现太丑陋了,不符合标准的验证提示.如果要想进行更好的数据验证操作,那么必须进行一些模块化设计,通过表单样式的改变来提示.其实,一般的数据验证无非就是那么几种,例如: 大多 ...
- JavaScript常用表单验证正则表达式（身份证、电话号码、邮编、日期、IP等）
身份证正则表达式 //身份证正则表达式(15位)isIDCard1=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;//身份证正则表达式 ...
- JavaScript实现表单验证_02
注册3次错误,最终的结果: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
随机推荐
- JS模式和原型精解
首先需要知道的是 模式只是思想.不要用 结构 看模式. ES中函数是对象,因此函数也有属性和方法. 每个函数含有两个属性: length 和 prototype 每个函数含有两个非继承的方法: app ...
- fsockopen函数被禁用的解决方法
判断fsockopen 是否可用:function_exists('fsockopen');如果没有开启 一.开启fsockopen函数 修改php.ini,将 disable_functions = ...
- 求（3+开根5） N次方的整数部分最后3位
求(3+开根5) N次方的整数部分最后3位,请补足前导零 . 分析:首先(1)=(3+开根5) N次方的展开为 an + bn * 根号5 的形式 . 同时也有 (2)=(3-开根5) N次方 = ...
- POJ 3659 Cell Phone Network 最小支配集模板题（树形dp）
题意:有以个 有 N 个节点的树形地图,问在这些顶点上最少建多少个电话杆,可以使得所有顶点被覆盖到,一个节点如果建立了电话杆,那么和它直接相连的顶点也会被覆盖到. 分析:用最少的点覆盖所有的点,即为求 ...
- Linux多线程及线程同步简单实例
一.多线程基本概念 1. 线程的基本概念 ① 线程就是轻量级的进程 ②线程和创建他的进程共享代码段.数据段 ③线程拥有自己的栈 2. 在实际应用中,多个线程往往会访问同一数据或资源,为避免线程之间相互 ...
- spring aop 原理学习
@EnableAspectJAutoProxy: @Import(AspectJAutoProxyRegistrar.class) 实际是创建了一个以org.springframework.aop.c ...
- 快速排序算法的实现 && 随机生成区间里的数 && O（n）找第k小 && O(nlogk)找前k大
思路:固定一个数,把这个数放到合法的位置,然后左边的数都是比它小,右边的数都是比它大 固定权值选的是第一个数,或者一个随机数 因为固定的是左端点,所以一开始需要在右端点开始,找一个小于权值的数,从左端 ...
- python的基础数据类型
Python基础数据类型 定义: int => 数字类型 str => 字符串数据类型 bool =>布尔值,True False list 列表,用来存放大量数据 [ ...
- ZK典型应用场景
1. 数据发布/订阅--动态获取数据 2.Master选举 a). 利用Zk会保证无法重复创建一个已经存在的节点 b). 多个客户端同时创建,创建成功的即是master,并监控master节点,一旦m ...
- Day5下
T1 #include<iostream> #include<cstring> #include<cstdio> #include<algorithm> ...