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方式提交给后台！
JS简单验证的更多相关文章
- JS简单验证密码强度
<input type="password" id="password" value=""/><button id=&qu ...
- JS简单验证password强度
<input type="password" id="password" value=""/><button id=&qu ...
- js简单验证码的生成和验证
如何用js生成简单验证码,并验证是否正确的方法 1.html页面如下 <div> <table border="0" cellspacing="5&qu ...
- 超简单的js数字验证
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...
- jQuery form插件的使用--用 formData 参数校验表单，验证后提交（简单验证）.
Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 一.引入依赖js <script src=& ...
- jquery/js实现验证聚焦，失焦
jquery实现验证聚焦,失焦方法: 我还是喜欢用jquery来实现,不管页面中多少个输入框需要实现聚焦,失焦,都公有,我常用的方法是: 遍历该页面中的input框,获取输入框中的val值,当该输入框 ...
- Knockout.js 数据验证之插件版和无插件版
本文我们将介绍使用 Knockout.js 实现一些基本的数据验证.就如我们在标题里提到的,我们会使用两种方法来创建数据验证方法. 使用自定义方法,不需要任何插件 最简单的方法是使用已有的插件 如果你 ...
- 黑马lavarel教程---6、简单验证
黑马lavarel教程---6.简单验证 一.总结 一句话总结: 1.验证的最简单实例:$request的validate方法,验证通过可以继续进行,验证失败就重定向 2.中文提示可以用中文语言包 3 ...
- js简单 图片版时钟，带翻转效果
js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
随机推荐
- 利用koa打造jsonp API
概述 最近学习利用koa搭建API接口,小有所得,现在记录下来,供以后开发时参考,相信对其他人也有用. 就目前我所知道的而言,API有2种,一种是jsonp这种API,前端通过ajax来进行跨域请求获 ...
- Liferay7 BPM门户开发之1:Liferay7开发环境准备
liferay sdk下载 \IDE下载 \ Tomcat 安装细节不在此赘述 网上有很多. 只讲核心关键坑点 进入2016年,从Liferay6.2.5 ga6版本开始,到7.0 ga3,在ivy环 ...
- postgresql-distinct on理解
PostgreSQL 的 distinct on 的理解 对于 select distinct on , 可以利用下面的例子来理解: create table a6(id integer, name ...
- TakePhoto实现拍照得到图片和从相册得到图片
在学郭霖大神的第一行代码的时候,学到利用相机拍照和从本地相册取照片的那一小节的时候,代码写出来但是出了很多问题,APP老是崩溃,一番百度最终还是没有找到解决办法 无奈只能用别人现成的轮子了,然后就发现 ...
- Oracle修改日志归档模式、归档路径以及空间大小的相关测试
ORACLE 创建数据库的时候要不要开启日志归档? oracle数据库可以运行在2种模式下:归档模式(archivelog)和非归档模式(noarchivelog) .归档模式可以提高Oracle数据 ...
- oc中的枚举
如果一个变量只有几种可能的值,比如星期有几天,一年有几个季节等.这个时候可以用枚举变量. 先定义类型再定义变量,如:enum siji{chun,xia,qiu,dong} 也可以定义匿名:enum{ ...
- 全网最详细的Windows系统里Oracle 11g R2 Database（64bit）的完全卸载（图文详解）
不多说,直接上干货! 前期博客 全网最详细的Windows系统里Oracle 11g R2 Database(64bit)的下载与安装(图文详解) 若你不想用了,则可安全卸载. 完全卸载Oracle ...
- 前端通信：ajax设计方案（九）--- 完善文档
ajax-js 1.9.1 文档 目录 * common(options, isCreatePoll) * config(options) * get(url, data, successEvent, ...
- 线上问题定位--OOM
服务器上部署了Java服务,出现了OutOfMemoryError,问题应该如何定位? 解决思路 Java服务OOM,最常见的原因为: 有可能是内存分配确实过小,而正常业务使用了大量内存 某一个对象被 ...
- 如何精准实现OCR文字识别？
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由云计算基础发表于云+社区专栏 前言 2018年3月27日腾讯云云+社区联合腾讯云智能图像团队共同在客户群举办了腾讯云OCR文字识别-- ...