正则表达式和表单验证

最新推荐文章于 2024-02-06 11:07:20 发布
最新推荐文章于 2024-02-06 11:07:20 发布
阅读量323 收藏
点赞数
分类专栏： js学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fangyuwuzhu/article/details/80068429
版权
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;font-family: "微软雅黑";}
.conter{
width: 800px;
margin: auto;
}
.conter p{
font-size: 25px;
font-family: "微软雅黑";
color: #398439;
font-weight: bold;
}
.conter input{
width: 500px;
height: 50px;
margin: 10px;
padding-left: 10px;
font-size: 14px;
font-family: "微软雅黑";
outline: none;
border-radius: 3px;
border: 1px solid #CCCCCC;
}
#submit{
background-color: #66AFE9;
font-size: 22px;
font-weight: bold;
color: #EEEEEE;
width: 511px;
height: 50px;
}
#submit:hover{
background-color: #2B669A;
}
.nicknameTips{
display: none;
}
.nicknameTips img{
margin-right: 6px;
margin-left: 10px;
}
.nicknameTips span{
font-size: 14px;
}

.passwordTips{
display: none;
}
.passwordTips img{
margin-right: 6px;
margin-left: 10px;
}
.passwordTips span{
font-size: 14px;
}


.upasswordTips{
display: none;
}
.upasswordTips img{
margin-right: 6px;
margin-left: 10px;
}
.upasswordTips span{
font-size: 14px;
}


.phoneTips{
display: none;
}
.phoneTips img{
margin-right: 6px;
margin-left: 10px;
}
.phoneTips span{
font-size: 14px;
}

.title{
margin-right: 6px;
margin-left: 10px;
font-size: 14px;
color: #000000;
}

</style>
</head>
<body>
<div class="conter">
<p>QQ注册</p>
<form action="模态框.html" οnsubmit="return checkSubmit()">
<div>
<input type="text" placeholder="昵称" id="nickname"/>
<div class="nicknameTips" id="nicknameTips">
<div>
<img src="img/error.png" align="center" /><span>昵称不能为空</span>
</div>
</div>
</div>
<div>
<input type="password" placeholder="密码" id="password"/>
<div class="passwordTips" id="passwordTips">
<div>
<img  id="space" src="img/green.png" align="center"/><span>不能包含空格</span>
</div>
<div>
<img id="length" src="img/info.png" align="center" /><span>长度在8~16之间</span>
</div>
<div>
<img id="content" src="img/info.png" align="center" /><span>必须包含数字、字母、符号中的其中两个</span>
</div>
</div>
</div>
<div>
<input type="password" placeholder="确认密码" id="upassword"/>
<div class="upasswordTips" id="upasswordTips">
<div>
<img src="img/error.png" align="center" /><span>两次输入的密码不相同</span>
</div>
</div>
</div>
<div>
<input type="text" placeholder="手机号码" id="phone"/>
<div class="phoneTips" id="phoneTips">
<div>
<img id="phoneImg" src="img/error.png" align="center" /><span>长度为11位的有效手机号码</span>
</div>
</div>
</div>
<div>
<input type="submit" id="submit" value="立即注册"/>
</div>
<div>
<img src="img/checkbox_check.png" id="checkbox" align="center" checked="true" /><span class="title" id="tit">我已阅读并同意相关规定和隐私协议</span>
</div>
</form>
</div>
<script>

window.οnlοad=function(){
//给多选框img定义点击事件
var checkbox=document.getElementById("checkbox");
checkbox.οnclick=function(){
//获取图片中的自定义属性的
var checked=this.getAttribute("checked");
if (checked=="true") {
this.src="img/checkbox_normal.png";
this.setAttribute("checked","false");
document.getElementById("tit").style.color="#000000";
} else{
this.src="img/checkbox_check.png";
this.setAttribute("checked","true");
document.getElementById("tit").style.color="#9D9D9D";
}
}

//给昵称注册获取焦点事件
var nickname=document.getElementById("nickname");
nickname.οnfοcus=function(){
this.style.borderColor="#6495ED";
document.getElementById("nicknameTips").style.display="none";
}
//给昵称注册失去焦点事件
nickname.οnblur=nicknamecheck;


//给密码注册获取焦点事件
var password=document.getElementById("password");
password.οnfοcus=function(){
this.style.borderColor="#6495ED";
document.getElementById("passwordTips").style.display="block";
}
//给密码注册失去焦点事件
password.οnblur=function(){
//调用验证密码的方法
var result=checkpassword();
if (result==true) {
this.style.borderColor="green";
document.getElementById("passwordTips").style.display="none";
} else{
this.style.borderColor="red";
}
}

//给确认密码注册获得焦点事件
var upassword=document.getElementById("upassword");
upassword.οnfοcus=function(){
this.style.borderColor="#6495ED";
document.getElementById("upasswordTips").style.display="none";
}
//给确认密码注册失去焦点事件
upassword.οnblur=upasswordcheck;


//给手机注册获得焦点事件
var phone=document.getElementById("phone");
phone.οnfοcus=function(){
this.style.borderColor="#6495ED";
document.getElementById("phoneTips").style.display="none";
}
//给手机注册失去焦点事件
phone.οnblur=function(){
var result=checkphone();
if (result==true) {
this.style.borderColor="green";
document.getElementById("phoneTips").style.display="none";
} else{
this.style.borderColor="red";
document.getElementById("phoneTips").style.display="block";
}
}
}
//检测用户名是否合法的函数
function nicknamecheck(){
var value=document.getElementById("nickname").value;
if (value=="") {
document.getElementById("nickname").style.borderColor="red";
document.getElementById("nicknameTips").style.display="block";
return false;
} else{
document.getElementById("nickname").style.borderColor="green";
document.getElementById("nicknameTips").style.display="none";
return true;
}
}
//检测确认密码与密码是否相同的函数
function upasswordcheck(){
var pwdv=document.getElementById("password").value;
var upwdv=document.getElementById("upassword").value;
if (pwdv==upwdv) {
document.getElementById("upassword").style.borderColor="green";
document.getElementById("upasswordTips").style.display="none";
return true;
} else{
document.getElementById("upassword").style.borderColor="red";
document.getElementById("upasswordTips").style.display="block";
return false;
}
}

//密码框输入内容发生改变时 触发的函数,有任何一个条件不满足则返回false,如果所有的条件都满足返回true
function checkpassword(){
var password=document.getElementById("password");
var b=true;
var value=password.value;
//使用正则表达式判断密码的合法性
var numReg = /[0-9]{1,}/;
var lettReg = /[a-zA-Z]{1,}/;
var codeReg = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]");
var spaceReg = /\s{1,}/;
if (spaceReg.test(value)) {
document.getElementById("space").src="img/info.png";
b=false;
} else{
document.getElementById("space").src="img/green.png";
}
if (value.length>=8&&value.length<=16) {
document.getElementById("length").src="img/green.png";
} else{
document.getElementById("length").src="img/info.png";
b=false;
}

//判断密码的内容必须满足至少两个正则表达式
if (numReg.test(value)&&lettReg.test(value)) {
document.getElementById("content").src="img/green.png";
} else if(numReg.test(value)&&codeReg.test(value)){
document.getElementById("content").src="img/green.png";
}else if(lettReg.test(value)&&codeReg.test(value)){
document.getElementById("content").src="img/green.png";
}else{
document.getElementById("content").src="img/info.png";
b=false;
}
return b;
}
//手机号码输入框的内容发生改变时,判断手机号码是否合法的函数,返回判断结果
function checkphone(){
var value=document.getElementById("phone").value;
var phoneReg=/1[3,4,5,7,8]\d{9}/;
if (phoneReg.test(value)&&value.length==11) {
document.getElementById("phoneImg").src="img/green.png";
return true;
} else{
document.getElementById("phoneImg").src="img/error.png";
return false;
}
}
//定义提交表单时提交的事件
function checkSubmit(){
var nicknamecheckSub=nicknamecheck();
var checkpasswordSub=checkpassword();
var checkphoneSub=checkphone();
var upasswordcheckSub=upasswordcheck();

var checkCheckBoxResult=document.getElementById("checkbox").getAttribute("checked");
alert(checkCheckBoxResult);
if (checkCheckBoxResult=="false") {
alert("请阅读服务协议并同意");
return false;
} else{
if (nicknamecheckSub==true&&checkpasswordSub==true&&checkphoneSub==true&&upasswordcheckSub==true) {
return true;
    } else{
return false;
    }
}


}
</script>
</body>

</html>



愚城
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
正则表达式表单验证
weixin_45743799的博客
11-24 1257
使用正则表达式验证表单中输入的内容是否符合格式。 原理分析： 1.失去焦点和获取焦点 2.获取内容 3.判断是否符合 4.不符合显示错误号符合显示对号 效果演示 代码演示 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></...
密码正则表达式大全
qq_59125846的博客
03-15 6232
密码正则表达式大全
密码正则表达式
qq_39375778的博客
06-04 1万+
常用密码正则表达式 必须包含一个大写，一个小写字母，且长度为8到16位 ^(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9~!@&%#_]{8,16}$ 必须包含一个大写，一个小写字母，一个特殊字符，且长度为8到16位 ^(?=.*[a-z])(?=.*[A-Z])(?=.*[~!@&%#_])[a-zA-Z0-9~!@&%#_]{8,16}$...
正则表达式：密码规则
08-06 9103
密码设定规则：8-16位，其中必须包含数字、小写字母、大写字母；字符仅支持“！@#¥%”，不支持空格 1、(?!.*[！·（）{}【】“”：；，》￥、。‘’——\\s-……%\\n]) 表示的是不含中文的特殊字符，以及空格与回车，里面的符合可以自动补充或删除； 2、(?=.*[a-zA-Z]) 表示含小写或大写的英文字母 3、(?=.*\\d) 表示必须匹配到数字 ;小写字母(?=.*[a-z]);大写字母(?=.*[A-Z]) 4、(?=.*[~!@#$%^&*()_+`\\-
正则表达式密码验证
最新发布
dwoiauda的博客
02-06 2562
正则表达式验证密码
密码正则表达式的整合
weixin_41997724的博客
03-19 1530
密码的正则表达式整合 1、只能为纯数字 var reg = /^\d+$|^\d+[.]?\d+$/; 2、只能为纯字母（不区分大小写） var reg = /^[a-zA-Z]+$/; 3、只能为数字或者字母（不包含特殊字符） var reg = /^[0-9a-zA-Z]+$/; 4、只能为数字的11位字符（不包含特殊字符以及字母） var reg = /^[0-9]{1...
jQuery基于正则表达式的表单验证功能示例
10-20
在介绍jQuery基于正则表达式的...综上所述，jQuery结合正则表达式可以为表单验证提供灵活、高效和可靠的方案。通过本文的示例，读者可以了解到如何在实际项目中应用这些技术来提升用户界面的交互体验和数据的准确性。
JavaScript通过正则表达式实现表单验证电话号码
12-01
总的来说，通过理解正则表达式的工作原理以及如何在JavaScript中使用它们，我们可以创建强大的表单验证功能，确保用户输入的电话号码符合预期的格式。对于更复杂的应用场景，可能需要结合其他验证库或服务来进一步...
详解正则表达式表单验证实例
12-13
下面通过一段代码给大家分析表单验证正则表达式，具体代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-"> <title>正则验证常用表单方法</title> &...
JavaScript 使用正则表达式进行表单验证的示例代码
12-12
JavaScript 表单验证正则表达式大全利用正则表达式判断是否是0-9的阿拉伯数字 代码如下: function regIsDigit(fData) { var reg = new RegExp(“^[0-9]$”); return (reg.test(fData)); } 利用这则表达式获取字符串...
密码校验常用正则表达式
weixin_42333548的博客
12-15 9728
至少八个字符，至少一个字母和一个数字： "^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$" 至少八个字符，至少一个字母，一个数字和一个特殊字符： "^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$" 最少八个字符，至少一个大写字母，一个小写字母和一个数字： "^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$" 至少八
正则表达式-几种常见的密码校验
热门推荐
T的专栏
12-31 1万+
首先说一下密码必须是6~18位之间的数字，正则表达式为"^[0-9]{6,18}$"，其中[0-9]表示必须是数字，{6,18}表示必须在6到18位之间，代码如下： 运行结果如下 接下来是密码中只能包含字母和数字的，正则表达式为："^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$"其中(?![0-9]+$)表示排除掉只有数字的组合，(?![a-zA-Z]+$)表示排除掉只有字母的组合，[0-9A-Za-z]表示必须有字母或数字，代码..
正则表达式匹配密码
weixin_42213176的博客
01-04 1196
\̲s̲|^)和(?（3）空格符可以识别，如果有空格例： 1A223334@ 2323222 那么会分两部分进行识别，而不是识别成一个整体。:13[0-9]|14[0,5,7]|133|199)开头的，不匹配后8位中有8位到4位重复的这种数据。筛选第0位-第4位开始的不重复位数： (?\d{0,4}(\d)\1{3,7})\d{8}:13[0-9]|14[0,5,7]|133|199)(\d)\1{3,7}).*(\d)\1{3,7})筛选连续重复位数4-8位： (\d)\1{3,7}
密码的正则表达式
chongqingnantian的专栏
04-13 342
需求：1、长度8~16位；2、数字、字母、符号至少包含两种。   ((?=.*\d)(?=.*\D)|(?=.*[a-zA-Z])(?=.*[^a-zA-Z]))^.{8,16}$解释：^.{8,16}$ # 密码长度为8~16位((?=.*\d)(?=.*\D)|(?=.*[a-zA-Z])(?=.*[^a-zA-Z])) # 数字、字母、符号至少包含两种。数字、字母、字符至少包含两种，...
常用的javaScript正则表达式
weixin_30781107的博客
07-08 2043
1. 用户名正则 //用户名正则，4到16位（字母，数字，下划线，减号） var uPattern = /^[a-zA-Z0-9_-]{4,16}$/; //输出 true console.log(uPattern.test("iFat3")); 复制代码2. 密码强度正则 //密码强度正则，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符 var pPattern = /^....
正则表达式之密码效验（检验密码是含有小写字母、大写字母、数字）
zhaoshuliok的博客
11-09 1万+
公司新系统需要实现一个注册功能，需要写一个正则表达式来检验一个密码是否含有小写字母、大写字母、数字....,且密码长度为6-12位   正则表达式:  ^(?![A-Z]+$)(?![a-z]+$)(?!\d+$)(?![\W_]+$)\S{6,16}$ 解析： 一、 首先分开来看这个正则表达式每个小部分的含义 （1）(?![A-Z]+$)
js实现图片自动切换
fangyuwuzhu的博客
09-18 1万+
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;     &lt;meta charset="UTF-8"&gt;     &lt;title&gt;图片切换&lt;/title&gt;     &lt;style type="text/css"&gt;         .
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值