今天我想偷偷告訴大家一種表單驗證的方式 , 就是通過正則驗證表單 , 然後用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>
謝謝觀看