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" ...
随机推荐
- [Leetcode]014. Longest Common Prefix
public class Solution { public String longestCommonPrefix(String[] strs) { if(strs == null || strs.l ...
- C语言中的副作用、序列点、完整表达式
C语言中有个术语叫:副作用 副作用其实是对数据对象或文件的修改.(数据对象的定义是:用于存储值的数据存储区域) 例如语句 states = 50; 从C语言的角度来讲:这个赋值表达式的副作用是将变量的 ...
- 读经典——《CLR via C#》(Jeffrey Richter著) 笔记_元数据
1.元数据简介 全称:metadata 属性:数据表集合 产地:面向 CLR 的编译器在托管模块中生成 2.元数据内部结构及与托管模块的关系 [概述] 托管模块中包含着元数据,元数据是由一组数据表组成 ...
- CMOS和BIOS
CMOS是一类特殊的RAM(断电时将丢失其存储内容) BIOS是软件,是程序! CMOS是芯片,是硬件! 实际上我们是通过BIOS这个程序,去设置COMS的参数的.. COMS是一块芯片,继承在主 ...
- python -- Microsoft Visual C++ 14.0 is required. Get it with "Microsoft Visual C++ Build Tools": http://landinghub.visualstudio.com/visual-cpp-build-tools
用python读取hive数据,引用下面包. #!/usr/bin/env python import pyhs2 as hive 先按照它 pip install pyhs2 出现错误 Collec ...
- Python Numpy Array
Numpy 是Python中数据科学中的核心组件,它给我们提供了多维度高性能数组对象. Arrays Numpy.array dtype 变量 dtype变量,用来存放数据类型, 创建数组时可以同 ...
- CENTOS7下安装REDIS4.0.11
拷贝收藏私用,别无他意,原博客地址: https://www.cnblogs.com/zuidongfeng/p/8032505.html 1.安装redis 第一步:下载redis安装包 wget ...
- jquery中beforeSend和complete的使用 --- 提高用户体验&&设置请求头
beforeSend方法的用户主要有下面几个: 第一:用于在发送ajax请求之前设置请求头 即作为前端,如果我们希望在发送数据之前设置请求头,就可以像下面这么做: beforeSend: functi ...
- vue进阶 --- 实例演示
这篇博客将通过一个实例来对vue构建项目的过程有一个了解. 主要用到的知识点如下所示: vue-router 2.0路由配置 router-view 和 router-link的使用 transiti ...
- Windows 10家庭版升级到专业版，系统蓝屏
Log Name: SystemSource: Microsoft-Windows-DistributedCOMDate: 9/9/2018 7:56:57 PMEvent ID: 10016Task ...