今天我想偷偷告诉大家一种表单验证的方式 , 就是通过正则验证表单 , 然后用css变更按钮伪类元素样式来实现一个简单验证表单的功能。
一、首先是效果展示
二、html 和 css 代码
<link rel="stylesheet" href="./css/layui.css">
<style>
input:valid ~ button {
pointer-events: all;
cursor: pointer;
background: green
}
input:valid ~ button::after {
color: #fff;
font-weight: bold;
content: "提交";
}
input:invalid ~ button {
background: red
}
input:invalid ~ button::after {
color: #fff;
font-weight: bold;
content: "未通过验证";
}
</style>
<body>
<div class="container">
<input class="layui-input" type="text" name="tel" placeholder="请输入手机号码" pattern="^1[3456789]\d{9}$"
required><br>
<input class="layui-input" type="text" name="test" placeholder="请输入验证码" pattern="\d{4}" required><br>
<button class="layui-input" type="submit" id="btn"></button>
</div>
</body>
三、为了判断是否验证通过 , 执行 js 提交表单
<script>
var btn=document.getElementById("btn");
btn.addEventListener("click",clickhander)
function clickhander() {
var btn=document.defaultView.getComputedStyle(btn,":after").content
if(btn==='"未通过验证"'){
console.log("验证失败");
return false;
}else{
console.log("验证成功");
}
}
</script>
谢谢观看