封装库--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"/>
<span class="info info_notpass">请再一次输入密码！</span>
<span class="error error_notpass">密码不一致，请重新输入！</span>
<span class="succ succ_notpass">可用</span>
</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"/>
<span class="info info_ans">请输入回答，2~32位！</span>
<span class="error error_ans">回答不合法，请重新输入！</span>
<span class="succ succ_ans">可用</span>
</dd>
<dd>电子邮件： <input type="text" name="email" class="text" autocomplete="off"/>
<span class="info info_email">请输入电子邮件！</span>
<span class="error error_email">邮件不合法，请重新输入！</span>
<span class="succ succ_email">可用</span>
<ul class="all_email">
<li><span></span>@qq.com</li>
<li><span></span>@163.com</li>
<li><span></span>@sohu.com</li>
<li><span></span>@sina.com.cn</li>
<li><span></span>@gmail.com</li>
</ul>
</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 class="tsh1">还可以输入<strong class="unm">10</strong>字</dd>
<dd class="tsh2">已超过<strong class="unm2"></strong>字,<span>清尾</span></dd>
<dd><input type="button" class="submit" name="sub"/></dd>
</dl>
</form>
</div>
css
/*注册提示*/
/*用户名提示*/
#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;
} /*密码确认*/
#reg dl dd span.info_notpass{
height:43px;
line-height:18px;
padding-top:7px;
background:url(img/reg_info2.png) no-repeat;
top:140px;
left:310px;
/*display:block;*/
}
/*错误*/
#reg dl dd span.error_notpass {
top:140px;
left:310px;
/*display:block;*/
}
/*可用*/
#reg dl dd span.succ_notpass {
top:150px;
left:315px;
/*display:block;*/
} /*回答*/
#reg dl dd span.info_ans{
height:43px;
line-height:18px;
padding-top:7px;
background:url(img/reg_info2.png) no-repeat;
top:220px;
left:310px;
/*display:block;*/
}
/*错误*/
#reg dl dd span.error_ans {
top:220px;
left:310px;
/*display:block;*/
}
/*可用*/
#reg dl dd span.succ_ans {
top:220px;
left:315px;
/*display:block;*/
} /*电子邮件*/
#reg dl dd span.info_email{
height:43px;
line-height:18px;
padding-top:7px;
background:url(img/reg_info2.png) no-repeat;
top:255px;
left:310px;
/*display:block;*/
}
/*错误*/
#reg dl dd span.error_email {
top:255px;
left:310px;
/*display:block;*/
}
/*可用*/
#reg dl dd span.succ_email {
top:275px;
left:315px;
/*display:block;*/
}
#reg dl dd ul.all_email {
width:180px;
height:130px;
background:#fff;
padding:5px 10px;
position:absolute;
top:292px;
left:104px;
border:1px solid #ccc;
display:none;
}
#reg dl dd ul.all_email li {
height:25px;
line-height:25px;
border-bottom:1px solid #e5edf2;
padding:0 5px;
cursor:pointer;
} /*备注提示*/
#reg dl dd.tsh1{
padding:0 0 0 320px;
display: block;
} #reg dl dd.tsh2{
padding:0 0 0 320px;
display: none;
}
#reg dl dd.tsh2 span{
color: #1227ff;
cursor:pointer;
} /*提交*/
#reg dl dd input.submit{
margin-left:150px;
background-color: #19ff1d;
}
前台js
// 表单验证
$('form').sh_jd().reset();
//验证用户名
$('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(); //如果输入框为空，隐藏输入提示
}else if (!pd_user()){ //如果输入的信息不符合提示要求
$('#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();
}
});
function pd_user() { //最终判断
if (/[a-zA-Z0-9_]{4,20}/.test(trim($('form').hq_form_name('user').hq_value())))return true;
} //验证密码
$('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()) {
$('#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();
});
function qiang_yanzh() {
var neirong = trim($('form').hq_form_name('pass').hq_value()); //获取输入的字符
var chuang = neirong.length; //获取输入的字符长度
var fuza = 0; //计数器，同级密码的复杂性
//第一个必须条件验证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){
return true;
}else {
return false;
}
} //密码确认
$('form').hq_form_name('notpass').yuan_su_shi_jian('focus', function () { //获取密码确认框，添加聚集光标事件
$('#reg .info_notpass').xian_shi(); //聚集光标时显示提示
$('#reg .error_notpass').yin_cang();
$('#reg .succ_notpass').yin_cang();
}).yuan_su_shi_jian('blur', function () {
var mima = trim($('form').hq_form_name('pass').hq_value());
var qrmima = trim($(this).hq_value());
if (qrmima == '') {
$('#reg .info_notpass').yin_cang();
} else if (qrmima == mima) {
$('#reg .info_notpass').yin_cang();
$('#reg .error_notpass').yin_cang();
$('#reg .succ_notpass').xian_shi();
}else {
$('#reg .info_notpass').yin_cang();
$('#reg .error_notpass').xian_shi();
$('#reg .succ_notpass').yin_cang();
}
});
function qr_mim() {
if (trim($('form').hq_form_name('pass').hq_value()) == trim($('form').hq_form_name('notpass').hq_value())){
return true;
}
} //回答
$('form').hq_form_name('ans').yuan_su_shi_jian('focus', function () { //获取回答框，添加聚集光标事件
$('#reg .info_ans').xian_shi(); //聚集光标时显示提示
$('#reg .error_ans').yin_cang();
$('#reg .succ_ans').yin_cang();
}).yuan_su_shi_jian('blur', function () {
var huida = trim($(this).hq_value());
if (huida == '') {
$('#reg .info_ans').yin_cang();
} else if (huida.length >= 2 && huida.length <= 32) {
$('#reg .info_ans').yin_cang();
$('#reg .error_ans').yin_cang();
$('#reg .succ_ans').xian_shi();
} else {
$('#reg .info_ans').yin_cang();
$('#reg .error_ans').xian_shi();
$('#reg .succ_ans').yin_cang();
}
});
function qr_huoda() {
if (trim($('form').hq_form_name('ans').hq_value()).length >= 2 && trim($('form').hq_form_name('ans').hq_value()).length <= 32){
return true;
} } //电子邮件
$('form').hq_form_name('email').yuan_su_shi_jian('focus', function () { //获取电子邮件框，添加聚集光标事件
$('#reg .info_email').xian_shi(); //聚集光标时显示提示
$('#reg .error_email').yin_cang();
$('#reg .succ_email').yin_cang();
if(trim($('form').hq_form_name('email').hq_value()).indexOf('@') == -1){
$('#reg .all_email').xian_shi();
}
}).yuan_su_shi_jian('blur', function () {
$('#reg .all_email').yin_cang();
var email = trim($(this).hq_value());
if (email == '') {
$('#reg .info_email').yin_cang();
} else if (/^[a-zA-Z0-9_\-\.]+@[a-zA-Z0-9_\-]+(\.[a-zA-Z]{2,4}){1,2}$/.test(email)) {
$('#reg .info_email').yin_cang();
$('#reg .error_email').yin_cang();
$('#reg .succ_email').xian_shi();
} else {
$('#reg .info_email').yin_cang();
$('#reg .error_email').xian_shi();
$('#reg .succ_email').yin_cang();
}
});
//电子邮件自动补全界面
$('#reg .all_email li').shu_biao_yi_ru_yi_chu(function () {
$(this).c_css('background','#e5edf2');
$(this).c_css('color','#369');
},function () {
$(this).c_css('background','none');
$(this).c_css('color','#666');
});
//自动补全键入
$('form').hq_form_name('email').yuan_su_shi_jian('keyup', function (event) {
var value = trim($(this).hq_value());
if (value.indexOf('@') == -1) { //在没遇到@时补全，如果遇到停止补全
$('#reg .all_email span').wen_ben(value);
} else {
$('#reg .all_email').yin_cang();
}
var length = $('#reg .all_email li').jd_length();
if (event.keyCode == 40) { //上键选择补全
if (this.jishuqi == undefined || this.jishuqi >= length - 1) { //计数器
this.jishuqi = 0;
} else {
this.jishuqi++;
}
$('#reg .all_email li').c_css('background', 'none');
$('#reg .all_email li').c_css('color', '#666666');
$('#reg .all_email li').guo_lv_jie_dian(this.jishuqi).c_css('background', '#e5edf2');
$('#reg .all_email li').guo_lv_jie_dian(this.jishuqi).c_css('color', '#369');
}
if (event.keyCode == 38) { //下键选择补全
if (this.jishuqi == undefined || this.jishuqi <= 0) { //计数器
this.jishuqi = length - 1;
} else {
this.jishuqi--;
}
$('#reg .all_email li').c_css('background', 'none');
$('#reg .all_email li').c_css('color', '#666666');
$('#reg .all_email li').guo_lv_jie_dian(this.jishuqi).c_css('background', '#e5edf2');
$('#reg .all_email li').guo_lv_jie_dian(this.jishuqi).c_css('color', '#369');
}
if (event.keyCode == 13){ //按下回车键
$(this).hq_value($('#reg .all_email li').guo_lv_jie_dian(this.jishuqi).wen_ben_guo_lv());
$('#reg .all_email').yin_cang();
this.jishuqi = undefined; //初始化
}
});
//点击补全
$('#reg .all_email li').yuan_su_shi_jian('mousedown',function () {
$('form').hq_form_name('email').hq_value($(this).wen_ben_guo_lv());
});
function qr_email() {
var lshi = trim($('form').hq_form_name('email').hq_value());
if (/^[a-zA-Z0-9_\-\.]+@[a-zA-Z0-9_\-]+(\.[a-zA-Z]{2,4}){1,2}$/.test(lshi)){
return true;
}
} //年月日
var nian = $('form').hq_form_name('year');
var yuen = $('form').hq_form_name('month');
var ri = $('form').hq_form_name('day');
//根据月份判断天数
var yuen30 = [4,6,9,11]; //30天的月份
var yuen31 = [1,3,5,7,8,10,12]; //31天的月份 //注入年
for(var i = 1950; i <= 2017; i++){
nian.sh_jd().add(new Option(i,i),undefined);
} //注入月
for (var i = 1; i <= 12; i++){
yuen.sh_jd().add(new Option(i,i),undefined);
} //判断注入日
//当改变年月value值并失去焦点时触发
nian.yuan_su_shi_jian('change', select_day);
yuen.yuan_su_shi_jian('change', select_day);
function select_day() {
if (nian.hq_value() != 0 && yuen.hq_value() != 0) { //判断当年月的值都不等于0时
//清理之前的注入
ri.sh_jd().options.length = 1;
var chu_ri = 0; //初始化日
//注入31天
if (pd_shuzu(yuen31, parseInt(yuen.hq_value()))) { //判断当月属于31天时
chu_ri = 31;
//注入30
} else if (pd_shuzu(yuen30, parseInt(yuen.hq_value()))) {
chu_ri = 30;
} else {
//判断润年29天1
if ((parseInt(nian.hq_value()) % 4 == 0 && parseInt(nian.hq_value()) % 100 != 0) || parseInt(nian.hq_value()) % 400 == 0) {
chu_ri = 29;
} else {
//注入28天
chu_ri = 28;
}
}
for (var i = 1; i <= chu_ri; i++) {
ri.sh_jd().add(new Option(i, i), undefined);
} } else { //如果年为0时清理注入
ri.sh_jd().options.length = 1;
} } //备注
var zong = 10; //总输入字数
$('form').hq_form_name('ps').yuan_su_shi_jian('keyup', function () {
beizhu(zong);
}).yuan_su_shi_jian('paste',function () { //鼠标粘贴检测
setTimeout(function () {
beizhu(zong);
},50);
});
//清尾
$('#reg .tsh2 span').on_click(function () {
$('form').hq_form_name('ps').hq_value($('form').hq_form_name('ps').hq_value().substring(0,zong));
beizhu(zong);
}); function beizhu(zong) {
var num = zong - $('form').hq_form_name('ps').hq_value().length; //得到还可以输入
if (num >= 0) {
$('#reg .tsh1').c_css('display', 'block');
$('#reg .tsh2').c_css('display', 'none');
$('#reg .tsh1 .unm').wen_ben(num);
} else if (num < 0) {
var chang = ($('form').hq_form_name('ps').hq_value().length) - zong; //得到超出多少
$('#reg .tsh1').c_css('display', 'none');
$('#reg .tsh2').c_css('display', 'block');
$('#reg .tsh2 .unm2').wen_ben(chang).c_css('color', '#FF3724');
}
} //提交判断
$('form').hq_form_name('sub').on_click(function () {
var flag = true;
if (!pd_user()) { //判断用户名
flag = false;
$('#reg .error_user').xian_shi();
}
if (!qiang_yanzh()) { //判断密码
flag = false;
$('#reg .error_pass').xian_shi();
}
if (!qr_mim()){ //判断确认密码
flag = false;
$('#reg .error_notpass').xian_shi();
}
if (!qr_huoda()){ //判断回答
flag = false;
$('#reg .error_ans').xian_shi();
}
if (!qr_email()){ //判断电子邮件
flag = false;
$('#reg .error_email').xian_shi();
} if (flag) {
$('form').sh_jd().submit(); //执行提交
} });