jQuery表单正则校验(邮箱、手机号、身份证)

→邮箱校验需输入@.符号例如:@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表单正则校验(邮箱、手机号、身份证)相关推荐

封装Form表单正则校验--确认密码正则表达式
封装Form表单正则校验–确认密码正则表达式为什么要封装: 一.因为我们在做项目的时候肯定不会只有一个页面用到这些Form表单的验证! 二.可以很方便的在多个页面中进行使用! 三.对以后系统升级维护 ...
[前台]---js+jquery校验姓名,手机号,身份证号
记一次前台验证姓名,手机号,身份证号的代码,复制即用,前提是有引入jquery. var name = "姓名"if(!is_forbidName(name)){alert(&qu ...
element-ui的表单校验；el-form表单校验；el-form表单自定义校验；手机号校验；车牌号校验；车牌号正则校验；
示例:代码在末尾可以直接复制使用一.基本属性认知: 1. required: true 会有 * , 但仅是触发最后点击提交按钮时,校验某一项位必填:与输入事件或者选择或者失焦时候怎么校验无关 ...
Vue ElementUi 校验邮箱手机号--大全
今天在对邮箱进行校验的时候var reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;没用通过. 解决方式: / ...
正则表达式校验邮箱号、手机号、身份证号码等等
正则表达式,又称正规表示法,是对字符串操作的一种逻辑公式.正则表达式可以检测给定的字符串是否符合我们定义的逻辑,也可以从字符串中获取我们想要的特定部分.它可以迅速地用极简单的方式达到字符串的复杂控 ...
JQuery 表单校验
表单校验的作用为什么要进行表单验证:保证数据符合要求为什么要进行JavaScript或者jQuery表单验证: 1.降低服务器端负担 2.还可以进行服务器验证(JSP) 正则表达式为什么使用正则 ...
Python正则表达式（正则、regular、re）讲解，及常用正则：匹配邮箱、身份证、手机号、IP地址、URL、HTML等
正则表达式(正则.regular.re)是 Python 中最常见的编程技巧,很多时候,一个好的正则表达式可以抵上几十行代码.比如:匹配(校验)邮箱.身份证.手机号.IP地址.URL.HTML等. 正 ...
js常见正则验证：邮箱手机号电话号码账号去掉空格身份证
常见正则验证:邮箱手机号电话号码账号这个博主没什么文采,废话不少说,直接来正文,往下看啊. 检测:电话号码 /* 检测:电话号码验证规则:区号+号码如:01022446688 010-4567 ...
form表单数字校验（二）——邮箱校验-当前页面
form表单数字校验(二)--邮箱校验-当前页面效果代码 index.vue <el-form-item v-if='!isDisabled' label='邮箱'><el-in ...

jQuery表单正则校验(邮箱、手机号、身份证)

jQuery表单正则校验(邮箱、手机号、身份证)相关推荐

最新文章

热门文章