JavaScript正则表达式验证登录实例


Posted in Javascript onMarch 18, 2020

本文实例为大家分享了js正则表达式验证登录的具体代码,供大家参考,具体内容如下

代码片段:

<!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正则表达式验证登录实例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript实现的listview效果
Apr 28 Javascript
Javascript实现的鼠标经过时播放声音
May 18 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
Jan 24 Javascript
jquery ajax中使用jsonp的限制解决方法
Nov 22 Javascript
利用window.name实现windowStorage代码分享
Jan 02 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
Aug 15 Javascript
编写高性能Javascript代码的N条建议
Oct 12 Javascript
AngularJS指令中的绑定策略实例分析
Dec 14 Javascript
详解JS模块导入导出
Dec 20 Javascript
基于express中路由规则及获取请求参数的方法
Mar 12 Javascript
webpack v4 从dev到prd的方法
Apr 02 Javascript
浅谈vuex为什么不建议在action中修改state
Feb 02 Javascript
JS正则表达式验证密码强度
Mar 18 #Javascript
原生js实现密码强度验证功能
Mar 18 #Javascript
JavaScript实现密码强度实时验证
Mar 18 #Javascript
js如何验证密码强度
Mar 18 #Javascript
js验证密码强度解析
Mar 18 #Javascript
js实现超级玛丽小游戏
Mar 18 #Javascript
vue 封装 Adminlte3组件的实现
Mar 18 #Javascript
You might like
Terran兵种介绍
2020/03/14 星际争霸
PHP抽象类 介绍
2012/06/13 PHP
PHP解决中文乱码
2017/04/28 PHP
PHP的mysqli_sqlstate()函数讲解
2019/01/23 PHP
深入理解JavaScript系列(4) 立即调用的函数表达式
2012/01/15 Javascript
文本框获得焦点和失去焦点的判断代码
2012/03/18 Javascript
document.documentElement的一些使用技巧
2013/04/18 Javascript
node.js中的console.warn方法使用说明
2014/12/09 Javascript
jQuery仿天猫实现超炫的加入购物车
2015/05/04 Javascript
jquery实现漂亮的二级下拉菜单代码
2015/08/26 Javascript
详解iframe与frame的区别
2016/01/13 Javascript
JavaScript时间操作之年月日星期级联操作
2016/01/15 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
2016/05/28 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
2016/11/21 Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
2017/07/17 Javascript
基于Vue单文件组件详解
2017/09/15 Javascript
仿ElementUI实现一个Form表单的实现代码
2019/04/23 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
2020/04/13 Javascript
[03:16]DOTA2完美大师赛主赛事首日集锦
2017/11/23 DOTA
Python脚本实现DNSPod DNS动态解析域名
2015/02/14 Python
进一步探究Python中的正则表达式
2015/04/28 Python
python嵌套函数使用外部函数变量的方法(Python2和Python3)
2016/01/31 Python
Python中操作mysql的pymysql模块详解
2016/09/13 Python
Python(Django)项目与Apache的管理交互的方法
2018/05/16 Python
python文件拆分与重组实例
2018/12/10 Python
深入了解Python枚举类型的相关知识
2019/07/09 Python
详解CSS3阴影 box-shadow的使用和技巧总结
2016/12/03 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(二)
2013/01/21 HTML / CSS
如何使用PHP session
2015/04/21 面试题
大专生工程监理求职信
2013/10/04 职场文书
评析教师个人的自我评价
2014/02/19 职场文书
高三毕业典礼演讲稿
2014/05/13 职场文书
机关搬迁方案
2014/05/18 职场文书
党员群众路线个人整改措施思想汇报
2014/10/12 职场文书
博士论文答辩开场白
2015/06/01 职场文书
2019军训心得体会
2019/06/27 职场文书