功能很简单,验证新用户注册时的注册信息。1.定义验证通过标识 var validateFlag=false;
2.在每一个文本框的blur事件里进行验证,验证不通过则validateFlag=true,反之false;
3.点击submit按钮时,在按钮的click事件里触发每一个文本框的blur事件,当标识validateFlag为true时,
表示验证不通过,直接return,不进行数据库操作,反之执行。补充一下:我发现在注册按钮的click事件只有最后一个文本框的blur事件对validateFlag赋值才起作用,也就是最后调用的blur事件对validateFlag赋值为true了后才能执行下面的if语句,前面的3个赋值不起作用。
下面是代码,代码写很菜,大家凑合着看。
var validateFlag = false; //用户注册,验证通过标识
//用户注册--注册按钮
$("#btn_register").bind("click", function() {
$("#Txt_username").blur();
$("#Txt_password").blur();
$("#Txt_surepassword").blur();
$("#Txt_email").blur(); alert(validateFlag); //这里弹出了验证标识,但为True的时候也不执行下面的if的语句
if (validateFlag == true)
{ alert('注册信息有误,请先完善信息!'); return; } var Txt_username = $("#Txt_username").val();
var Txt_password = $("#Txt_password").val();
var Txt_email = $("#Txt_email").val();
var Txt_code = $("#Txt_code").val();
$.ajax({
type: "POST",
url: "AjaxLog.ashx",
data: "username=" + escape(Txt_username) + "&password=" + escape(Txt_password) + "&email=" + escape(Txt_email) + "&code=" + escape(Txt_code) + "&type=1",
success: function(msg) {
alert($.trim(msg));
}
});
}); //*****************
//检测用户名是否存在
$("#Txt_username").blur(function() {
var aa = $("#span_username");
var Txt_username = $.trim($("#Txt_username").val());
if (Txt_username == "")
{ aa.text('用户名不能为空'); validateFlag ="true"; return; }
if (Txt_username.length < 6)
{ aa.text('用户名长度不能小于6位'); validateFlag = true; return; } $.ajax({
type: "POST",
url: "AjaxLog.ashx",
data: "username=" + escape(Txt_username) + "&type=3",
success: function(msg) {
if (Txt_username == "") { aa.text(""); }
else {
if (msg == "1") {
validateFlag = true;
aa.text("该用户名已存在");
} else {
$("#span_username").text("恭喜,该用户名可用");
validateFlag = false;
}
}
}
});
}); function testStregth(word) {
return word.replace(/^(?:([a-z])|([A-Z])|([0-9])|(.)){5,}|(.)+$/g, "$1$2$3$4$5").length;
} //验证密码强度(技巧性利用正则表达式)
//分为数字,小写字母,大写字母,特殊字符4种组合 //验证密码强度
$("#Txt_password").blur(
function() {
$("#passwordPower td span").each(
function()
{ $(this).css("color", "#484848"); }
);
if ($.trim($(this).val()) == "") {
$("#psdStregth").text('密码不能为空');
validateFlag = true;
return false;
}
if ($.trim($(this).val()).length < 6) {
$("#psdStregth").text('密码长度不能小于6位');
validateFlag = true;
return false;
}
else { $("#psdStregth").text('密码可用'); validateFlag = false; }
var flag = testStregth($.trim($(this).val())); if (flag == 1) {
$("#passwordPower td span").each(
function()
{ $(this).css("color", "#484848"); }
);
$("#passwordPower td:eq(0) span").css("color", "red");
} else if (flag == 2 || flag == 3) {
$("#passwordPower td span").each(
function()
{ $(this).css("color", "#484848"); }
);
$("#passwordPower td:eq(1) span").css("color", "red");
} else if (flag == 4) {
$("#passwordPower td span").each(
function()
{ $(this).css("color", "#484848"); }
);
$("#passwordPower td:eq(2) span").css("color", "red");
}
}
); //确认密码
$("#Txt_surepassword").blur(
function() {
if ($.trim($(this).val()) == "")
{ $("#spanSurePsd").text('密码不能为空'); validateFlag = true; return ; }
if ($.trim($(this).val()) != ($("#Txt_password").val()))
{ $("#spanSurePsd").text('两次密码输入不一致'); validateFlag = true; }
else
{ $("#spanSurePsd").text('密码正确'); validateFlag = false; }
}
); //验证邮箱
$("#Txt_email").blur(
function() {
if ($.trim($(this).val()) == "")
{ $("#spanMail").text("邮箱不能为空"); validateFlag = true; return ; }
var reg = /^[a-zA-Z0-9_\.\-]+\@([a-zA-Z0-9\-]+\.)+[a-zA-Z0-9]{2,4}$/; //邮箱正则
if (!reg.test($(this).val()))
{ $("#spanMail").text('请输入正确的邮箱格式'); validateFlag = true; }
else { $("#spanMail").text('邮箱可用'); validateFlag = false; }
}
);
2.在每一个文本框的blur事件里进行验证,验证不通过则validateFlag=true,反之false;
3.点击submit按钮时,在按钮的click事件里触发每一个文本框的blur事件,当标识validateFlag为true时,
表示验证不通过,直接return,不进行数据库操作,反之执行。补充一下:我发现在注册按钮的click事件只有最后一个文本框的blur事件对validateFlag赋值才起作用,也就是最后调用的blur事件对validateFlag赋值为true了后才能执行下面的if语句,前面的3个赋值不起作用。
下面是代码,代码写很菜,大家凑合着看。
var validateFlag = false; //用户注册,验证通过标识
//用户注册--注册按钮
$("#btn_register").bind("click", function() {
$("#Txt_username").blur();
$("#Txt_password").blur();
$("#Txt_surepassword").blur();
$("#Txt_email").blur(); alert(validateFlag); //这里弹出了验证标识,但为True的时候也不执行下面的if的语句
if (validateFlag == true)
{ alert('注册信息有误,请先完善信息!'); return; } var Txt_username = $("#Txt_username").val();
var Txt_password = $("#Txt_password").val();
var Txt_email = $("#Txt_email").val();
var Txt_code = $("#Txt_code").val();
$.ajax({
type: "POST",
url: "AjaxLog.ashx",
data: "username=" + escape(Txt_username) + "&password=" + escape(Txt_password) + "&email=" + escape(Txt_email) + "&code=" + escape(Txt_code) + "&type=1",
success: function(msg) {
alert($.trim(msg));
}
});
}); //*****************
//检测用户名是否存在
$("#Txt_username").blur(function() {
var aa = $("#span_username");
var Txt_username = $.trim($("#Txt_username").val());
if (Txt_username == "")
{ aa.text('用户名不能为空'); validateFlag ="true"; return; }
if (Txt_username.length < 6)
{ aa.text('用户名长度不能小于6位'); validateFlag = true; return; } $.ajax({
type: "POST",
url: "AjaxLog.ashx",
data: "username=" + escape(Txt_username) + "&type=3",
success: function(msg) {
if (Txt_username == "") { aa.text(""); }
else {
if (msg == "1") {
validateFlag = true;
aa.text("该用户名已存在");
} else {
$("#span_username").text("恭喜,该用户名可用");
validateFlag = false;
}
}
}
});
}); function testStregth(word) {
return word.replace(/^(?:([a-z])|([A-Z])|([0-9])|(.)){5,}|(.)+$/g, "$1$2$3$4$5").length;
} //验证密码强度(技巧性利用正则表达式)
//分为数字,小写字母,大写字母,特殊字符4种组合 //验证密码强度
$("#Txt_password").blur(
function() {
$("#passwordPower td span").each(
function()
{ $(this).css("color", "#484848"); }
);
if ($.trim($(this).val()) == "") {
$("#psdStregth").text('密码不能为空');
validateFlag = true;
return false;
}
if ($.trim($(this).val()).length < 6) {
$("#psdStregth").text('密码长度不能小于6位');
validateFlag = true;
return false;
}
else { $("#psdStregth").text('密码可用'); validateFlag = false; }
var flag = testStregth($.trim($(this).val())); if (flag == 1) {
$("#passwordPower td span").each(
function()
{ $(this).css("color", "#484848"); }
);
$("#passwordPower td:eq(0) span").css("color", "red");
} else if (flag == 2 || flag == 3) {
$("#passwordPower td span").each(
function()
{ $(this).css("color", "#484848"); }
);
$("#passwordPower td:eq(1) span").css("color", "red");
} else if (flag == 4) {
$("#passwordPower td span").each(
function()
{ $(this).css("color", "#484848"); }
);
$("#passwordPower td:eq(2) span").css("color", "red");
}
}
); //确认密码
$("#Txt_surepassword").blur(
function() {
if ($.trim($(this).val()) == "")
{ $("#spanSurePsd").text('密码不能为空'); validateFlag = true; return ; }
if ($.trim($(this).val()) != ($("#Txt_password").val()))
{ $("#spanSurePsd").text('两次密码输入不一致'); validateFlag = true; }
else
{ $("#spanSurePsd").text('密码正确'); validateFlag = false; }
}
); //验证邮箱
$("#Txt_email").blur(
function() {
if ($.trim($(this).val()) == "")
{ $("#spanMail").text("邮箱不能为空"); validateFlag = true; return ; }
var reg = /^[a-zA-Z0-9_\.\-]+\@([a-zA-Z0-9\-]+\.)+[a-zA-Z0-9]{2,4}$/; //邮箱正则
if (!reg.test($(this).val()))
{ $("#spanMail").text('请输入正确的邮箱格式'); validateFlag = true; }
else { $("#spanMail").text('邮箱可用'); validateFlag = false; }
}
);
解决方案 »
- 编写高性能JavaScript
- 求助,页面不整齐,如何用js调整
- 最新拖动层插件希望大家帮忙测试下
- 如何让学员资料的修改页面自动显示对应的学员的收费记录
- |zyciis| 想保存某个网站的网页 但是点击保存时,出现一行字,"该网页可能无法正确保存,是否保存"点击保存后,该网页的内容无法正确查看
- 多张图片动态切换且每一张渐隐渐现的出现再消失 如何实现?谢了
- 请教一下大伙 网易这个音乐播放器是怎么做的呢
- 如何能够在输入的时候判断不能够输入超过多少字符,如果超过了将自动清除超过的部分?
- 怎样在一个框架里调用另一个框架的javascript函数啊???
- 关于javascript加密
- 求一个时间递归的算法。。
- 如何让按钮变成灰色
还有我这样在click事件里触发blur事件有问题吗? 我试了trigger()方法,结果也是一样。
$("#Txt_username").blur();
$("#Txt_password").blur();
$("#Txt_surepassword").blur();
$("#Txt_email").blur();
为什么要进行blur();啊,你直接验证不就完了吗?
这样直接触发blur事件 就不用在click事件里重复的写逻辑判断了啊,通过定义一个全局的标识就可以省了,不然click事件里又是一大堆的重复代码。
先从大的方法开始,看执行到哪个方法出错,再细化到方法中的每行代码,感觉JQUERY是好,就是JS有错的时候(例如$("#myid"),没有myid这个ID时),它不报错,啥提示也没的,
所以只能自己细心去找咯,俺有时找,最后找出问题是多个括号,或少个引号呀,哎,谁叫自己不细心呢,再说,你只给这么点东西,想帮你测试也没办法