jsp页面基于$.get()表单验证字段唯一

//1、验证用户名
function checkUserName(t) {
//用户名：6-12位，非空，首字母
let span = t.next();
span.empty();
let v = t.val();
let parent = t.parent();
//定义一个正则表达式
let reg = /^[a-zA-Z]\w{5,11}$/;
if (!v) {
span.html("用户名不能为空");
parent.removeClass("ok").addClass("error");
return 0;
} else if (!reg.test(v)) {
span.html("用户名首位字母,6-12位");
parent.removeClass("ok").addClass("error");
return 0;
} else {
let flag = 0;
$.ajaxSettings.async = false;
$.get("checkUserName.jsp", {userName: v}, function (res) {
if (res === "null") {
span.html("用户名可用");
parent.removeClass("error").addClass("ok");
flag = 1;
} else {
span.html("用户名被占用");
parent.removeClass("ok").addClass("error");
}
});
$.ajaxSettings.async = true;
return flag;
}

}

//2、验证密码
function checkPassWord(t) {
//密码：6-12位数字_字母，非空
let span = t.next();
span.empty();
let v = t.val();
let parent = t.parent();
//定义一个正则表达式
let reg = /^\w{6,12}$/;
if (!v) {
span.html("密码不能为空");
parent.removeClass("ok").addClass("error");
return 0;
} else if (!reg.test(v)) {
span.html("密码6-12位数字_字母");
parent.removeClass("ok").addClass("error");
return 0;
}
span.html("密码正确");
parent.removeClass("error").addClass("ok");
return 1;
}

//3、验证重复输入密码
function checkRePassWord(t) {
//密码：6-12位数字_字母，非空
let span = t.next();
span.empty();
let v = t.val();
let parent = t.parent();
if (!checkPassWord($("#userPassword"))) {
span.html("您的密码不符合要求");
parent.removeClass("ok").addClass("error");
return 0;
}
if ($("#userPassword").val() !== v) {
span.html("两次密码输入不一致");
parent.removeClass("ok").addClass("error");
return 0;
}
span.html("重复输入密码正确");
parent.removeClass("error").addClass("ok");
return 1;
}

//4、验证电话号码
function checkTel(t) {
//电话号码：数字，非空，11位，第一位是1，第二位356789
let span = t.next();
span.empty();
let v = t.val();
let parent = t.parent();
//定义一个正则表达式
let reg = /^1[356789]\d{9}$/;
if (!v) {
span.html("电话号码不能为空");
parent.removeClass("ok").addClass("error");
return 0;
} else if (!reg.test(v)) {
span.html("电话号码11位数字，第一位是1，第二位356789");
parent.removeClass("ok").addClass("error");
return 0;
} else {
let flag = 0;
$.ajaxSettings.async = false;
$.get("checkPhone.jsp", {phone: v}, function (res) {
if (res === "null") {
span.html("电话号码可用");
parent.removeClass("error").addClass("ok");
flag = 1;
} else {
span.html("电话号码被占用");
parent.removeClass("ok").addClass("error");
}
});
$.ajaxSettings.async = true;
return flag;
}
}

//5、验证邮箱
function checkEmail(t) {
//邮箱：非空，参考han@126.com,han@yahoo.com.cn,han@yahoo.cn
let span = t.next();
span.empty();
let v = t.val();
//定义一个正则表达式
let reg = /^([a-zA-Z]\w+@\w+\\.com(\\.cn)?)|([a-zA-Z]\w+@\w+\\.cn)$/;
if (!v) {
span.html("邮箱不能为空").css("color", "red");
return 0;
} else if (!reg.test(v)) {
span.html("参考han@126.com,han@yahoo.com.cn,han@yahoo.cn").css("color", "red");
return 0;
}
span.html("邮箱正确").css("color", "green");
return 1;
}

//6、验证性别
function checkGender(t) {
let span = $(".gender_span");
span.empty();
let flag = false;
for (let i = 0; i < t.length; i++) {
if (t[i].checked) {
flag = true;
break;
}
}
if (!flag) {
span.html("性别必须选中一个").css("color", "red");
return 0;
}
span.html("性别选中正确").css("color", "green");
return 1;
}

//7、验证爱好
function checkHobby(t) {
let span = $(".hobby_span");
span.empty();
let flag = false;
for (let i = 0; i < t.length; i++) {
if (t[i].checked) {
flag = true;
break;
}
}
if (!flag) {
span.html("爱好必须选中一个").css("color", "red");
return 0;
}
span.html("爱好选中正确").css("color", "green");
return 1;
}

//8、验证身份证
function checkIdentityNum(t) {
let span = t.next();
span.empty();
let v = t.val();
if (!v) {
span.html("身份证不能为空").css("color", "red");
return 0;
}
//判断长度
let length = v.length;
if (length !== 18) {
span.html("身份证必须18位").css("color", "red");
return 0;
}
//前17位是否是数字
let pre17 = v.substring(0, v.length - 1);
let reg = /^\d{17}$/;
if (!reg.test(pre17)) {
span.html("身份证前17位必须是数字").css("color", "red");
return 0;
}
//截取前2位判断是否符合
let pre2Arr = [
"11", "12", "13", "14", "21", "22", "23",
"21", "22", "23",
"31", "32", "33", "34", "35", "36", "37",
"41", "42", "43", "44", "45", "46",
"50", "51", "52", "53", "54",
"61", "62", "63", "64", "65",
"81", "82", "83"
];
let pre2 = v.substring(0, 2);
let flag = false;
for (let i = 0; i < pre2Arr.length; i++) {
if (pre2Arr[i] === pre2) {
flag = true;
break;
}
}
if (!flag) {
span.html("身份证前2位不符合规则！").css("color", "red");
return 0;
}
//5、截取year判断是否符合要求[1900-2019]
let year = parseInt(v.substring(6, 10));
let date = new Date();
if (year > date.getFullYear() || year < 1900) {
span.html("身份证年份必须在1900-2019").css("color", "red");
return 0;
}
//6、截取month是否符合要求[1-12]
let month = parseInt(v.substring(10, 12));
if (month > 12 || month < 1) {
span.html("身份证月份必须在1-12").css("color", "red");
return 0;
}
//7、截取date是否符合要求[1-28][1-29][1-30][1-31]
let day = parseInt(v.substring(12, 14));
if (month === 4 || month === 6 || month === 9 || month === 11) {
if (day > 30 || day <= 0) {
span.html("身份证日期必须在1-30范围").css("color", "red");
return 0;
}
} else if (month === 2) {
if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
if (day > 29 || day <= 0) {
span.html("身份证日期必须在1-29范围").css("color", "red");
return 0;
}
} else {
if (day > 28 || day <= 0) {
span.html("身份证日期必须在1-28范围").css("color", "red");
return 0;
}
}
} else {
if (day > 31 || day <= 0) {
span.html("身份证日期必须在1-31范围").css("color", "red");
return 0;
}
}
//8、截取校验码
let lastChar = v.substring(17);
reg = /^[\dxX]$/;
if (!reg.test(lastChar)) {
span.html("身份证的最后一位校验码只能是数字、X、x").css("color", "red");
return 0;
}
span.html("身份证正确").css("color", "green");
return 1;
}

//9、验证上传文件类型及大小
function checkFiles(t) {
let arr = ["png", "jpg", "bmp", "jpeg", "gif"];
let span = t.next();
span.empty();
let name = "";
let size = 0;
let parent = t.parent();
//console.log(t);
if (t[0].files.length === 0) {
span.html("请上传文件");
parent.removeClass("ok").addClass("error");
return 0;
}
name = t[0].files[0].name;
size = t[0].files[0].size;
let suffix = name.substring(name.lastIndexOf(".") + 1);
let flag = false;
for (let i = 0; i < arr.length; i++) {
if (arr[i] === suffix) {
flag = true;
break;
}
}
if (!flag) {
span.html("请上传图片类型文件");
parent.removeClass("ok").addClass("error");
return 0;
}
if (size > 3 * 1024 * 1024) {
span.html("请上传图片大小不能超过3MB");
parent.removeClass("ok").addClass("error");
return 0;
}
span.html("图片正确");
parent.removeClass("error").addClass("ok");
return 1;

}

//10、验证用户编码，要验证唯一
function checkUserCode(t) {
//用户编码：6-12位，非空，首字母
let span = t.next();
span.empty();
let parent = t.parent();
let v = t.val();
//定义一个正则表达式
let reg = /^[a-zA-Z]\w{5,11}$/;
if (!v) {
span.html("用户名不能为空");
parent.removeClass("ok").addClass("error");
return 0;
} else if (!reg.test(v)) {
span.html("用户名首位字母,6-12位");
parent.removeClass("ok").addClass("error");
return 0;
} else {
//发起ajax请求判断用户名是否占用
//设置ajax同步
let flag = 0;
$.ajaxSettings.async = false;
$.get("checkUserCode.jsp", {
userCode: v
}, function (res) {
//console.log(res);
if (res === 'null') {
span.html("用户编码可用");
parent.removeClass("error").addClass("ok");
flag = 1;
} else {
span.html("用户编码被占用");
parent.removeClass("ok").addClass("error");
}
});
$.ajaxSettings.async = true;
return flag;
}
}

//11、验证生日
function checkBirthday(t) {
let span = t.next();
span.empty();
let parent = t.parent();
let v = t.val();
if (!v) {
span.html("生日不能为空！");
parent.removeClass("ok").addClass("error");
return 0;
}
span.html("生日正确！");
parent.removeClass("error").addClass("ok");
return 1;
}

$(function () {
//1、username失去焦点验证
$("#userName").blur(function () {
alert(checkUserName($(this)));
});

//2、password失去焦点验证
$("#userPassword").blur(function () {
checkPassWord($(this));
});

//3、password失去焦点验证
$("#userRemi").blur(function () {
checkRePassWord($(this));
});

//4、tel失去焦点验证
$("#phone").blur(function () {
checkTel($(this));
});

//5、email失去焦点验证
$("#email").blur(function () {
checkEmail($(this));
});

//6、gender改变时
$(".gender").change(function () {
checkGender($(".gender"));
});

//7、hobby改变时
$(".hobby").change(function () {
checkHobby($(".hobby"));
});

//8、identityNum失去焦点验证
$("#identityNum").blur(function () {
checkIdentityNum($(this));
});

//9、picpath发生变化验证,注意要使用change事件，否则没有效果
$("#picpath").change(function () {
//console.log($(this));
checkFiles($(this));
});

//10、userCode失去焦点验证
$("#userCode").blur(function () {
checkUserCode($(this));
});

//11、userCode失去焦点验证
$("#birthday").blur(function () {
checkBirthday($(this));
});

//执行表单提交验证，如果返回true就提交，否则不提交
$("#fm").submit(function () {
let num = checkUserName($("#userName")) &
checkPassWord($("#userPassword")) &
checkRePassWord($("#userRemi")) &
checkTel($("#phone")) &
checkUserCode($("#userCode")) &
checkBirthday($("#birthday")) &
checkFiles($("#picpath"));
return num>0;
});
});

转载于:https://www.cnblogs.com/lpzpp/p/11502876.html