bootstrap前端校验，先验证，输入通过才能提交，否则无法提交——附加mac地址校验

最新推荐文章于 2023-12-29 16:05:14 发布

鲸鱼姐

最新推荐文章于 2023-12-29 16:05:14 发布

阅读量1.1k

点赞数 1

分类专栏： bootstrap

本文链接：https://blog.csdn.net/zhaolulu916/article/details/104134178

版权

bootstrap 专栏收录该内容

42 篇文章 6 订阅

订阅专栏

简介：项目需要在前端进行校验，特写了本篇内容

1. 校验联系方式正确性和出生日期不能为空，先验证，输入通过才能提交，否则无法提交。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <title>Title</title>
</head>
<body>
<form th:action="@{/employee/addEmployee}" method="post" onsubmit="return tijiao();">
    <div class="form-group">
        <label>联系方式</label>
        <input type="text" value="" name="phone" id="phone" class="form-control" onblur="phoneJY()"/>
        <span id="phoneJY"></span>
    </div>
    <div class="form-group">
        <label>出生日期</label>
        <input type="Date" value="" name="birthDate" id="birthDate" class="form-control" onblur=" birthDateJY()"/>
        <span id="birthDateJY"></span>
    </div>
    <input type="submit" value="提交">
</form>
</body>
<script>
$(document).ready(function(){
//先验证后输入
        birthDateJY();
		phoneJY();
  });
function birthDateJY(){
var birthDate= $("#birthDate").val();
if(birthDate==null || birthDate=="") {
$("#birthDateJY").css("color", "red");
$("#birthDateJY").text("❌出生日期不能为空");

}else{
$("#birthDateJY").css("color", "green");
$("#birthDateJY").text("✔出生日期合法");
return true;
}
return false;
}
function phoneJY() {
var reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
var phone = $("#phone").val();
if(phone==null || phone == ""){
$("#phoneJY").css("color","red");
$("#phoneJY").text("❌电话号码不能为空");

}else if(!reg.test(phone)){
$("#phoneJY").css("color","red");
$("#phoneJY").text("❌电话号码不合法");

}else{
$("#phoneJY").css("color","green");
$("#phoneJY").text("✔电话号码合法");
return true;
}
return false;
}
function tijiao() {
 if(birthDateJY()&&phoneJY())
 return true;
 else
 { alert("输入错误，不能提交");
  return false;
 }
}
</script>

2.mac地址校验

（1）mac地址 ff-ff-ff-ff-ff 参照文章https://blog.csdn.net/momdiy/article/details/79679921

正则表达式为：/([A-Fa-f0-9]{2}-){5}[A-Fa-f0-9]{2}

（2）mac地址 ffff-ffff-ffff

效果如下：

正则表达式为：[A-Fa-f0-9]{4}-[A-Fa-f0-9]{4}-[A-Fa-f0-9]{4}

 <div class="form-group">
        <label>MAC</label>
        <input type="text" value="" name="mac" id="mac" class="form-control" onblur="macJY()"/>
        <span id="macJY"></span>
    </div>

function macJY() {
var reg = /^[A-Fa-f0-9]{4}-[A-Fa-f0-9]{4}-[A-Fa-f0-9]{4}$/
var mac = $("#mac").val();
if(mac==null || mac == ""){
$("#macJY").css("color","red");
$("#macJY").text("❌mac不能为空");

}else if(!reg.test(mac)){
$("#macJY").css("color","red");
$("#macJY").text("❌mac不合法，格式应为ffff-ffff-ffff");

}else{
$("#macJY").css("color","green");
$("#macJY").text("✔mac合法");
return true;
}
return false;
}

鲸鱼姐

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
bootstrap前端校验，先验证，输入通过才能提交，否则无法提交——附加mac地址校验

简介：项目需要在前端进行校验，特写了本篇内容1. 校验联系方式正确性和出生日期不能为空，先验证，输入通过才能提交，否则无法提交。<!DOCTYPE html><html lang="en" xmlns:th="http://www.w3.org/1999/xhtml"><head> <meta charset="UTF-8"&gt...
复制链接

扫一扫