表单中常规的正则验证（电话/邮箱/身份证/数字/英文字母组合等）

最新推荐文章于 2020-08-18 08:07:56 发布
最新推荐文章于 2020-08-18 08:07:56 发布
阅读量455 收藏
点赞数
分类专栏： Javascript 文章标签： jquery 正则表达式 表单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010911649/article/details/103281424
版权 
<form class="form">
    <div class="my-form-group">
        <label class="my-form-label">非空<span class="my-form-label-required">*</span></label>
        <input type="text" class="required my-form-input"/>
    </div>
    <div class="my-form-group">
        <label class="my-form-label">电话<span class="my-form-label-required">*</span></label>
        <input type="text" class="required my-form-input telephone"/>
    </div>
    <div class="my-form-group">
        <label class="my-form-label">邮箱<span class="my-form-label-required">*</span></label>
        <input type="text" class="required my-form-input email"/>
    </div>
    <div class="my-form-group">
        <label class="my-form-label">身份证号<span class="my-form-label-required">*</span></label>
        <input type="text" class="required my-form-input idcard"/>
    </div>
    <div class="my-form-group">
        <label class="my-form-label">整数<span class="my-form-label-required">*</span></label>
        <input type="text" class="required my-form-input int"/>
    </div>
    <div class="my-form-group">
        <label class="my-form-label">正整数<span class="my-form-label-required">*</span></label>
        <input type="text" class="required my-form-input posInt"/>
    </div>
    <div class="my-form-group">
        <label class="my-form-label">负整数<span class="my-form-label-required">*</span></label>
        <input type="text" class="required my-form-input negInt"/>
    </div>
    <div class="my-form-group">
        <label class="my-form-label">浮点数（2位）<span class="my-form-label-required">*</span></label>
        <input type="text" class="required my-form-input floatNum"/>
    </div>
    <div class="my-form-group">
        <label class="my-form-label">整数（min-max）<span class="my-form-label-required">*</span></label>
        <input type="text" class="required my-form-input intRange"/>
    </div>
    <div class="my-form-group">
        <label class="my-form-label">浮点数（min-max）<span class="my-form-label-required">*</span></label>
        <input type="text" class="required my-form-input floatRange"/>
    </div>
    <div class="my-form-group">
        <label class="my-form-label">英文+数字<span class="my-form-label-required">*</span></label>
        <input type="text" class="required my-form-input letNum"/>
    </div>
    <div class="my-form-group">
        <label class="my-form-label">英文+符号<span class="my-form-label-required">*</span></label>
        <input type="text" class="required my-form-input letChar"/>
    </div>
    <div class="my-form-group">
        <label class="my-form-label">英文+数字+符号<span class="my-form-label-required">*</span></label>
        <input type="text" class="required my-form-input letCharNum"/>
    </div>
    <div class="my-form-group">
        <label class="my-form-label">仅可输入汉字<span class="my-form-label-required">*</span></label>
        <input type="text" class="required my-form-input chinese"/>
    </div>
    <div class="my-form-group" style="text-align:center;">
        <button type="button" class="layui-btn">保存</button>
        <button type="button" class="layui-btn layui-btn-primary">取消</button>
    </div>
</form>
<style>
    .form{
        position: relative;
        top:1rem;
        left:50%;
        width:60rem;
        margin-left:-30rem;
    }
    .my-form-group{
        clear: both;
        margin-bottom:10px;
    }
    .my-form-label{
        width: 10rem;
        float: left;
        text-align: right;
        padding: 0 0.5rem;
        height: 3rem;
        font-size: 0.8rem;
    }
    .my-form-label-required{
        color:red;
    }
    .my-form-input{
        margin-bottom:5px !important;
        width:50rem !important;
        height:2.5rem !important;
        float: left;
    }
    .error-input{
        border:1px solid red;
    }
    .error{
        color: red;
        clear: both;
        margin-left: 10rem;
    }
    .fa-warning{
        color:#ffcc00;
    }
    @media screen and (max-width:640px){
        .form{
            width:24rem;
            margin-left:-12rem;
        }
        .my-form-label{
            width:6rem;
        }
        .my-form-input{
            width:17rem !important;
        }
    }
</style>
<script>
    // 验证公共方法
    function checkReg($ele,v,reg,errorTip){
        if(v != ''){
            var _this = $ele;
            if(!(reg.test(v))){
                showError($(_this),errorTip);
                return false;
            }else{
                removeError($(_this));
                return true;
            }
        }
    }
    // 验证数值范围的公共方法,当min/max为null时，代表无下/上限，exp为数组格式，代表允许输入的特殊值,iseq代表是否包含边缘数值true/false(默认包含)
    function RangeFunc($ele,type,v,reg,min,max,exp,errorTip1,errorTip2,iseq){
        if(v != ''){
            // 首先根据正则表达式判断输入内容是否为有效数字
            var _this = $ele;
            if(!(reg.test(v))){
                showError($(_this),errorTip1);
                return false;
            }else{
                if(type=='i'){
                    v = parseInt(v);
                    min = parseInt(min);
                    max = parseInt(max);
                }else if(type=='f'){
                    v = parseFloat(v);
                    min = parseFloat(min);
                    max = parseFloat(max);
                }
                var flag = false;
                // 当值为有效数字时，判断是否在范围内（整数/浮点数）
                if(min == null && max != null){
                    if(iseq && max >= v){
                        flag=true;
                    }
                    if(!iseq && max > v){
                        flag=true;
                    }
                }else if(min != null && max == null){
                    if(iseq && min <= v){
                        flag=true;
                    }
                    if(!iseq && min < v){
                        flag=true;
                    }
                }else if(min != null && max != null){
                    if(iseq && min <= v && max >= v){
                        flag=true;
                    }
                    if(!iseq && min < v && max > v){
                        flag=true;
                    }
                }else if(min == null && max == null){
                    alert("方法调用错误，请传入数值范围参数。")
                }
                if(flag){
                    removeError($(_this));
                    return true;
                }else{
                    showError($(_this),errorTip2);
                    return false;
                }
            }
        }
    }
    // 提取公共添加错误提示的方法
    function showError($ele,errorTip){
        $ele.addClass("error-input");
        if($ele.nextAll('.error').length>0){
            $ele.nextAll('.error').html('<span class="fa fa-warning"></span> '+errorTip);
        }else{
            $ele.after('<div class="error"><span class="fa fa-warning"></span> '+errorTip+'</div>');
        }
    }
    // 移除错误提示的方法
    function removeError($ele){
        $ele.removeClass('error-input');
        $ele.nextAll('.error').remove();
    }
    //非空
    $(".required").on("blur",function(){
        var v = $(this).val().trim();
        var tip = '此处不可为空';
        if(v == '') showError($(this),tip);
        else {
            if($(this).nextAll('.error').text() == tip) removeError($(this));
        }
    });
    // 电话
    $('.telephone').on('change',function(){
        var telephone = $(this).val().trim();
        checkReg($(this),telephone,/^1[3456789]\d{9}$/,'电话号码格式错误');
    });
    // 邮箱
    $('.email').on('change',function(){
        var email = $(this).val().trim();
        checkReg($(this),email,/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,'邮箱格式错误');
    })
    // 身份证号码
    $('.idcard').on('change',function(){
        var idcard = $(this).val().trim();
        if(idcard.length == 18){
            // 身份证号=6位地址码+8位出生日期+3位顺序码+1位校验码
            checkReg($(this),idcard,/^((1[1-5])|(2[1-3])|(3[1-7])|(4[1-6])|(5[0-4])|(6[1-5])|71|81|82)[0-9]{4}[1-9][0-9]{3}((0[1-9])|(1[0-2]))(([0-2][0-9])|(3[0-1]))[0-9]{3}[0-9Xx]$/,'身份证号码格式错误');
            // 日期校验
            var dateStr = idcard.substr(6,8);
            var year = parseInt(dateStr.substr(0,4));
            var month = parseInt(dateStr.substr(4,2));
            var day = parseInt(dateStr.substr(6,2));
            var flag = 0;
            // 判断日期是否合理：闰年，及每月最后一天
            if(month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month ==10 || month == 12){
                if(day > 31){
                    flag = 1;
                }
            }else if(month == 4 || month == 6 || month == 9 || month == 11){
                if(day > 30){
                    flag = 1;
                }
            }else if(month == 2){
                if(year%4 == 0){
                    if(day > 28){
                        flag = 1;
                    }
                }else{
                    if(day > 29){
                        flag = 1;
                    }
                }
            }
            // 检验码校验
            var ai = [7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2];//前17位加权因子，每位上的数字x对应的加权因子，所有乘积加和，模11即可得X的值
            var x = [1,0,'X',9,8,7,6,5,4,3,2];//X的值0-10对应如下11个校验码
            var arr = idcard.substr(0,17).split("");
            var sum = 0;
            for(var i=0;i<17;i++){
                sum += arr[i]*ai[i];
            }
            var yzm = x[sum%11];
            if(yzm != parseInt(idcard.substr(17))){
                flag = 1;
            }
            if(flag){
                showError($(this),'身份证号码格式错误');
            }
        }
    })
    // 整数
    $('.int').on('change',function(){
        var int = $(this).val().trim();
        checkReg($(this),int,/^(0|((\-)?[1-9][0-9]*))$/,'整数格式错误');
    })
    // 正整数
    $('.posInt').on('change',function(){
        var posInt = $(this).val().trim();
        checkReg($(this),posInt,/^[1-9][0-9]*$/,'正整数格式错误');
    })
    // 负整数
    $('.negInt').on('change',function(){
        var negInt = $(this).val().trim();
        checkReg($(this),negInt,/^\-[1-9][0-9]*$/,'负整数格式错误');
    })
    // 浮点数（2位）
    $('.floatNum').on('change',function(){
        var floatNum = $(this).val().trim();
        checkReg($(this),floatNum,/^(0.00|((\-)?([1-9][0-9]*)(.)?[0-9]{0,2})|((\-)?0.[0-9]{0,1}[1-9]))$/,'浮点数格式错误');
    })
    // 整数（min-max）  
    $('.intRange').on('change',function(){
        var intRange = $(this).val().trim();
        RangeFunc($(this),0,intRange,/^(0|((\-)?[1-9][0-9]*))$/,-100,100,[],'请输入整数','数值超出指定范围',true);
    })
    // 浮点数（min-max）
    $('.floatRange').on('change',function(){
        var floatRange = $(this).val().trim();
        RangeFunc($(this),1,floatRange,/^(0.00|((\-)?([1-9][0-9]*)(.)?[0-9]{0,2})|((\-)?0.[0-9]{0,1}[1-9]))$/,-100.01,100.01,[],'请输入两位小数','数值超出指定范围',true);
    })
    // 英文+数字   
    $('.letNum').on('change',function(){
        var letNum = $(this).val().trim();
        checkReg($(this),letNum,/^([a-zA-Z0-9])*$/,'仅支持输入英文+数字组合');
    })
    // 英文+指定字符@_*&
    $('.letChar').on('change',function(){
        var letChar = $(this).val().trim();
        checkReg($(this),letChar,/^([a-zA-Z@_*&])*$/,'仅支持输入英文+数字组合');
    }) 
    // 英文+数字+符号
    $('.letCharNum').on('change',function(){
        var letCharNum = $(this).val().trim();
        checkReg($(this),letCharNum,/^([a-zA-Z0-9@_*&])*$/,'仅支持输入英文+数字+指定字符组合');
    })
    // 汉字
    $('.chinese').on('change',function(){
        var chinese = $(this).val().trim();
        checkReg($(this),chinese,/^([\u4e00-\u9fa5])*$/,'仅支持输入汉字');
    })
</script>

 

2021-04-15 测试面试题
weixin_46043529的博客
04-15 7930
第一部分 基础知识部分 (1)请简单列举出你了解的计算机编程语言 C C++ JAVA PHP HTML PYTHON CSS (2)请列举出你了解的熟悉的操作系统 WINDOWS Linux unix qnx (3)简要说明一下数组和链表的区别 不同点:链表是链式的存储结构；数组是顺序的存储结构 链表通过指针来连接元素与元素，数组则是把所有元素按次序依次存储。 链表的插入删除元素相对数组较为简单，不需要移动元素，且较为容易实现长度扩充，但是寻找某个元素较为困难； 数组
原js笔记
Pwsifeng的博客
01-10 2643
s原生JS笔记 电话：17339853876（微信同号） 二阶段学习内容 1、B/S架构（web结构） [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4LYi0Arv-1641803458638)(img1628929434621.png)] 2、前端工程师的工作 人机交互 前后端交互 3、HTML、CSS、JS的作用和关系 一个网页由三部分组成：HTML、CSS、Javascript HTML： 结构（静态） [外链图片转存失败,源站可能有防盗链
js表单验证插件、邮箱验证、中文汉字验证、手机号码验证、数字验证
09-26
js表单验证插件支持多种内容表单验证，有js邮箱地址验证、js中文汉字验证、js手机号码验证、js数字验证等。内含js代码下载。
表单验证 正则表达式实例 EMAIL验证 电话号码验证 中文汉字验证
J
06-28 756
匹配国内电话号码：\d{3}-\d{8}|\d{4}-\d{7} 评注：匹配形式如 0511-4405222 或 021-87888822 匹配腾讯QQ号：[1-9][0-9]{4,} 评注：腾讯QQ号从10000开始 匹配中国邮政编码：[1-9]\d{5}(?!\d) 评注：中国邮政编码为6位数字 匹配身份证：\d{15}|\d{18} 评注：中国的身份证为15位或18位 匹配ip地址：\d+.\d+.\d+.\d+ 评注：提取ip地址时有用 匹配特定数字： 1\d*KaTeX parse error:
form表单验证和事件、正则表达式
weixin_30537451的博客
11-14 348
1、表单验证<form></form> (1).非空验证（去空格） (2).对比验证（跟一个值对比） (3).范围验证（根据一个范围进行判断） (4).固定格式验证：电话号码，身份证号，邮箱，信用卡号等的验证；需要用到正则表达式来进行验证。 (5).其它验证 2、正则表达式 用符号来描述书写规则:/ 中间写正则表达式 / ^ ：匹配开头，$：匹配结...
JS验证身份证号码
numbgui的专栏
09-04 515
var Wi = [ 7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2, 1 ]; // 加权因子 var ValideCode = [ 1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2 ]; // 身份证验证位值.10代表X function IdCardValidate(idCar
正则表达式表单验证，校验电话号码格式、邮箱地址是否合法等
pig_study_JAVA的博客
07-27 704
/是否带有小数/ function isDecimal(strValue ) { var objRegExp= /^\d+.\d+$/; return objRegExp.test(strValue); } /*校验是否中文名称组成 */ function ischina(str) { var reg=/1{2,4}$/; /定义验证表达式/ return reg.test(str); /进行验证/ } /*校验是否全由8位数字组成 */ function isStudentNo(s
layui表单验证
11-01
**解释**：此规则用于验证邮箱地址的格式是否符合常规的邮箱格式。规则中使用了正则表达式来匹配邮箱的基本结构。其中 `\w` 表示字母数字下划线，`@` 和 `.` 是邮箱中的固定字符，而 `[^\s]` 则表示除了空格之外的...
常规正册表达式.txt
10-17
英文字母验证 - **大写字母验证**: - `^[A-Z]+$`: 验证由大写字母组成的字符串。 - **小写字母验证**: - `^[a-z]+$`: 验证由小写字母组成的字符串。 - **混合大小写字母验证**: - `^[A-Za-z]+$`: 验证由大小写...
常用的JavaScript验证
12-02
### 常用JavaScript验证知识点解析 ...当然，在实际项目中，还可能遇到更复杂的数据校验需求，如邮箱格式、身份证号码格式等，这时就需要更加细致的正则表达式设计或引入专门的验证库来辅助完成。
通用的表单验证，邮箱身份证号和电话
c782699991的博客
12-05 1354
onblur="isIdCardNo();" />                                            //增加身份证验证     function isIdCardNo() {     var num = $("#docNo").val();         var factorArr = new Array(
20个功能强大的正则表达式（邮箱、密码、身份证、手机号）
海紫苑打不死马小跳的博客
07-18 1798
1 . 校验密码强度 密码的强度必须是包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间。 ^(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$ 2. 校验中文 字符串仅能是中文。 ^[\\u4e00-\\u9fa5]{0,}$ 3. 由数字、26个英文字母或下划线组成的字符串 ^\\w+$ 4. 校验E-Mail 地址 同密码一样，下面...
Java Web(十)：AdminLTE(中文版)的使用
热门推荐
yu1755128147的博客
02-14 1万+
1、AdminLTE的简介 2、AdminLTE的下载 3、AdminLTE的简单使用
FontAwesome 4.7.0 中完整的675个图标样式CSS参考
weixin_30312563的博客
03-26 2367
FontAwesome 4.7.0 中完整的675个图标样式CSS参考 用法：首先引入CSS文件：<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">然后用 <i class="fa fa-XXXX"><...
写CSS选择器时标签的class属性值中有空格的问题
陈广智的专栏
08-18 5028
1 问题描述 HTML代码片段为： <div class="alert alert-warning"> 请至“随书下载”下载本书的示例程序。 </div> <div class="book-intro readmore"> 本书通过正在学习机器学习的程序员绫乃和她朋友美绪的对话，结合回归和分类的具体问题，逐步讲解了机器学习中实用的数学基础知识。其中，重点讲解了容易成为学习绊脚石的数学公式和符号。同时，还通过实际的Python 编程讲解了数学公式的应用，进而加深读
function checkAll(){
jieVmei的博客
06-06 751
用户信息 function isDate(str){ var reg = /^(\d{4})\-(\d{2})\-(\d{2})$/ ; if (reg.test(str)){ return true; } else { return false; ...
js中正则表达式
u012453607的专栏
10-09 504
javascript/JS限制用户名只能输入字母和数字下划线 function checkreg(){        var msg = "对不起，输入错误\n";        var regform = document.all.reg;        var username = regform.username;        var password1 =
JavaScript使用正则表达式进行邮箱表单验证实例
再小的帆也能远航，把分享变成一种习惯
01-22 6166
*******JavaScript使用正则表达式进行邮箱表单验证实例************ 1.在JavaScript中也可以使用正则表达式对表单输入的数据进行验证格式如下 /正则表达式/.test(验证内容) 扩展：JavaScript中正则表达式对象(RegExp)存在3个方法         *（1）test()             test() 方法检索字符串中的指定
完整的表单验证实例（含用户名密码长度、邮箱手机号格式验证）
weixin_47982238的博客
08-15 1403
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style> *{ font-family: 微软雅黑; } .error{ color:#f00; font-.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值