zoukankan      html  css  js  c++  java
  • JS简单验证

    1.验证是否全为数字

    2.验证邮箱

    3验证手机号

    4.验证身份证号

    5.验证时间格式

    下面是代码,可直接用,有注释

    <html>
    <meta charset="utf-8">
    <head>
        <title></title>
    </head>
    <script type="text/javascript">
    //验证是否全部为数字
    function checkNum(){
        //获取num的值,并过滤两边多余的空格
        var num = document.getElementById('num').value.trim();
        //判断是否匹配
        if (num.match(/^[0-9]*$/g) == null) {
            //不匹配提示,并返回false
            document.getElementById('tip1').innerHTML="<font color='red'>不全是数字";
            return false; 
        }else{
            //匹配提示,并返回true
            document.getElementById('tip1').innerHTML="";
            return true;
            }
        return check();
    }
    
    //邮箱验证
    function checkEmail(){
        var email = document.getElementById('email').value.trim();
        //以数字,大/小写字母_.-开头,中间是"@.",以大/小写,数字结尾
        if (email.match(/^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/g) == null) {
            document.getElementById('tip2').innerHTML="<font color='red'>邮箱格式不正确";
            return false;
        }else{
            document.getElementById('tip2').innerHTML="";
            return true;
        }
        return check();
    }
    
    //检查手机号
    function checkTel(){
        var tel = document.getElementById('tel').value.trim();
        //手机号以1开头,第二位是34578,再加上9位数字
        if (tel.match(/^1[34578]d{9}$/g) == null) {
            document.getElementById('tip3').innerHTML="<font color='red'>手机号必须是11位的数字";
            return false;
        }else{
            document.getElementById('tip3').innerHTML="";
            return true;
        }
        return check();
    }
    
    //检查身份证号
    function checkIdcard(){
        var idcard = document.getElementById('idcard').value.trim();
        //身份证号码为15位或者18位,15位时全为数字,18位时前17位为数字,最后一位是校验位,可能为数字或字符X
        if (idcard.match(/(^d{15}$)|(^d{17}([0-9]|X)$)/g) == null) {
            document.getElementById('tip4').innerHTML="<font color='red'>身份证号必须为15或18位";
            return false;
        }else{
            document.getElementById('tip4').innerHTML="";
            return true;
        }
        return check();
    }
    
    //校验时间格式
    function checkDate(){
        var date = document.getElementById('date').value.trim();
        //长时间,形如 (2003-12-05 13:04:06)
        if (date.match(/^(d{1,4})(-|/)(d{1,2})2(d{1,2}) (d{1,2}):(d{1,2}):(d{1,2})$/g) == null) {
            document.getElementById('tip5').innerHTML="<font color='red'>时间格式为2017-5-05 13:04:06";
            return false;
        }else{
            document.getElementById('tip5').innerHTML="";
            return true;
        }
        return check();
    
    }
    
    //总判断函数check(),上述所有函数必须全部判断通过,此函数的返回值才是真,一个为假,此式就为假
    function check() {  
        var check =checkNum()&&checkEmail()&&checkTel()&&checkIdcard()&&checkDate();
        if (check) {
            return true;
        }else{
            return false;
        }  
    } 
    </script>
    
    <body>
    <form action="test.php"  method="post" onSubmit="return check();">
    
    验证是否为数字:<input type="text" id="num" name="num" required ><span id="tip1"></span> <br>
    验证邮箱格式<input type="text" id="email" name="email" required ><span id="tip2"></span> <br>
    验证手机号<input type="text" id="tel" name="tel" required ><span id="tip3"></span> <br>
    验证身份证号<input type="text" id="idcard" name="idcard" required ><span id="tip4"></span> <br>
    验证时间格式<input type="text" id="date" name="date" required ><span id="tip5"></span> <br>
    
    <input type="submit" value="提交">
    </form>
    
    </body>
    </html>

    运行结果如图:

    当验证全部通过时,会通过post方式提交给后台!

  • 相关阅读:
    [译]ASP.NET Core 2.0 依赖注入
    FineUIPro v4.0.0 发布了,全新 CSS3 动画惊艳登场!
    [译]ASP.NET Core 2.0 带初始参数的中间件
    [译]ASP.NET Core 2.0 中间件
    【原创】三招搞死你的IE11,可重现代码下载(IE Crash keyframes iframe)!
    立足中国,走向世界(Made in China, Go to World)
    【JS小技巧】JavaScript 函数用作对象的隐藏问题(F.ui.name)
    FineUIMvc v1.4.0 发布了(ASP.NET MVC控件库)!
    公安系统信息化业务概要系统设计
    2018年软件开发状态报告
  • 原文地址:https://www.cnblogs.com/zxf100/p/6919164.html
Copyright © 2011-2022 走看看