适用于大部分正则判断输入

TNT，cnd 2019-01-18 05:03:08
开发工具与关键技术：Visual Studio html css javascript
作者：华境聪
撰写时间：2019/1/18
包含个人对正则判断及使用。适用大多数正则判断，可供大家参考学习。
关键点：对正则判断式的了解；“maxlength”限制最大长度；改变提示信息并返回””；


@{

    Layout = null;

}



<!DOCTYPE html>



<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>zheze</title>

    <script src="~/Content/jquery-2.0.3.min.js"></script>

    <style>

        .first{

            margin-top:10px;

        }

    </style>

</head>

<body>

    <div> 

        <div class="first">身份证号： <input id="identity" maxlength="19"/></div> 

        <div class="first">电话号码： <input id="phone" maxlength="13"/></div>

        <div class="first">日期： <input id="date" placeholder="yyyy-mm-dd" maxlength="12"/></div>

        <div class="first">汉字： <input id="hanzi" /></div>

        <div class="first">数字： <input id="figure" /></div>

        <div class="first">所有字母： <input id="letter" /></div>

        <div class="first">大写字母： <input id="bigletter" /></div>

        <div class="first">小写字母： <input id="xiaoletter" /></div>

        <div class="first">不能由特殊字符只能由数字、大小写字母组成： <input id="kong" /></div>

    </div>

    <script>

        $('#identity').blur(function () {

            var identity = document.getElementById("identity").value;

            if (/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4}$/.test(identity)) {

            }else{

                document.getElementById("identity").value = '';

                document.getElementById("identity").setAttribute("placeholder", "身份证号不正确请重新输入");

            };

        })

        $('#phone').blur(function () {

            var phone = document.getElementById("phone").value;

            if (/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/.test(phone)) {

            } else {

                document.getElementById("phone").value = '';

                document.getElementById("phone").setAttribute("placeholder", "电话号码不正确请重新输入");

            };

        })

        $('#date').blur(function () {

            var date = document.getElementById("date").value;

            if (/^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/.test(date)) {

            } else {

                document.getElementById("date").value = '';

                document.getElementById("date").setAttribute("placeholder", "日期格式不正确请重新输入");

            };

        })

        $('#hanzi').blur(function () {

            var hanzi = document.getElementById("hanzi").value;

            if (/^[\u4e00-\u9fa5]$/.test(hanzi)) {

            } else {

                document.getElementById("hanzi").value = '';

                document.getElementById("hanzi").setAttribute("placeholder", "格式不正确请重新输入");

            };

        })

        $('#figure').blur(function () {

            var figure = document.getElementById("figure").value;

            if (/^[0-9]$/g.test(figure)) {

            } else {

                document.getElementById("figure").value = '';

                document.getElementById("figure").setAttribute("placeholder", "格式不正确请重新输入");

            };

        })

        $('#letter').blur(function () {

            var letter = document.getElementById("letter").value;

            if (/[A-Za-z]$/g.test(letter)) {

            } else {

                document.getElementById("letter").value = '';

                document.getElementById("letter").setAttribute("placeholder", "格式不正确请重新输入");

            };

        })

        $('#bigletter').blur(function () {

            var bigletter = document.getElementById("bigletter").value;

            if (/^[A-Z]$/.test(bigletter)) {

            } else {

                document.getElementById("bigletter").value = '';

                document.getElementById("bigletter").setAttribute("placeholder", "格式不正确请重新输入");

            };

        })

        $('#xiaoletter').blur(function () {

            var xiaoletter = document.getElementById("xiaoletter").value;

            if (/^[a-z]$/.test(xiaoletter)) {

            } else {

                document.getElementById("xiaoletter").value = '';

                document.getElementById("xiaoletter").setAttribute("placeholder", "格式不正确请重新输入");

            };

        })

        $('#kong').blur(function () {

            var kong = document.getElementById("kong").value;

            if (/[A-Za-z0-9]$/.test(kong)) {

            } else {

                document.getElementById("kong").value = '';

                document.getElementById("kong").setAttribute("placeholder", "格式不正确请重新输入");

            };

        })

    </script>

</body>

</html>

以及输出的截图:


在这里就不一一演示了，需要的话自己测试下，最主要还是理解。
...全文
301 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
scscms太阳光 2019-01-22
  • 打赏
  • 举报
 回复 
<div class="first">身份证号： <input maxlength="19" placeholder="请输入正确的身份证号" data-reg="^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4}$"/></div>

<div class="first">电话号码： <input maxlength="13" placeholder="请输入正确的手机号码" data-reg="^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$"/></div>

....省略....

<script>

    // 不依懒库，只修改html不影响js代码

    window.onload = function () {

        Array.from(document.querySelectorAll('.first input')).forEach(function(input){

            input.addEventListener('blur',function(e){

                var tag = e.target

                tag.value = new RegExp(tag.dataset.reg).test(tag.value) ? tag.value : ''

            },false)

        })

    }

</script>
低丶调 2019-01-21
  • 打赏
  • 举报
 回复
引用 2 楼 丰云 的回复:
看看我这个吧
虽然还不完美，但能看懂就算你学到了。。。。


function vivaValid(obj) {

    var r = '',

        o = $(obj),

        v = o.val(),

        n = o.attr('name'),

        typ = o.attr('type'),

        tag = o.get(0).tagName.toLowerCase(),     //输入框类型input、textarea、select、checkbox、radio等

        reg = o.attr('vali_reg'),    //校验用正则表达式

        msg = o.attr('vali_msg'),    //校验结果通知消息

        mbx = o.attr('msg_box'),     //显示校验消息的容器编号

        max = o.attr('maxlength'),   //最大长度限制

        min = o.attr('minlength'),   //最小长度限制

        url = o.attr('vali_only'),   //匹配项的编号

        mth = o.attr('vali_match'),  //匹配项的编号

        btn = o.attr('lock_btn'),    //需禁用的按钮编号(逗号分隔)

        lks = o.attr('lock_self'),   //验证不过时，是否焦点锁定自己

        rqr = o.is(':required');     //是否必填

    $('.warn-msg').remove();

    $('#error-message').html('');

    var r = (rqr && tag == 'input'    && !v) ? msg || 'This can not be empty'

          : (rqr && tag == 'input'    && o.attr('type') == 'checkbox' && !o.is(':checked')) ? msg || 'Please checked it to continue'

          : (rqr && tag == 'input'    && v && typ == 'email' && !validEmail(v)) ? 'Incorrect email format'

          : (rqr && tag == 'textarea' && !v) ? msg || 'This can not be empty'

          : (rqr && tag == 'select'   && !v) ? msg || 'This must select one to continue'

          : (min != undefined && v && v.length < parseInt(min, 10)) ? ('Must be at least ' + min + ' characters')

          : (max != undefined && v && v.length > parseInt(max, 10)) ? ('No more than ' + max + ' characters')

          : (reg != undefined && msg != undefined && v && !(new RegExp(reg, 'g')).test(v)) ? msg

          : (mth != undefined && msg != undefined && v && v != $('#' + mth).val()) ? msg

          : (url != undefined && v) ? checkOnly(url, v, n)

          : '';

    if (mbx) {//有指定消息容器

        $('#' + mbx).html(r);

    } else {//默认显示在校验标签后面

        //没通过则显示提示消息，通过则取消显示，这里样式自己灵活设定

        r ? $('<p class="help-block warn-msg">' + r + '</p>').insertAfter(o) : $('.warn-msg').remove(); 

    }

    r && (lks == undefined || lks) && o.focus(); //默认锁定，只有指定并且值为true，才焦点锁定自己

    if (btn != undefined) { //指定了禁用按钮

        var btns = btn.split(','); //用逗号分割指定的多个按钮编号

        for (var i = 0; i < btns.length; i++) {

            //根据验证结果，逐个禁用或解禁指定的提交按钮

            r ? $('#' + btns[i]).attr('disabled', 'disabled') : $('#' + btns[i]).removeAttr('disabled'); 

        }

    }

}



引用 1 楼 scscms太阳光 的回复:
你知道不知道这种代码面试时过不了初试！


这位仁兄的代码呢？可以过初试吗？
丰云 2019-01-21
  • 打赏
  • 举报
 回复
看看我这个吧 虽然还不完美，但能看懂就算你学到了。。。。 

function vivaValid(obj) {
    var r = '',
        o = $(obj),
        v = o.val(),
        n = o.attr('name'),
        typ = o.attr('type'),
        tag = o.get(0).tagName.toLowerCase(),     //输入框类型input、textarea、select、checkbox、radio等
        reg = o.attr('vali_reg'),    //校验用正则表达式
        msg = o.attr('vali_msg'),    //校验结果通知消息
        mbx = o.attr('msg_box'),     //显示校验消息的容器编号
        max = o.attr('maxlength'),   //最大长度限制
        min = o.attr('minlength'),   //最小长度限制
        url = o.attr('vali_only'),   //匹配项的编号
        mth = o.attr('vali_match'),  //匹配项的编号
        btn = o.attr('lock_btn'),    //需禁用的按钮编号(逗号分隔)
        lks = o.attr('lock_self'),   //验证不过时，是否焦点锁定自己
        rqr = o.is(':required');     //是否必填
    $('.warn-msg').remove();
    $('#error-message').html('');
    var r = (rqr && tag == 'input'    && !v) ? msg || 'This can not be empty'
          : (rqr && tag == 'input'    && o.attr('type') == 'checkbox' && !o.is(':checked')) ? msg || 'Please checked it to continue'
          : (rqr && tag == 'input'    && v && typ == 'email' && !validEmail(v)) ? 'Incorrect email format'
          : (rqr && tag == 'textarea' && !v) ? msg || 'This can not be empty'
          : (rqr && tag == 'select'   && !v) ? msg || 'This must select one to continue'
          : (min != undefined && v && v.length < parseInt(min, 10)) ? ('Must be at least ' + min + ' characters')
          : (max != undefined && v && v.length > parseInt(max, 10)) ? ('No more than ' + max + ' characters')
          : (reg != undefined && msg != undefined && v && !(new RegExp(reg, 'g')).test(v)) ? msg
          : (mth != undefined && msg != undefined && v && v != $('#' + mth).val()) ? msg
          : (url != undefined && v) ? checkOnly(url, v, n)
          : '';
    if (mbx) {//有指定消息容器
        $('#' + mbx).html(r);
    } else {//默认显示在校验标签后面
        //没通过则显示提示消息，通过则取消显示，这里样式自己灵活设定
        r ? $('<p class="help-block warn-msg">' + r + '</p>').insertAfter(o) : $('.warn-msg').remove(); 
    }
    r && (lks == undefined || lks) && o.focus(); //默认锁定，只有指定并且值为true，才焦点锁定自己
    if (btn != undefined) { //指定了禁用按钮
        var btns = btn.split(','); //用逗号分割指定的多个按钮编号
        for (var i = 0; i < btns.length; i++) {
            //根据验证结果，逐个禁用或解禁指定的提交按钮
            r ? $('#' + btns[i]).attr('disabled', 'disabled') : $('#' + btns[i]).removeAttr('disabled'); 
        }
    }
}
scscms太阳光 2019-01-21
  • 打赏
  • 举报
 回复
你知道不知道这种代码面试时过不了初试！
正则表达式的应用
本课程是《零基础学Java》课程的第七阶段课程，课程内容详实、细致，讲解通俗易懂！内容包括：正则表达式的概念，正则表达式的组成规则，及正则表达式的判断、分割、替换、获取功能，以及各种功能的练习。
判断Python输入是否为数字、字符（包括正则表达式）
当键入字符串时候，我们自己就可以判断了！一：我们在程序把输入的数字当字符串处理import re print("我现在要写一个文件数字猜游戏数字游戏：") temp=input("请你输入一个数字，猜对了有奖，猜错了，没有关系：") guess=str(temp) while guess != '8': temp=input("还没有猜对，继续猜猜看，不要放弃：")
php用正则表达式来判断,php正则表达式使用的详细介绍
前言正则表达式是烦琐的，但是强大的，学会之后的应用会让你除了提高效率外，会给你带来绝对的成就感。只要认真去阅读这些资料，加上应用的时候进行一定的参考，掌握正则表达式不是问题。1. 引子目前，正则表达式已经在很多软件中得到广泛的应用，包括*nix(Linux, Unix等)，HP等操作系统，PHP，C#，Java等开发环境，以及很多的应用软件中，都可以看到正则表达式的影子。正则表达式的使用，可以通过...
python判断输入的是否为数字_判断Python输入是否为数字、字符（包括正则表达式）...
当键入字符串时候，我们自己就可以判断了！一：我们在程序把输入的数字当字符串处理import reprint("我现在要写一个文件数字猜游戏数字游戏：")temp=input("请你输入一个数字，猜对了有奖，猜错了，没有关系：")guess=str(temp)while guess != '8':temp=input("还没有猜对，继续猜猜看，不要放弃：")guess=str(temp)if gue...
全网最新正则表达式总结- 简单 便捷 （适用于新手学习正则表达式，老手巩固学习正则表达式）
什么是正则表达式? 正则表达式是一组由字母和符号组成的特殊文本, 它可以用来从文本中找出满足你想要的格式的句子. 一个正则表达式是在一个主体字符串中从左到右匹配字符串时的一种样式. “Regular expression"这个词比较拗口, 我们常使用缩写的术语"regex"或"regexp”. 正则表达式可以从一个基础字符串中根据一定的匹配模式替换文本中的字符串、验证表单、提取字符串等等. 想...
JavaScript

87,921

社区成员

224,619

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章