jquery表单验证
2020-10-30 本文已影响0人
小王同学123321
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单验证</title>
<script type="text/javascript" charset="utf8" src='../../domain/static/js/jquery.min.js'></script>
</head>
<body>
<form id="fm" action="http://www.baidu.com" method="post" enctype="multipart/form-data">
<div>
<span>UserName:</span>
<input type="text" name="username" id="username" placeholder="username"/>
<span>*</span>
</div>
<div>
<span>PassWord:</span>
<input type="password" name="password" id="password" placeholder="password"/>
<span>*</span>
</div>
<div>
<span>RePassWord:</span>
<input type="password" name="rePassword" id="rePassword" placeholder="rePassword"/>
<span>*</span>
</div>
<div>
<span>Tel:</span>
<input type="text" name="tel" id="tel" placeholder="tel" maxlength="11"/>
<span>*</span>
</div>
<div>
<span>Email:</span>
<input type="text" name="email" id="email" placeholder="email"/>
<span>*</span>
</div>
<div>
<span>Gender:</span>
<input type="radio" name="gender" class="gender" value="0"/>女
<input type="radio" name="gender" class="gender" value="1"/>男
<span class="gender_span">*</span>
</div>
<div>
<span>Hobby:</span>
<input type="checkbox" name="hobby" class="hobby" value="movie"/>movie
<input type="checkbox" name="hobby" class="hobby" value="sport"/>sport
<input type="checkbox" name="hobby" class="hobby" value="climb"/>climb
<input type="checkbox" name="hobby" class="hobby" value="travel"/>travel
<input type="checkbox" name="hobby" class="hobby" value="football"/>football
<span class="hobby_span">*</span>
</div>
<div>
<span>IdentityNum:</span>
<input type="text" name="identityNum" id="identityNum" maxlength="18" placeholder="rePassword"/>
<span>*</span>
</div>
<div>
<span>Image:</span>
<input type="file" name="picPath" id="picPath"/>
<span>*</span>
</div>
<div>
<input type="submit"/>
<input type="reset"/>
</div>
</form>
<script>
//1、验证用户名
function checkUserName(t) {
//用户名：6-12位，非空，首字母
let span = t.next();
span.empty();
let v = t.val();
//定义一个正则表达式
let reg = /^[a-zA-Z]\w{5,11}$/;
if (!v) {
span.html("用户名不能为空").css("color", "red");
return 0;
} else if (!reg.test(v)) {
span.html("用户名首位字母,6-12位").css("color", "red");
return 0;
}
span.html("用户名正确").css("color", "green");
return 1;
}
//2、验证密码
function checkPassWord(t) {
//密码：6-12位数字_字母，非空
let span = t.next();
span.empty();
let v = t.val();
//定义一个正则表达式
let reg = /^\w{6,12}$/;
if (!v) {
span.html("密码不能为空").css("color", "red");
return 0;
} else if (!reg.test(v)) {
span.html("密码6-12位数字_字母").css("color", "red");
return 0;
}
span.html("密码正确").css("color", "green");
return 1;
}
//3、验证重复输入密码
function checkRePassWord(t) {
//密码：6-12位数字_字母，非空
let span = t.next();
span.empty();
let v = t.val();
if (!checkPassWord($("#password"))) {
span.html("您的密码不符合要求").css("color", "red");
return 0;
}
if ($("#password").val() !== v) {
span.html("两次密码输入不一致").css("color", "red");
return 0;
}
span.html("重复输入密码正确").css("color", "green");
return 1;
}
//4、验证电话号码
function checkTel(t) {
//电话号码：数字，非空，11位，第一位是1，第二位356789
let span = t.next();
span.empty();
let v = t.val();
//定义一个正则表达式
let reg = /^1[356789]\d{9}$/;
if (!v) {
span.html("电话号码不能为空").css("color", "red");
return 0;
} else if (!reg.test(v)) {
span.html("电话号码必须是数字，非空，11位，第一位是1，第二位356789").css("color", "red");
return 0;
}
span.html("电话号码正确").css("color", "green");
return 1;
}
//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;
//console.log(t);
if (t[0].files.length === 0) {
span.html("请上传文件").css("color", "red");
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("请上传图片类型文件").css("color", "red");
return 0;
}
if (size > 3 * 1024 * 1024) {
span.html("请上传图片大小不能超过3MB").css("color", "red");
return 0;
}
span.html("图片正确").css("color", "green");
return 1;
}
$(function(){
//1、username失去焦点验证
$("#username").blur(function(){
checkUserName($(this));
});
//2、password失去焦点验证
$("#password").blur(function () {
checkPassWord($(this));
});
//3、password失去焦点验证
$("#rePassword").blur(function () {
checkRePassWord($(this));
});
//4、tel失去焦点验证
$("#tel").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));
});
//8、identityNum失去焦点验证,注意要使用change事件，否则没有效果
$("#picPath").change(function () {
//console.log($(this));
checkFiles($(this));
});
//执行表单提交验证，如果返回true就提交，否则不提交
$("#fm").submit(function(){
let num = checkUserName($("#username")) &
checkPassWord($("#password")) &
checkRePassWord($("#rePassword")) &
checkTel($("#tel")) &
checkEmail($("#email")) &
checkGender($(".gender")) &
checkHobby($(".hobby")) &
checkIdentityNum($("#identityNum")) &
checkFiles($("#picPath"));
console.log(num)
return num > 0;
});
});
</script>
</body>
</html>
