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; }); });