一个漂亮的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. 长度 ...
随机推荐
- hbase、pig、hive配置与应用
------------------HBASE---------- [root@iClient~]#sudo yum install hbase #iClient安装Hbase客户端 [root@cM ...
- LINUX系统学习以及初学者系统下载
Linux系统常用命令大全 来源:服务器之家 [博客中所有文章如有不对的地方希望看官们指出,有问题也可以提出来相互交流,相互学习,感谢大家!] 初学者建议安装:sentOS Ubuntu系统下载连接h ...
- gitbook 入门教程之小白都能看懂的 Gitbook 插件开发全流程
什么是插件 Gitbook 插件是扩展 GitBook 功能(电子书和网站)的最佳方式. 只要是 Gitbook 默认没有提供的功能,基于插件机制都可以自行扩展,是插件让 Gitbook 变得更加强大 ...
- SUSE CaaS Platform 4 - 使用 Ceph RBD 作为持久存储（动态）
图1 架构图 图2 各存储插件对动态供给方式的支持状况 1.所有节点安装 # yum install ceph-common 复制 ceph.conf 到 worker 节点上 # scp admin ...
- Shell之文本排序命令
目录 Shell之文本排序命令 参考 wc命令 sort命令 uniq命令 Shell之文本排序命令
- Java文件操作——File
创建File isFile().length().exists().createNewFile(). File.separator / isDirtory(). mkdir().mkdirs(). d ...
- ELK 学习笔记之 elasticsearch bool组合查询
elasticsearch bool组合查询: 相当于sql:where _type = 'books' and (price = 500 or title = 'bigdata') Note: mu ...
- MongoDB 学习笔记之 分析器和explain
MongoDB分析器: 检测MongoDB分析器是否打开: db.getProfilingLevel() 0表示没有打开 1表示打开了,并且如果查询的执行时间超过了第二个参数毫秒(ms)为单位的最大查 ...
- zend studio 13.6 导入项目及其他设置
1. 先创建一个新的项目:file -> new -> project 2. 创建新项目之后,在左侧的项目目录上右键 -> import 到此导入项目, 完成! 设置编码utf-8 ...
- 【CSS】width和height计算
width:calc(100% - 20px); width:-webkit-calc(100% - 20px);//chrome width:-moz-calc(100% - 20px);//fir ...