第一百四十九节,封装库--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"/></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;*/
}
前台js
// 表单验证
//验证用户名
$('form').hq_form_name('user').yuan_su_shi_jian('focus', function () { //给用户名设置聚集光标事件
$('#reg .info_user').xian_shi(); //当聚集光标时显示输入提示
$('#reg .error_user').yin_cang();
$('#reg .succ_user').yin_cang();
}).yuan_su_shi_jian('blur', function () { //给用户名设置光标离开事件 if (trim($(this).hq_value()) == ''){ //当光标离开时判断,输入框是否为空
$('#reg .info_user').yin_cang(); //如果输入框为空,隐藏输入提示
$('#reg .error_user').xian_shi();
}else if (!/[a-zA-Z0-9_]{4,20}/.test(trim($(this).hq_value()))){ //如果输入的信息不符合提示要求
$('#reg .error_user').xian_shi(); //显示错误提示
$('#reg .info_user').yin_cang();
$('#reg .succ_user').yin_cang();
}else{
$('#reg .succ_user').xian_shi();
$('#reg .info_user').yin_cang();
$('#reg .error_user').yin_cang();
} });
首先引入函数库和封装库
第一百四十九节,封装库--JavaScript,表单验证--验证用户名的更多相关文章
- 第一百四十八节,封装库--JavaScript,菜单切换
第一百四十八节,封装库--JavaScript,菜单切换 首先在封装库封装点击切换方法 /** dian_ji_qie_huan()方法,设置点击切换,将元素设置成点击切换,也就是点击目标元素后,循环 ...
- 第二百四十九节,Bootstrap附加导航插件
第二百四十九节,Bootstrap附加导航插件 学习要点: 1.附加导航插件 本节课我们主要学习一下 Bootstrap 中的附加导航插件 一.附加导航 注意:此插件要使用 bootstrap3.0. ...
- 第三百四十九节,Python分布式爬虫打造搜索引擎Scrapy精讲—cookie禁用、自动限速、自定义spider的settings,对抗反爬机制
第三百四十九节,Python分布式爬虫打造搜索引擎Scrapy精讲—cookie禁用.自动限速.自定义spider的settings,对抗反爬机制 cookie禁用 就是在Scrapy的配置文件set ...
- 第一百五十八节,封装库--JavaScript,ajax说明
封装库--JavaScript,ajax说明 封装库ajax()方法,ajax通讯方法,跨页面向动态页面发送或获取数据 /** ajax()方法,ajax通讯方法,跨页面向动态页面发送或获取数据 * ...
- 第一百五十三节,封装库--JavaScript,表单验证--备注字数验证
封装库--JavaScript,表单验证--备注字数验证 效果图 html <div id="reg"> <h2 class="tuo"> ...
- 第一百五十二节,封装库--JavaScript,表单验证--年月日注入
封装库--JavaScript,表单验证--年月日注入 效果图 html <div id="reg"> <h2 class="tuo"> ...
- 第一百四十五节,JavaScript,同步动画
JavaScript,同步动画 将上一节的,移动透明动画,修改成可以支持同步动画,也就是可以给这个动画方法多个动画任务,让它同时完成 原理: 向方法里添加一个属性,这个属性是一个对象,同步动画属性,属 ...
- 第一百四十六节,JavaScript,百度分享保持居中--下拉菜单
JavaScript,百度分享保持居中--下拉菜单 百度分享保持居中 效果图 html代码 <div id="share"> <h2>分享到</h2& ...
- 第一百一十九节,JavaScript事件入门
JavaScript事件入门 学习要点: 1.事件介绍 2.内联模型 3.脚本模型 4.事件处理函数 JavaScript事件是由访问Web页面的用户引起的一系列操作,例如:用户点击.当用户执行某些操 ...
随机推荐
- 不用一个判断,用JS直接输出勾股数
说明: 这里勾股数是符合a2+b2=c2的整数,比如32+42=52,52+122=132,怎么把符合条件的勾股数找出来呢?用代数替代的方法可以极大简化程序,直至一个判断都不用. 可以设a=m2-n2 ...
- 以JPanel为基础实现一个图像框
代码: import java.awt.Graphics; import javax.swing.ImageIcon; import javax.swing.JPanel; public class ...
- 偶遇RecyclerView内部Bug
写在前面 最近忙着赶项目进度,都不知道这次博客写点啥好了,前两天碰巧遇到一个奇怪的bug,项目中未发现与异常相关的类,于是去百度.谷歌搜索,发现这是一个早就可能被写烂吐槽的Recy ...
- LoadRunner解决超时错误
在运行脚本回放过程中,有时会出现错误,这在实际测试中是不可避免的,毕竟自动录制生成的脚本难免会有问题,需要运行脚本进行验证,把问题都解决后才加入到场景中进行负载测试.下面结合常用的协议(如Web.We ...
- margin外边距问题
1 .上下边距会叠加 !DOCTYPE html> <html> <head> <m<etacharset="UTF-8"> < ...
- sqlserver远程备份到其他服务器
直接将数据库备份到其他机器上 --如果xp_cmdshell没有启用,请先启用 sp_configure reconfigure go sp_configure reconfigure go --1. ...
- JConsole的使用手册 JDK1.5(转)
一篇Sun项目主页上介绍JConsole使用的文章,前段时间性能测试的时候大概翻译了一下以便学习,今天整理一下发上来,有些地方也不知道怎么翻,就保留了原文,可能还好理解点,呵呵,水平有限,翻的不好,大 ...
- Oracle中sign/decode/nvl/round/trunc/(+)/instr/substr/replace解释
1. sign函数 sign函数语法: sign(n); sign函数说明: 取数字n的符号,大于0返回1,小于0返回-1,等于0返回0(n可以是表达式,(n-200)) 例子: a=10; b=50 ...
- C-Scanf连续调用多次并且存在%c的问题
问题现象: 当程序中存在多个scanf时,针对第一个scanf的输入,一般用户会以空白字符(空格.换行.tab.换页符)等结束.但若后面有一个scanf(“%c”,&ch),则刚才输入的空白字 ...
- html中的标签分类
单标签 <br> <hr> <img> <input> <param> <meta> <link> 双标签 < ...