一个漂亮的js表单验证页面+验证码
一个漂亮的js表单验证页面
见图知其意，
主要特性
- 带密码安全系数的判断
- 其他的就没有啥啦
- 嘿嘿嘿
当然，其代码也在Github上
我也准备了一套可以直接Ctrl + v; Ctrl + c 运行的代码
<!doctype html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>表单验证</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,body {
background: linear-gradient(to left bottom, #DD6455, #a18cd1);
width: 100%;
height: 100%;
}
.form-container{
background-color:#fff;
width: 768px;
margin: 100px auto;
height: 500px;
border-radius: 10px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
overflow: hidden;
}
.left{
width: 50%;
height: 100%;
float: left;
background: url(../imgs/AbstractSaltBeds_ZH-CN8351691359_1920x1080.jpg) center center/cover no-repeat;
}
.right {
float: right;
width: 50%;
height: 100%;
}
form{
padding: 20px;
height: 100%;
}
.passw-div, .verifi-div, .repassw-div{
position: relative;
}
h1 {
margin: 10px 6px;
}
input {
background-color: #eee;
outline:none; /*不出现蓝色边框*/
width: 60%;
padding: 12px 15px;
margin: 16px 2px;
border-radius: 20px;
border: 1px solid #CE6D39;
transition: 300ms;
font-size: 14px;
} .register-div span {
width: 35%;
height: 40px;
display: block;
border-radius: 20px;
line-height: 40px;
text-align: center;
font-size: 12px;
font-weight: bold;
letter-spacing: 5px;
border: 1px solid #CE6D39;
background-color: #CE6D39;
color: #FFFFFF;
margin: 15px 0 0 15%;
margin-left: 15%;
transition: 300ms;
}
.register-div span:hover{
background-color: #FF4B2B;
box-shadow: 0 2px 11px #B34747
}
.safety-factor-div {
position: absolute;
line-height: 10px;
top: -6px;
left: 0px;
}
.safety-factor-div div{
float: left;
width: 30px;
height: 10px;
border-radius: 5px;
margin: 0 8px;
visibility: hidden;
}
.safety-factor-div span{
float: left;
margin-left: 10px;
font-size: 12px;
visibility: hidden;
}
.passw-div p,.repassw-div p{
position: absolute;
font-size: 12px;
color: #FF4B2B;
top: 28px;
left: 220px;
}
.verifi-div canvas{
position: absolute;
top: 18px;
left: 117px;
width: 90px;
height: 39px;
border-radius: 20px;
border: 1px solid #CE6D39;
background-color: #CE6D39;
text-align: center;
line-height: 40px;
transition: 300ms;
}
input:focus, .verifi-div canvas:hover{
box-shadow: 0 2px 11px #B34747
} </style>
</head>
<body>
<div class="form-container">
<div class="left"></div>
<div class="right">
<form >
<div class="header-div">
<h1>注册</h1>
</div>
<div class="username-div">
<input id="username" type="text" placeholder="用户名">
</div>
<div class="passw-div">
<input id="passw" type="password" placeholder="密码">
<p id="passw-err"></p>
<div class="safety-factor-div">
<span id="safe-head">安全系数</span>
<div id="safe-d1" style="background-color:red;"></div>
<div id="safe-d2" style="background-color:#F0F028;"></div>
<div id="safe-d3" style="background-color:green;"></div>
</div> </div>
<div class="repassw-div">
<input id="repassw" type="password" placeholder="确认密码">
<p id="repassw-err"></p>
</div>
<div class="verifi-div">
<input id="input-code" type="text" placeholder="请输入验证码">
<canvas id="verifi-code"></canvas>
</div>
<div class="register-div">
<span id="register">注册</span>
</div>
</form>
</div>
</div>
</body>
<script>
'use strict'; var username = document.getElementById('username');
var myInput = document.getElementById('passw');
var myReinput = document.getElementById('repassw');
var inputCode = document.getElementById('input-code');
var register = document.getElementById('register');
var canvas = document.getElementById('verifi-code'); var code, password, repassword; myInput.addEventListener('input',function(e){ let safe_head = document.getElementById('safe-head');
let safe_d1 = document.getElementById('safe-d1');
let safe_d2 = document.getElementById('safe-d2');
let safe_d3 = document.getElementById('safe-d3');
let input_err = document.getElementById('passw-err'); console.log("输入密码： " + myInput.value); password = myInput.value;
safe_head.style.visibility = "visible";
switch (checkPwd(password)) {
case 0:{
input_err.innerHTML = "密码不能小于6位";
safe_d1.style.visibility = "visible";
safe_d2.style.visibility = "hidden";
safe_d3.style.visibility = "hidden";
break;
}
case 1:{
input_err.innerHTML = "";
safe_d1.style.visibility = "visible";
safe_d2.style.visibility = "visible";
safe_d3.style.visibility = "hidden";
break;
}
case 2:{
input_err.innerHTML = "";
safe_d1.style.visibility = "visible";
safe_d2.style.visibility = "visible";
safe_d3.style.visibility = "visible";
break;
}
default:{
input_err.innerHTML = "";
}
}
}); myReinput.addEventListener('input',function(e){
let reinput_err = document.getElementById('repassw-err'); console.log("重复密码输入：" + myReinput.value); repassword = myReinput.value;
if(repassword != password){
reinput_err.innerHTML = "确认密码不相同哦";
}
else{
reinput_err.innerHTML = "";
}
}); register.onclick = function () {
if(username.value){
if (password) {
if(password.length >= 6){
if(myReinput.value){
if(myReinput.value == password){
if(code == inputCode.value.toUpperCase()){
alert("登入成功")
} else alert("验证码错误");
} else alert("重复密码不相同哦")
} else alert("请输入重复密码")
}else alert("请输入符合规范的密码")
} else alert("请输入密码");
} else alert("请输入邮箱");
} function createCode() {
let code = "";
var codeLength = 4;
var selectChar = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');
for (var i = 0; i < codeLength; i++) {
var charIndex = Math.floor(Math.random() * 36);
code += selectChar[charIndex];
}
console.log("生成验证码 " + code);
return code;
} function draw_canvas(code) {
if (canvas) {
var ctx=canvas.getContext('2d');
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.font="80px Verdana";
ctx.strokeText(code,25,110);
console.log("canvas 绘制完成")
}
else
console.log("没有找到canvas")
} function checkPwd(str){
var pattern1 = /([0-9]+)/i;
var pattern2 = /([a-z]+)/i;
if(str.length<6 || str.length>20){
return 0;
}
if(pattern1.exec(str)){
if(pattern2.exec(str)){
return 2
}
return 1;
}
} canvas.onclick = function () {
code = createCode();
draw_canvas(code);
}
window.onload = function () {
code = createCode();
draw_canvas(code);
} </script>
</html>
但是这样图片加载不上去，可以去github取,当然也可以用你自己的图片
一个漂亮的js表单验证页面+验证码的更多相关文章
- jquery.validation.js 表单验证
jquery.validation.js 表单验证 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuer ...
- Jquery.validate.js表单验证插件的使用
作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...
- js 表单验证控制代码大全
js表单验证控制代码大全 关键字:js验证表单大全,用JS控制表单提交 ,javascript提交表单:目录:1:js 字符串长度限制.判断字符长度 .js限制输入.限制不能输入.textarea 长 ...
- angular js 表单验证
<!doctype html> <html ng-app="myapp"> <head> <meta charset="UTF- ...
- JS表单验证类HTML代码实例
以前用的比较多的一个JS表单验证类,对于个人来说已经够用了,有兴趣的可以在此基础上扩展成ajax版本.本表单验证类囊括了密码验证.英文4~10个 字符验证. 中文非空验证.大于10小于100的数字.浮 ...
- Js表单验证控件-02 Ajax验证
在<Js表单验证控件(使用方便,无需编码)-01使用说明>中,写了Verify.js验证控件的基本用法,基本可以满足大多数验证需求,如果涉及服务端的验证,则可以通过Ajax. Ajax验证 ...
- js表单验证工具包
常用的js表单验证方法大全 /* 非空校验 : isNull() 是否是数字: isNumber(field) trim函数: trim() lTrim() rTrim() 校验字符串是否为空: ch ...
- 简单js表单验证
简单js表单验证demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org ...
- JS表单验证-12个常用的JS表单验证
JS表单验证-12个常用的JS表单验证 最近有个项目用到了表单验证,小编在项目完结后的这段时间把常用的JS表单验证demo整理了一下,和大家一起分享~~~ 1. 长度限制 <p>1. 长度 ...
随机推荐
- 由"跨域"引出的一个终极思想(jsonp)
1.什么是跨域? 当协议.子域名.主域名.端口号中任意一个不相同时,都算作不同域. 跨域并不是请求发不出去,请求能发出去,服务端能收到请求并正常返回结果,但是因为浏览器存在一个"同源策略&q ...
- telnet命令问题解决-bash: telnet: command not found
root@cClient:/]#telnet cMaster 44444 bash: telnet: command not found -----------解决办法------------ 解决方 ...
- 基于Docker搭建大数据集群（一）Docker环境部署
本篇文章是基于Docker搭建大数据集群系列的开篇之作 主要内容 docker搭建 docker部署CentOS 容器免密钥通信 容器保存成镜像 docker镜像发布 环境 Linux 7.6 一.D ...
- MySQL数据库从复制及企业配置实践
在实际生产中,数据的重要性不言而喻: 如果我们的数据库只有一台服务器,那么很容易产生单点故障的问题,比如这台服务器访问压力过大而没有响应或者奔溃,那么服务就不可用了,再比如这台服务器的硬盘坏了,那么整 ...
- Spring IOC（3）----bean实例化
前面一节说到invokeBeanFactoryPostProcessors方法的调用来注册bean定义,这次来看看finishBeanFactoryInitialization这个方法实例化非懒加载的 ...
- 开发电商平台用PHP语言和JAVA语言有什么区别？哪种语言更好？
现在很多行业都通过电子商务拓展业务,所以商城系统开发成为很多企业的刚性需求.一般有一点技术基础的客户应该知道目前商城系统开发主流语言有两个,PHP和Java.那么很多客户朋友会纠结是选择哪个语言开发好 ...
- 文本数据IO操作--字符流
一.Reader和Writer 1. 字符流原理 Reader是所有字符输入流的父类而Writer是所有字符输出流的父类.字符流是以字符(char)为单位读写数据的.一次处理一个unicode.字符流 ...
- Kubernetes的RBAC是啥
RBAC: Role-Based Access Control,基于角色的权限控制,有以下三种角色 Role:角色,它其实是一组规则,定义了一组API对象的操作权限 Subject:被作用者,可以是人 ...
- B-概率论-条件概率
目录 条件概率 一.条件概率简介 二.条件概率推广 更新.更全的<机器学习>的更新网站,更有python.go.数据结构与算法.爬虫.人工智能教学等着你:https://www.cnblo ...
- Chrome 和 Chromedriver 的安装和配置
1.Chrome 下载安装地址:https://www.google.com/intl/zh-CN_ALL/chrome/ 2.Chromedriver的安装 方法一: (1) brew cask i ...