快捷導(dǎo)航

JavaScript正則表達式驗證登錄實例

更新時間：2020年03月18日 14:44:22 作者：ByRisonBoy

這篇文章主要為大家詳細(xì)介紹了JavaScript正則表達式驗證登錄實例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js正則表達式驗證登錄的具體代碼，供大家參考，具體內(nèi)容如下

代碼片段：

<!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;
}
 
/*含非數(shù)字、首字母為0 /^[0-9]*$/*/
var number=/^(0|[1-9][0-9]*)$/; 
var objExp1=new RegExp(number); 
if(objExp1.test(form1.username.value)==false){
alert("賬號不能含非數(shù)字和首字符為0");
form1.username.focus();
return false;
}
 
/*賬號小于6位數(shù)*/
if(form1.username.value.length < 6){
alert("賬號位數(shù)過小，請輸入6-11位數(shù)字");
form1.username.focus();
return false;
}
 
/*賬號大于11位數(shù)*/
if(form1.username.value.length > 11){
alert("賬號位數(shù)過大，請輸入6-11位數(shù)字");
form1.username.focus();
return false;
}
 
/*密碼非空*/
if(form1.password.value==""){
alert("密碼不能為空");
form1.password.focus();
return false;
}
 
/*密碼含有非符號、字母、數(shù)字以外字*/
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位數(shù)*/
if(form1.password.value.length < 6){
alert("密碼位數(shù)過小，請輸入6-16位數(shù)字");
form1.password.focus();
return false;
}
 
/*密碼大于16位數(shù)*/
if(form1.password.value.length > 16){
alert("密碼位數(shù)過大，請輸入6-16位數(shù)字");
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>

結(jié)果顯示：