→郵箱校驗需輸入@.符號? ? ? ? 例如:@Gmail.com

→手機號校驗需開頭以1開頭的11位純數字

→身份證校驗需18位純數字

★效果圖如下

→ NO : 提交按鈕

→ OFF :清空輸入框內容

★CSS

<style>ul li{list-style-type: none;height: 50px;}form ul:last-child input{background-image: -webkit-linear-gradient(darksalmon,#527590);-webkit-background-clip: text;-webkit-text-fill-color: transparent;border: none;}form ul:first-child input{background-image: -webkit-linear-gradient(darksalmon,#527590);-webkit-background-clip: text;-webkit-text-fill-color: transparent;border-radius: 10px;border: 1px #527590 solid;}span{background-image: -webkit-linear-gradient(darksalmon,#527590);-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-size: 13px;}</style>

★HTML

<form><ul class="ul_one"><li><input type="text" placeholder="郵箱校驗" id="first"> <span id="checkfirst"> </span></li><li><input type="text" placeholder="手機號校驗" id="second"> <span id="checksecond"> </span></li><li><input type="text" placeholder="身份證號校驗" id="third"><span id="checkthird"> </span></li></ul><ul><li><input type="submit" value="NO"></li><li><input type="button" value="OFF" id="OFF"></li></ul> </form>

★jQurey

<script>$(function () {$("#first").blur(checkfirst);$("#second").blur(checksecond);$("#third").blur(checkthird);$('#OFF').click(function () {$('.ul_one input').val("")})$("form").submit(function () {let flag = true;if (!checkfirst()){flag = false;}if (!checksecond()){flag = false;}if (!checkthird()){flag = false;}return flag;});function checkfirst() {let first = $("#first");let checkfirst = $("#checkfirst");let one =/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;checkfirst.html("");if (first.val() === ""){checkfirst.html("非空");return false;}if (one.test(first.val()) === false){checkfirst.html("郵箱格式錯誤");return false;}return true;}function checksecond() {let second = $("#second");let checksecond = $("#checksecond");checksecond.html("");let two = /^1\d{10}$/;if (second.val() === ""){checksecond.html("非空");return false;}if (two.test(second.val()) === false){checksecond.html("手機號格式錯誤");return false;}return true;}function checkthird(){let third = $("#third");let checkthird = $("#checkthird");let three =/^\d{18}$/;checkthird.html("");if (third.val() === ""){checkthird.html("非空");return false;}if (three.test(third.val()) === false){checkthird.html("身份證號格式錯誤");return false;}return true;}}) </script>

?Ps : 不要忘記引入jQuery

總結

以上是生活随笔為你收集整理的jQuery表单正则校验(邮箱、手机号、身份证)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。