Html+Css+Js表单验证(正则表达式)
2022/2/13 6:15:40
本文主要是介绍Html+Css+Js表单验证(正则表达式)，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
Html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<form action="#" method="post">
<label>QQ号：</label><input type="text" id="txtQQ"><span></span><br>
<label>邮箱：</label><input type="text" id="txtEmail"><span></span><br>
<label>手机：</label><input type="text" id="txtPhone" οnblur="checkPhone()"><span id="msgPhone"></span><br>
<input type="submit" value="提交" id="btn"/>
</form>
</body>
</html>
Css部分
* {
margin: 0;
padding: 0;
}
form{
width: 800px;
height: 200px;
margin: 200px auto;
}
label{
display: inline-block;
width: 60px;
text-align: right;
margin-left: 200px;
}
#btn{
margin: 20px 330px;
}
span{
width: 200px;
}
Js部分
window.onload = function() {
//获取文本框
var txtQQ = document.getElementById("txtQQ");
var txtEmail = document.getElementById("txtEmail");
//
txtQQ.onblur = function() {
//获取当前文本框对应的 span
var span = this.nextElementSibling;
var reg = /^\d{5,12}$/;
//判断验证是否成功
if (!reg.test(this.value)) {
//验证不成功
span.innerText = " *请输入正确的 QQ 号";
span.style.color = "red";
} else {
//验证成功
span.innerText = " *验证通过";
span.style.color = "green";
}
};
//邮箱验证部分，封装成函数：
var regEmial = /^\w+@\w+\.\w+(\.\w+)?$/;
//调用函数 ia
addCheck(txtEmail, regEmial, " *请输入正确的邮箱地址");
//给文本框添加验证
function addCheck(element, reg, tip) {
element.onblur = function() {
//获取当前文本框对应的 span
var span = this.nextElementSibling;
//判断验证是否成功
if (!reg.test(this.value)) {
//验证不成功
span.innerText = tip;
span.style.color = "red";
} else {
//验证成功
span.innerText = " *验证通过";
span.style.color = "green";
}
};
}
}
function checkPhone() {
var txtPhone = document.getElementById("txtPhone");
var msgPhone = document.getElementById("msgPhone");
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}$/;
//判断验证是否成功
if (!reg.test(txtPhone.value)) {
//验证不成功
msgPhone.innerText = " *请输入正确的手机号";
msgPhone.style.color = "red";
} else {
//验证成功
msgPhone.innerText = " *验证通过";
msgPhone.style.color = "green";
}
}
这篇关于Html+Css+Js表单验证(正则表达式)的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2025-01-04React 19 来了！新的编译器简直太棒了！
- 2025-01-032025年Node.js与PHP大比拼：挑选最适合的后端技术进行现代web开发
- 2025-01-03?? 用 Gemini API、Next.js 和 TailwindCSS 快速搭建 AI 推文生成项目 ??
- 2024-12-31Vue CLI多环境配置学习入门
- 2024-12-31Vue CLI学习入门：一步一步搭建你的第一个Vue项目
- 2024-12-31Vue3公共组件学习入门：从零开始搭建实用组件库
- 2024-12-31Vue3公共组件学习入门教程
- 2024-12-31Vue3学习入门：新手必读教程
- 2024-12-31Vue3学习入门：初学者必备指南
- 2024-12-30Vue CLI多环境配置教程：轻松入门指南
