表单验证(正则表达式)

最新推荐文章于 2021-02-21 10:04:33 发布

已成回忆1234

最新推荐文章于 2021-02-21 10:04:33 发布

阅读量220

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/dxt0528/article/details/78827835

本文介绍了一个使用jQuery实现的表单验证案例，包括账号、密码、昵称等字段的格式检查，确保用户输入符合规范。此外，还实现了提交后的清空功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.11.1.js"></script>
<script>
function add(){
var zhanghao = $(".number").val();
var pass = $(".pass").val();
var pass2 = $(".pass2").val();
var nicheng = $(".name").val();
var data = $(".data").val();
var sex = $(".sex").val();
var shen = $(".shen").val();
var tel = $(".tel").val();
var qq = $(".qq").val();
var email = $(".email").val();
var y1 = false;
var y2 = false;
var y3 = false;
var y4 = false;
var y5 = false;
var y6 = false;
var y7 = false;
var y8 = false;
//表单验证
var reg = /^[A-Za=z0-9]+$/;
if (!reg.test(zhanghao)) {
$(".zhanghaospan").text("账号格式不正确");
$(".zhanghaospan").css("color","red");
}else{
$(".zhanghaospan").text("√");
$(".zhanghaospan").css("color","green");
y1=true;
}

var reg = /^[A-Z]\w{3,17}$/;
if (!reg.test(pass)) {
$(".passspan").text("密码格式不正确");
$(".passspan").css("color","red");
}else{
$(".passspan").text("√");
$(".passspan").css("color","green");
y2=true;
}

if (pass2!=pass||pass2=="") {
$(".pass2span").text("两次密码不一致");
$(".pass2span").css("color","red");
}else{
$(".pass2span").text("√");
$(".pass2span").css("color","green");
y3=true;
}

//判断昵称
if (!nicheng.indexOf("昵称")||nicheng=="") {
$(".namespan").text("昵称重复而且不能为空");
$(".namespan").css("color","red");
}else{
$(".namespan").text("√");
$(".namespan").css("color","green");
y4=true;
}
//判断身份证号
var reg = /^\d{18}$/;
if (!reg.test(shen)) {
$(".shenspan").text("身份证号格式不对");
$(".shenspan").css("color","red");
}else{
$(".shenspan").text("√");
$(".shenspan").css("color","green");
y5=true;
}

//判断手机号
var reg = /^[1]+\d{10}$/;
if (!reg.test(tel)) {
$(".telspan").text("手机号格式不对");
$(".telspan").css("color","red");
}else{
$(".telspan").text("√");
$(".telspan").css("color","green");
y6=true;
}

//判断身QQ号
var reg = /^\d{5,}$/;
if (!reg.test(qq)) {
$(".qqspan").text("QQ号格式不对");
$(".qqspan").css("color","red");
}else{
$(".qqspan").text("√");
$(".qqspan").css("color","green");
y7=true;
}

//验证邮箱
var reg = /^.+(com)$/;
if (!email.indexOf("@")||!reg.test(email)) {
$(".emailspan").text("邮箱格式不对");
$(".emailspan").css("color","red");
}else{
$(".emailspan").text("√");
$(".emailspan").css("color","green");
y8 = true;
}
if (y1&&y2&&y3&&y4&&y5&&y6&&y7&&y8) {
alert("提交成功！！");
clears();
}

}
function clears(){
var zhanghao = $(".number").val("");
var pass = $(".pass").val("");
var pass2 = $(".pass2").val("");
var nicheng = $(".name").val("");
var data = $(".data").val("");
var sex = $(".sex").val("");
var shen = $(".shen").val("");
var tel = $(".tel").val("");
var qq = $(".qq").val("");
var email = $(".email").val("");
$(".zhanghaospan").text("");
$(".passspan").text("");
$(".pass2span").text("");
$(".namespan").text("");
$(".dataspan").text("");
$(".sexspan").text("");
$(".shenspan").text("");
$(".telspan").text("");
$(".qqspan").text("");
$(".emailspan").text("");
}
</script>
</head>
<body>
<table style="width: 500px; height: auto; margin: 0 auto; background: aliceblue;" >
<tr>
<td colspan="2">注册<br/><div style="height: 1px; width: 100%; background: #000000;"></div></td>
</tr>
<tr>
<td>账号：</td>
<td><input type="text" class="number"/><span class="zhanghaospan"></span></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="text" class="pass"/><span class="passspan"></span></td>
</tr>
<tr>
<td>重复密码：</td>
<td><input type="text" class="pass2"/><span class="pass2span"></span></td>
</tr>
<tr>
<td>昵称：</td>
<td><input type="text" class="name"/><span class="namespan"></span></td>
</tr>
<tr>
<td>出生日期：</td>
<td><input type="date" class="data"/><span class="dataspan"></span></td>
</tr>
<tr>
<td>性别:</td>
<td><input type="radio" class="sex" name="sex" value="男" checked="checked"/>男<input type="radio" class="sex" name="sex" value="女"/>女<span class="sexspan"></span></td>
</tr>
<tr>
<td>身份证号：</td>
<td><input type="text" class="shen"/><span class="shenspan"></span></td>
</tr>
<tr>
<td>手机号：</td>
<td><input type="text" class="tel"/><span class="telspan"></span></td>
</tr>
<tr>
<td>QQ：</td>
<td><input type="text" class="qq"/><span class="qqspan"></span></td>
</tr>
<tr>
<td>邮箱：</td>
<td><input type="text" class="email"/><span class="emailspan"></span></td>
</tr>
<tr>
<td><input type="button" value="提交" onclick="add()" class="tj" style="width: 80px ; height: 30px; border-radius: 20%; background: #00ffff;"/></td>
<td><input type="button" value="清空" class="clear" onclick="clears()" style="width: 80px ; height: 30px; border-radius: 20%;"/></td>
</tr>
</table>
</body>
</html>