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方式提交给后台！

JS简单验证的更多相关文章

  1. JS简单验证密码强度

    <input type="password" id="password" value=""/><button id=&qu ...

  2. JS简单验证password强度

    <input type="password" id="password" value=""/><button id=&qu ...

  3. js简单验证码的生成和验证

    如何用js生成简单验证码,并验证是否正确的方法 1.html页面如下 <div> <table border="0" cellspacing="5&qu ...

  4. 超简单的js数字验证

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...

  5. jQuery form插件的使用--用 formData 参数校验表单，验证后提交（简单验证）.

    Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 一.引入依赖js <script src=& ...

  6. jquery/js实现验证聚焦，失焦

    jquery实现验证聚焦,失焦方法: 我还是喜欢用jquery来实现,不管页面中多少个输入框需要实现聚焦,失焦,都公有,我常用的方法是: 遍历该页面中的input框,获取输入框中的val值,当该输入框 ...

  7. Knockout.js 数据验证之插件版和无插件版

    本文我们将介绍使用 Knockout.js 实现一些基本的数据验证.就如我们在标题里提到的,我们会使用两种方法来创建数据验证方法. 使用自定义方法,不需要任何插件 最简单的方法是使用已有的插件 如果你 ...

  8. 黑马lavarel教程---6、简单验证

    黑马lavarel教程---6.简单验证 一.总结 一句话总结: 1.验证的最简单实例:$request的validate方法,验证通过可以继续进行,验证失败就重定向 2.中文提示可以用中文语言包 3 ...

  9. js简单 图片版时钟，带翻转效果

    js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

随机推荐

  1. JS生成某个范围的随机数【四种情况详解】

    JS没有现成的函数,能够直接生成指定范围的随机数. 但是它有个函数:Math.random()  这个函数可以生成 [0,1) 的一个随机数. 利用它,我们就可以生成指定范围内的随机数. 而涉及范围的 ...

  2. WebDriver高级应用实例（6）

    6.1精确比较网页截图图片 目的:对于核心界面进行截屏,并且使用测试过程中的截图和以前测试过程中的截图进行比较.确认页面是否发生了改变 被测网页的网址: http://www.baidu.com Ja ...

  3. POJ 2771

    #include <iostream> #include <string> #define MAXN 505 using namespace std; int _m[MAXN] ...

  4. Django 模板相关

    Django 模板相关 视图函数只是直接返回文本,而在实际生产环境中其实很少这样用,因为实际的页面大多是带有样式的HTML代码,这可以让浏览器渲染出非常漂亮的页面.目前市面上有非常多的模板系统,其中最 ...

  5. 08-03 java 继承

    继承格式,优缺点,概述: /* 继承概述: 把多个类中相同的内容给提取出来定义到一个类中. 如何实现继承呢? Java提供了关键字:extends 格式: class 子类名 extends 父类名 ...

  6. [Umbraco] 项目结构

    主要包括以下几个部分 Umbraco.businesslogic(基础) Umbraco.cms (核心) Umbraco.controls(控件) Umbraco.datalayer(数据) Umb ...

  7. Mac下使用Typora的一些简单操作

    说明: 以下方法并不是唯一的,我只是选择了我验证成功或者比较喜欢的一种 以下基本所有操作符都是在英文输入法下进行的,中文输入法有时下达不到所要的效果 如果您在浏览本博文的时候发现有侵权行为,请及时与博 ...

  8. CDH 版本子节点启动问题

    今天下午整整为了启动一个节点瞎忙活一下午,惨痛的教训还是记录下来吧,毕竟付出了代价.事情原委,一个同事在一台机器上占用了大量内存训练CTR点击率模型,而这台机器上部署了分布式Hadoop的一个data ...

  9. CentOS6.7-64bit编译hadoop2.6.4

    1.下载maven(apache-maven-3.3.3-bin.tar.gz) http://archive.apache.org/dist/maven/maven-3/3.3.3/binaries ...

  10. i=i+1,i+=1,i++哪个执行效率最高？为什么？

    (1)i=i+1最低,它的执行过程如下:读取右i的地址i+1读取左i的地址将右值传给左边的i(编译器并不认为左右i的地址相同)(2)i+=1其次,它的执行过程如下:读取左x的地址i+1将得到的值传给i ...