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

本文实例为大家分享了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>

结果显示:

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

(0)

相关推荐

  • js登录滑动验证的实现(不滑动无法登陆)

    js的判断这里是根据滑块的位置进行判断,应该是用一个flag判断 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <% Str

  • javascript和jquery分别实现用户登录验证

    在上一篇文章http://www.jb51.net/article/83504.htm中,用javascript实现了用户验证,但并没有对密码进行验证,这次追加了这个功能,并分别用javascript和jquery实现. 一.用jquery的ajax实现的关键代码 实现如下 /*jquery实现 $(document).ready(function(){ $("#account").blur(function(event) { $.ajax({ type:"GET"

  • Ionic+AngularJS实现登录和注册带验证功能

    登录: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <li

  • 原生js验证简洁注册登录页面

    序 一个以js验证表单的简洁的注册登录页面,不多说直接上图 效果 主要文件 完整代码 1 sign_up.html 注册表单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>sign-up</title> <link rel="stylesheet" href="css

  • JSP实现登录功能之添加验证码

    jsp登陆验证,网页登陆验证带验证码校验,登录功能之添加验证码 part_1:专门用于生成一个验证码图片的类:VerificationCode.Java package cn.mike.javase.test; import java.awt.Color; import java.awt.Font; import java.awt.Graphics2D; import java.awt.image.BufferedImage; import java.io.File; import java.i

  • HTML页面登录时的JS验证方法

    开发一个注册的HTML页面, 用于搜集用户的注册信息.包括: 姓名(不能为空), 年龄(必须超过17岁), 体重(30-150kg), 班级(下拉列表),登陆密码(至少8位长).确认密码(和登录密码一致),Email(不能为空) , 电话,QQ, 个人简历等信息. 并针对这些表的元素来创建相应的验证,如果检测到错误, 在输入框后面用红色的字显示错误.要用到前面几节学习过的单行文本输入框text.下拉列表框select.密码输入框password.多行文本输入框textarea.这是一个较实用的用

  • 用JS实现简单的登录验证功能

    实现过程示意图 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登录</title> <style> .ok { color: green; border: 1px solid green; } .error { color: red; border: 1px solid red; } </style> <s

  • JavaScript登录验证码的实现

    废话不多说,实现js登录验证码的功能需要下面两步,具体实现过程如下所示: 1.js var code="" ; //在全局 定义验证码 function createCode(){ code = ""; var codeLength = 6;//验证码的长度 var checkCode = document.getElementById("checkCode"); checkCode.value = ""; var selec

  • js实现登录注册框手机号和验证码校验(前端部分)

    开发的很多场景中都会用到手机号的校验和验证码的校验,具体实现如下 <div> <input type="text" name="phonenumber" placeholder="请输入您的手机号码" /> <input type="text" name="verify" placeholder="请输入验证码" /><input type=&q

  • 详解JS实现系统登录页的登录和验证

    这篇文章用JS显示表单的登录以及验证和对键盘的监听,这里有两种方法,一种是无需用户验证直接登录,一种是需要账户密码匹配才可登录. 1. html代码 <div class="content"> <div class="login-wrap"> <form id="user_login" action=""> <h3>登 录</h3> <input class=&

随机推荐