第一百五十节，封装库--JavaScript，表单验证--密码验证
封装库--JavaScript，表单验证--密码验证
效果图
html
<div id="reg">
<h2 class="tuo"><img src="img/close.png" alt="" class="close" />会员注册</h2>
<form name="reg">
<dl>
<dd>用 户 名： <input type="text" name="user" class="text"/>
<span class="info info_user">请输入用户名，4~20位，由字母、数字和下划线组成！</span>
<span class="error error_user">输入不合法，请重新输入！</span>
<span class="succ succ_user">可用</span>
</dd>
<dd>密 码： <input type="password" name="pass" class="text"/>
<span class="info info_pass">
<p>安全级别：<strong class="s s1">■</strong><strong class="s s2">■</strong><strong
class="s s3">■</strong> <strong class="s s4" style="font-weight:normal;"></strong></p>
<p><strong class="q1" style="font-weight:normal;">○</strong> 6-20 个字符</p>
<p><strong class="q2" style="font-weight:normal;">○</strong> 只能包含大小写字母、数字和非空格字符</p>
<p><strong class="q3" style="font-weight:normal;">○</strong> 大、小写字母、数字、非空字符，2种以上</p>
</span>
<span class="error error_pass">输入不合法，请重新输入！</span>
<span class="succ succ_pass">可用</span>
</dd>
<dd>密码确认： <input type="password" name="notpass" class="text"/></dd>
<dd><span style="vertical-align:-2px">提 问：</span> <select name="ques">
<option value="0">- - - - 请选择 - - - -</option>
<option value="1">- - 您最喜欢吃的菜</option>
<option value="2">- - 您的狗狗的名字</option>
<option value="3">- - 您的出生地</option>
<option value="4">- - 您最喜欢的明星</option>
</select></dd>
<dd>回 答： <input type="text" name="ans" class="text"/></dd>
<dd>电子邮件： <input type="text" name="email" class="text"/></dd>
<dd class="birthday"><span style="vertical-align:-2px">生 日：</span> <select name="year">
<option value="0">- 请选择 -</option>
</select> 年
<select name="month">
<option value="0">- 请选择 -</option>
</select> 月
<select name="day">
<option value="0">- 请选择 -</option>
</select> 日
</dd>
<dd style="height:105px;"><span style="vertical-align:85px">备 注：</span> <textarea name="ps"></textarea>
</dd>
<dd style="padding:0 0 0 320px;">还可以输入200字</dd>
<dd style="padding:0 0 0 80px;"><input type="button" class="submit"/></dd>
</dl>
</form>
</div>
css
/*注册*/
#reg {
width:600px;
height:550px;
border:1px solid #ccc;
position:absolute;
display:none;
z-index:;
background:#fff;
}
#reg h2 {
height:40px;
line-height:40px;
text-align:center;
font-size:14px;
letter-spacing:1px;
color:#666;
background:url(img/login_header.png) repeat-x;
margin:;
padding:;
border-bottom:1px solid #ccc;
margin:0 0 20px 0;
cursor:move;
}
#reg h2 img {
float:right;
position:relative;
top:14px;
right:8px;
cursor:pointer;
}
#reg dl {
font-size:14px;
color:#666;
margin:20px;
padding:0 0 0 10px;
}
#reg dl dd {
height:30px;
padding:5px 0;
}
#reg dl dd input.text, #reg dl dd select {
width:200px;
height:25px;
border:1px solid #ccc;
background:#fff;
font-size:14px;
color:#666;
}
#reg dl dd select {
width:202px;
}
#reg dl dd.birthday select {
width:100px;
}
#reg dl dd textarea {
width:360px;
height:100px;
background:#fff;
border:1px solid #ccc;
}
#reg dl dd input.submit {
width:143px;
height:33px;
background:url(img/reg.png) no-repeat;
border:none;
cursor:pointer;
} /*注册提示*/
/*用户名提示*/
#reg dl dd span.info, #reg dl dd span.error, #reg dl dd span.succ {
display:block;
font-size:12px;
color:#333;
width:165px;
height:32px;
line-height:32px;
padding:0 0 0 35px;
position:absolute;
letter-spacing:1px;
display:none;
}
#reg dl dd span.info {
background:url(img/reg_info.png) no-repeat;
}
#reg dl dd span.error {
background:url(img/reg_error.png) no-repeat;
}
#reg dl dd span.succ {
height:14px;
line-height:14px;
background:url(img/reg_succ.png) no-repeat;
padding:0 0 0 20px;
color:green;
}
/*输入*/
#reg dl dd span.info_user {
height:43px;
line-height:18px;
padding-top:7px;
background:url(img/reg_info2.png) no-repeat;
top:60px;
left:310px;
/*display:block;*/
}
/*错误*/
#reg dl dd span.error_user {
top:60px;
left:310px;
/*display:block;*/
}
/*可用*/
#reg dl dd span.succ_user {
top:70px;
left:315px;
/*display:block;*/
} /*密码验证*/
#reg dl dd span.info_pass {
width:244px;
height:102px;
padding:4px 0 0 16px;
background:url(img/reg_info3.png) no-repeat;
top:60px;
left:310px;
/*display:block;*/
letter-spacing:;
}
#reg dl dd span.info_pass p {
height:25px;
line-height:25px;
color:#666;
}
#reg dl dd span.info_pass p strong.s {
color:#ccc;
}
#reg dl dd span.error_pass {
top:43px;
left:295px;
}
#reg dl dd span.succ_pass {
top:52px;
left:295px;
}
/*错误*/
#reg dl dd span.error_pass {
top:110px;
left:310px;
/*display:block;*/
}
/*可用*/
#reg dl dd span.succ_pass {
top:110px;
left:315px;
/*display:block;*/
}
#reg .info_pass strong{
font-size: 25px;
}
前台js
//验证密码
$('form').hq_form_name('pass').yuan_su_shi_jian('focus', function () { //获取密码框，添加聚集光标事件
$('#reg .info_pass').xian_shi(); //聚集光标时显示提示
$('#reg .error_pass').yin_cang();
$('#reg .succ_pass').yin_cang();
}).yuan_su_shi_jian('blur', function () { //光标离开事件
if (trim($(this).hq_value()) == '') {
$('#reg .info_pass').yin_cang();
} else {
if (qiang_yanzh(this)) {
$('#reg .succ_pass').xian_shi();
$('#reg .info_pass').yin_cang();
$('#reg .error_pass').yin_cang();
} else {
$('#reg .succ_pass').yin_cang();
$('#reg .info_pass').yin_cang();
$('#reg .error_pass').xian_shi();
}
}
});
//密码强度验证
$('form').hq_form_name('pass').yuan_su_shi_jian('keyup',function () { //按下键盘键放开时事件
qiang_yanzh(this);
});
function qiang_yanzh(_this) {
var neirong = trim($(_this).hq_value()); //获取输入的字符
var chuang = neirong.length; //获取输入的字符长度
var fuza = 0; //计数器，同级密码的复杂性
var flag = false; //统计用户输入是否合法
//第一个必须条件验证6至20位之间
if (chuang >= 6 && chuang <= 20){
$('#reg .info_pass .q1').wen_ben('●').c_css('color','#008000');
}else {
$('#reg .info_pass .q1').wen_ben('○').c_css('color','#666');
}
//第二个必须条件大小写字母、数字和非空格字符，任意一个即可满足
if (chuang > 0 && !/\s/.test(neirong)) {
$('#reg .info_pass .q2').wen_ben('●').c_css('color', '#008000');
} else {
$('#reg .info_pass .q2').wen_ben('○').c_css('color', '#666');
}
//第三个必须条件大、小写字母、数字、非空字符，2种以上
if (/[0-9]/.test(neirong)){ //判断是否输入了数字
fuza ++;
}
if (/[a-z]/.test(neirong)){ //判断是否输入了小写字母
fuza ++;
}
if (/[A-Z]/.test(neirong)){ //判断是否输入了大写字母
fuza ++;
}
if (/[^0-9a-zA-Z]/.test(neirong)){ //判断是否输入了特殊字符
fuza ++;
} if (fuza >= 2){
$('#reg .info_pass .q3').wen_ben('●').c_css('color', '#008000');
}else {
$('#reg .info_pass .q3').wen_ben('○').c_css('color', '#666');
}
//安全级别判断
//判断等级务必从高数值到低数值判断。防止高数值无法判断
if (chuang >= 10 && fuza >= 3) {
$('#reg .info_pass .s1').c_css('color', '#008000');
$('#reg .info_pass .s2').c_css('color', '#008000');
$('#reg .info_pass .s3').c_css('color', '#008000');
$('#reg .info_pass .s4').c_css('color', '#008000').wen_ben('高');
}else if(chuang >= 8 && fuza >= 2){
$('#reg .info_pass .s1').c_css('color', '#FF6600');
$('#reg .info_pass .s2').c_css('color', '#FF6600');
$('#reg .info_pass .s3').c_css('color', '#ccc');
$('#reg .info_pass .s4').c_css('color', '#FF6600').wen_ben('中');
}else if(chuang >= 1 && fuza >= 1){
$('#reg .info_pass .s1').c_css('color', '#800000');
$('#reg .info_pass .s2').c_css('color', '#ccc');
$('#reg .info_pass .s3').c_css('color', '#ccc');
$('#reg .info_pass .s4').c_css('color', '#800000').wen_ben('低');
}else {
$('#reg .info_pass .s1').c_css('color', '#ccc');
$('#reg .info_pass .s2').c_css('color', '#ccc');
$('#reg .info_pass .s3').c_css('color', '#ccc');
$('#reg .info_pass .s4').wen_ben('');
}
if (chuang >= 6 && chuang <= 20 && !/\s/.test(neirong) && fuza >= 2) flag = true;
return flag;
}
首先要引入函数库和封装库
第一百五十节，封装库--JavaScript，表单验证--密码验证的更多相关文章
- 第一百五十二节，封装库--JavaScript，表单验证--年月日注入
封装库--JavaScript,表单验证--年月日注入 效果图 html <div id="reg"> <h2 class="tuo"> ...
- 第一百六十八节，jQuery，表单选择器
jQuery,表单选择器 学习要点: 1.常规选择器 2.表单选择器 3.表单过滤器 表单作为 HTML 中一种特殊的元素,操作方法较为多样性和特殊性,开发者不但可以 使用之前的常规选择器或过滤器,也 ...
- 第一百五十九节，封装库--JavaScript，表单序列化结合ajax提交数据
封装库--JavaScript,表单序列化结合ajax提交数据 封装库,表单序列化方法 /** xu_lie_biao_dan()方法,表单序列化方法,将自动获取指定表单里面的各项字段name值和va ...
- 第三百五十节，Python分布式爬虫打造搜索引擎Scrapy精讲—selenium模块是一个python操作浏览器软件的一个模块，可以实现js动态网页请求
第三百五十节,Python分布式爬虫打造搜索引擎Scrapy精讲—selenium模块是一个python操作浏览器软件的一个模块,可以实现js动态网页请求 selenium模块 selenium模块为 ...
- 推荐几款很棒的 JavaScript 表单美化和验证插件
表单元素让人爱恨交加.作为网页最重要的组成部分,表单几乎无处不在,从简单的邮件订阅.登陆注册到复杂的需要多页填写的信息提交功能,表单都让开发者花费了大量的时间和精力去处理,以期实现好用又漂亮的表单功能 ...
- 第一百五十五节，封装库--JavaScript，轮播器
封装库--JavaScript,轮播器 html <div id="banner"> <img src="img/banner1.jpg" a ...
- 第一百五十四节，封装库--JavaScript，表单验证--提交验证
封装库--JavaScript,表单验证--提交验证 将表单的所有必填项,做一个判断函数,填写正确时返回布尔值 最后在提交时,判断每一项是否正确,全部正确才可以 提交 html <div id= ...
- 第一百五十六节，封装库--JavaScript，延迟加载
封装库--JavaScript,延迟加载 延迟加载的好处,就是在浏览器视窗外的图片,不加载,拖动鼠标到浏览器视窗内后加载,用户不看的图片就不用加载,可以减少服务器大量流量 将图片的src地址用一张统一 ...
- 第一百六十节，封装库--JavaScript，ajax注册表单到数据库
封装库--JavaScript,ajax注册表单到数据库 效果图 前台js var biaodan = $().xu_lie_biao_dan($('form').sh_jd()); //序列化获取表 ...
随机推荐
- 【ACM】Fighting for HDU
#include <stdio.h> #include <stdlib.h> #define max 100 /* run this program using the con ...
- PHP Warning exec() has been disabled for security reasons怎么办
如果是PHPNOW,还是找到php-apache2handler.ini这个文件,把禁用的函数去掉即可. 注意是这个文件夹
- 学习EF之CodeFirst二（数据库对应映射）
在上一篇文章我们简单通过一个实例完成对CodeFirst的理解,我们通过实体生成数据库里的表和字段,虽然有一些默认的配置生成规定,但其实我们可以能过对实体进一步控制从而对生成的表字段进行更加符合我们要 ...
- JConsole的使用手册 JDK1.5（转）
一篇Sun项目主页上介绍JConsole使用的文章,前段时间性能测试的时候大概翻译了一下以便学习,今天整理一下发上来,有些地方也不知道怎么翻,就保留了原文,可能还好理解点,呵呵,水平有限,翻的不好,大 ...
- MSSQL中循环
1 declare @result table 2 ( 3 custid int, 4 ordermonth datetime, 5 qty int, 6 runqty int, 7 primary ...
- C#指南，重温基础，展望远方！（1）C#语言介绍
1.C#(读作“See Sharp”)是一种简单易用的新式编程语言,不仅面向对象,还类型安全. C# 源于 C 语言系列,C.C++.Java 和 JavaScript 程序员很快就可以上手使用. 2 ...
- checkbox 全选操作
<html> <head></head> <body> <div id="places"> <input type ...
- android UI 适配小节
一. 像素密度表 像素密度表 比如UE 给了三张切图分别对应: mdpi, xhdpi, xxdpi 10 * 10, 20 * 20, 30 * 30 上面的值都 ...
- .NET牛人应该知道些什么？
任何一个使用.NET的人 描述线程与进程的区别? 什么是Windows服务,它的生命周期与标准的EXE程序有什么不同 Windows上的单个进程所能访问的最大内存量是多少?它与系统的最大虚拟内存一样吗 ...
- unity 已知cosA和sinA，求A
和c++中的atan2(y,x)类似,unity中有也Mathf.Atan2(y,x).