JavaScript正则表达式实现登录验证功能
作者:木棉时间:2026-10-23 16:46:34浏览:545
本文提供基于JavaScript的正则表达式登录验证完整代码。通过HTML表单接收账号与密码,利用JS监听按钮事件,使用正则表达式对输入内容进行格式校验,实现前端登录功能的即时反馈与交互逻辑。
JavaScript登录验证实现
本文分享了一个使用JavaScript正则表达式进行登录验证的具体代码示例,供读者参考学习。
具体实现代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>qq登录模拟测试</title>
</head>
<body>
<form name="form1" action="#" method="post">
<input type="text" placeholder="账号" name="username" ><br><br>
<input type="password" placeholder="密码" name="password" id="pw">
<input type="button" name="" id="btn" value="点击显示" />
<br><br>
<input name="Submit" type="button" onClick="check()" value="登录"/>
</form>
</body>
<!--账号密码验证-->
<script type="text/javascript">
function check(){
/*非空*/
if(form1.username.value==""){
alert("账号不能为空");
form1.username.focus();
return false;
}
/*含非数字、首字母为0 /^[0-9]*$/*/
var number=/^(0|[1-9][0-9]*)$/;
var objExp1=new RegExp(number);
if(objExp1.test(form1.username.value)==false){
alert("账号不能含非数字和首字符为0");
form1.username.focus();
return false;
}
/*账号小于6位数*/
if(form1.username.value.length < 6){
alert("账号位数过小,请输入6-11位数字");
form1.username.focus();
return false;
}
/*账号大于11位数*/
if(form1.username.value.length > 11){
alert("账号位数过大,请输入6-11位数字");
form1.username.focus();
return false;
}
/*密码非空*/
if(form1.password.value==""){
alert("密码不能为空");
form1.password.focus();
return false;
}
/*密码含有非符号、字母、数字以外字*/
var illegal=/^[0-9a-zA-Z!~@#$%^&*()_+`\-={}:";'<>?,.\/]*$/g;
var objExp2=new RegExp(illegal);
if(objExp2.test(form1.password.value)==false){
alert("密码含有非法字符");
form1.password.focus();
return false;
}
/*密码小于6位数*/
if(form1.password.value.length < 6){
alert("密码位数过小,请输入6-16位数字");
form1.password.focus();
return false;
}
/*密码大于16位数*/
if(form1.password.value.length > 16){
alert("密码位数过大,请输入6-16位数字");
form1.password.focus();
return false;
}
form1.submit();
}
</script>
<!--回显密码-->
<script type="text/javascript">
window.οnlοad=function(){
var btn=document.getElementById("btn");
var password=document.getElementById("pw")
btn.οnmοusedοwn=function(){
password.type="text"
};
btn.οnmοuseup=btn.οnmοuseοut=function(){
password.type="password"
}
}
</script>
</html>
运行后的界面效果如下:

以上就是本文的全部内容,希望能为读者的学习提供有益帮助,同时也感谢大家的支持。
作者最新文章
JavaScript怎么准确判断数据类型:typeof、instanceof与Object.prototype.toString
2026-11-05 17:09:21
JS中将数组和对象混合组装为JSON字符串
2026-11-05 16:41:42
JS运算符优先级与结合性的区别是什么?
2026-11-05 13:22:02
JS Map怎么只遍历Key或Value
2026-11-05 13:00:36
D3.js 与 ECharts 选型对比:灵活性 vs 开发效率
2026-11-05 09:45:01
