#JavaScript JQuery 实现新用户注册

阶段1：练习——完成新用户注册页面

• 需求说明

• 验证用户输入内容的有效性

• 文本框获得焦点时，提示文本框中应该输入的内容

• 文本框失去焦点时，验证文本框中的内容，并提示错误信息

//验证密码

$("[name=password]").blur(function () {

$("#pwdDiv").removeClass(“green”);

$("#pwdDiv").removeClass(“red”);

var pwd = KaTeX parse error: Undefined control sequence: \w at position 43: … var reg = /^\̲w̲{6,16}/;

$("#pwdDiv").text("");

if(pwd ==""){

$("#pwdDiv").addClass(“red”);

$("#pwdDiv").html(“登录密码不能为空”);

}else if(!reg.test(pwd)){

$("#pwdDiv").addClass(“red”);

$("#pwdDiv").html(“重复密码长度必须为6-16位字符”);

}else {

$("#pwdDiv").addClass(“green”);

$("#pwdDiv").html(“输入正确”);

isRight[1] = true;

}

});

//验证重复密码

$("[name = rePassword]").blur(function () {

$("#rePwdDiv").removeClass(“green”);

$("#rePwdDiv").removeClass(“red”);

var rePwd = $(this).val();var pwd = $("[name=password]").val();$("#rePwdDiv").text("");if(rePwd ==""){$("#rePwdDiv").addClass("red");$("#rePwdDiv").html("<img src='imgs/warn.png' alt=''>重复密码不能为空");}else if(rePwd != pwd){$("#rePwdDiv").addClass("red");$("#rePwdDiv").html("<img src='imgs/warn.png' alt=''>俩次输入的密码不一致");}else {$("#rePwdDiv").addClass("green");$("#rePwdDiv").html("<img src='imgs/ok.png'>输入正确");isRight[2] = true;}});

//真实姓名

$("[name = rname]").blur(function () {

$("#rnameDiv").removeClass(“green”);

$("#rnameDiv").removeClass(“red”);

var rname = $(this).val();var nameReg = /^[\u4E00-\u9FA5]{2,4}$/;$("#rnameDiv").text("");if(rname ==""){$("#rnameDiv").addClass("red");$("#rnameDiv").html("<img src='imgs/warn.png' alt=''>姓名不能为空");}else if(!nameReg.test(rname)){$("#rnameDiv").addClass("red");$("#rnameDiv").html("<img src='imgs/warn.png' alt=''>请输入正确的姓名");}else {$("#emailDiv").removeClass("green");$("#rnameDiv").addClass("green");$("#rnameDiv").html("<img src='imgs/ok.png'>输入正确");isRight[3] = true;}});

//昵称

$("[name = xm]").blur(function () {

$("#xmDiv").removeClass(“green”);

var xm = $(this).val();

$("#xmDiv").text("");

if(xm ==""){

$("#xmDiv").addClass("red");$("#xmDiv").html("<img src='imgs/warn.png' alt=''>昵称不能为空");} else {$("#emailDiv").removeClass("green");$("#xmDiv").addClass("green");$("#xmDiv").html("<img src='imgs/ok.png'>输入正确");isRight[4] = true;}});

//关联手机号

$("[name = phone]").blur(function () {

$("#phoneDiv").removeClass(“green”);

$("#phoneDiv").removeClass(“red”);

var phone = KaTeX parse error: Undefined control sequence: \d at position 59: …^1[3|4|5|7|8|9]\̲d̲{9}/;

$("#phoneDiv").text("");

if(phone ==""){

$("#phoneDiv").addClass("red");$("#phoneDiv").html("<img src='imgs/warn.png' alt=''>手机号不能为空");}else if(!reg.test(phone)){$("#phoneDiv").addClass("red");$("#phoneDiv").html("<img src='imgs/warn.png' alt=''>请输入正确的手机号");}else {$("#phoneDiv").addClass("green");$("#phoneDiv").html("<img src='imgs/ok.png'>输入正确");isRight[5] = true;}});

//邮箱

$("[name = email]").blur(function () {

var email = $(this).val();

$("#emailDiv").removeClass(“yellow”);

KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲emailDiv").remo…/;

$("#emailDiv").text("");

if(email ==""){

$("#emailDiv").addClass("red");$("#emailDiv").html("<img src='imgs/warn.png' alt=''>邮箱不能为空");}else if(!reg.test(email)){$("#emailDiv").addClass("red");$("#emailDiv").html("<img src='imgs/warn.png' alt=''>请输入正确的邮箱");}else {$("#emailDiv").removeClass("red");$("#emailDiv").addClass("green");$("#emailDiv").html("<img src='imgs/ok.png'>输入正确");isRight[6] = true;}});$("[name = email]").focus(function () {$("#emailDiv").addClass("yellow");$("#emailDiv").text("请输入您常用的邮箱");});

//提交

$(":submit").click(function () {var is = false;var count = 0;var m = length1(isRight);for (var i = 0; i < m; i++) {if(isRight[i] == true){count++;}}if(count === 7) {is = true;return is;}else{alert("输入有误,请检查您的输入是否正确")return is;}});});</script>