javascript中常见的表单验证项
1、不能超过20个字符
<body>
<form name=a onsubmit="return test()">
<textarea name="b" cols="40" rows="6" placeholder="不能超过20个字符！"></textarea>
<br />
<input type="submit" name="Submit" value="check">
</form> <script language="javascript">
function test() {
if (document.a.b.value.length > 20) {
alert("不能超过20个字符！");
document.a.b.focus();
return false;
}
}
</script> -->
</body>
2、只能是英文字母
<input type="text" onblur="isEnglish(this.value)" placeholder="请输入英文！" />
1 <script type="text/javascript">
//验证只能是字母
function isEnglish(zm){
var zmReg=/^[a-zA-Z]*$/;
if(zm!=""&&!zmReg.test(zm)){
alert("只能是英文字母！");
return false;
}
}
</script> -->
3、只能是中文
<body>
<input type="text" onblur="isChinese(this.value)" placeholder="请输入中文！" /> <script language="javascript">
function isChinese(obj){
var reg=/^[\u0391-\uFFE5]+$/;
if(obj!=""&&!reg.test(obj)){
alert('必须输入中文！');
return false;
}
} </script> -->
</body>
4、只能是数字
<body>
<input type="text" onblur="checkNumber(this.value)" placeholder="请输入数字！" /> <script language=javascript>
//验证只能为数字
function checkNumber(obj) {
var reg = /^[0-9]+$/;
if (obj != "" && !reg.test(obj)) {
alert('只能输入数字！');
return false;
}
}
</script> -->
</body>
5、只能是英文字母和数字
<body>
<input type="text" onblur="checkZmOrNum(this.value)" placeholder="请输入字母和数字！" /> <script type="text/javascript">
//验证只能是字母和数字
function checkZmOrNum(zmnum) {
var zmnumReg = /^[0-9a-zA-Z]*$/;
if (zmnum != "" && !zmnumReg.test(zmnum)) {
alert("只能输入是字母或者数字,请重新输入");
return false;
}
}
</script> -->
</body>
6. 检验时间大小(与当前时间比较)
body>
<input type="text" onblur="checkDate(this.value)" placeholder="请输入时间！" /> <script type="text/javascript">
//检验时间大小(与当前时间比较)
function checkDate(obj) {
var obj_value = obj.replace(/-/g, "/");//替换字符，变成标准格式(检验格式为：'2009-12-10')
// var obj_value=obj.replace("-","/");//替换字符，变成标准格式(检验格式为：'2010-12-10 11:12')
var date1 = new Date(Date.parse(obj_value));
var date2 = new Date();//取今天的日期
if (date1 > date2) {
alert("不能大于当前时间！");
return false;
}
}
</script>
</body>
7. 屏蔽关键字(这里屏蔽***和****)
<body>
<input type="text" onblur="test(this.value)" placeholder="输入字符！" /> <script type="text/javascript">
function test(obj) {
if ((obj.indexOf("***") == 0) || (obj.indexOf("****") == 0)) {
alert("屏蔽关键字(这里屏蔽***和****)！");
return false;
}
}
</script>
</body>
8. 两次输入密码是否相同
<body>
<input type="text" onblur="checkpwd(this.value)" placeholder="再次输入密码" /> <script type="text/javascript">
function checkpwd() {
with (document.all) {
if (input1.value != input2.value) {
alert("密码不一致")
input1.value = "";
input2.value = "";
}
else {
alert("密码一致");
document.forms[0].submit();
}
}
}
</script> -->
</body>
9、表单项不能为空
<body>
<input type="submit" onblur="CheckForm(this.value)" value="提交" /> <script language="javascript">
function CheckForm(obj)
{
if (obj.length == 0) {
alert("姓名不能为空!");
return false;
}
return true;
alert("姓名不能为空!");
}
</script>
</body>
10、邮箱验证
<body>
<input type="text" onblur="CheckMail(this.value)" value="输入邮箱地址" /> <script language="javascript">
function CheckMail(obj) {
//对电子邮件的验证
var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
if (!myreg.test(obj)) {
alert('请输入有效的邮箱！');
return false;
}
}
</script> -->
</body>
11、验证手机号
<body>
<input type="text" onblur="Checkphone(this.value)" value="输入手机号码" /> <script type="text/javascript">
function Checkphone(mobile) {
if (mobile.length == 0) {
alert('手机号码不能为空！');
return false;
}
if (mobile.length != 11) {
alert('请输入有效的手机号码，需是11位！');
return false;
} var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
if (!myreg.test(mobile)) {
alert('请输入有效的手机号码！');
return false;
}
}
</script> -->
</body>
12、验证身份号码
<body>
<input type="text" onblur="clsIDCard(this.value)" value="输入身份号码" /> <script type="text/javascript">
// 构造函数，变量为15位或者18位的身份证号码
function clsIDCard(CardNo) {
this.Valid=false;
this.ID15='';
this.ID18='';
this.Local='';
if(CardNo!=null)this.SetCardNo(CardNo);
} // 设置身份证号码，15位或者18位
clsIDCard.prototype.SetCardNo = function(CardNo) {
this.ID15='';
this.ID18='';
this.Local='';
CardNo=CardNo.replace(" ","");
var strCardNo;
if(CardNo.length==18) {
pattern= /^\d{17}(\d|x|X)$/;
if (pattern.exec(CardNo)==null)return;
strCardNo=CardNo.toUpperCase();
} else {
pattern= /^\d{15}$/;
if (pattern.exec(CardNo)==null)return;
strCardNo=CardNo.substr(0,6)+'19'+CardNo.substr(6,9)
strCardNo+=this.GetVCode(strCardNo);
}
this.Valid=this.CheckValid(strCardNo);
} // 校验身份证有效性
clsIDCard.prototype.IsValid = function() {
return this.Valid;
} // 返回生日字符串，格式如下，1981-10-10
clsIDCard.prototype.GetBirthDate = function() {
var BirthDate='';
if(this.Valid)BirthDate=this.GetBirthYear()+'-'+this.GetBirthMonth()+'-'+this.GetBirthDay();
return BirthDate;
} // 返回生日中的年，格式如下，1981
clsIDCard.prototype.GetBirthYear = function() {
var BirthYear='';
if(this.Valid)BirthYear=this.ID18.substr(6,4);
return BirthYear;
} // 返回生日中的月，格式如下，10
clsIDCard.prototype.GetBirthMonth = function() {
var BirthMonth='';
if(this.Valid)BirthMonth=this.ID18.substr(10,2);
if(BirthMonth.charAt(0)=='0')BirthMonth=BirthMonth.charAt(1);
return BirthMonth;
} // 返回生日中的日，格式如下，10
clsIDCard.prototype.GetBirthDay = function() {
var BirthDay='';
if(this.Valid)BirthDay=this.ID18.substr(12,2);
return BirthDay;
} // 返回性别，1：男，0：女
clsIDCard.prototype.GetSex = function() {
var Sex='';
if(this.Valid)Sex=this.ID18.charAt(16)%2;
return Sex;
} // 返回15位身份证号码
clsIDCard.prototype.Get15 = function() {
var ID15='';
if(this.Valid)ID15=this.ID15;
return ID15;
} // 返回18位身份证号码
clsIDCard.prototype.Get18 = function() {
var ID18='';
if(this.Valid)ID18=this.ID18;
return ID18;
} // 返回所在省，例如：上海市、浙江省
clsIDCard.prototype.GetLocal = function() {
var Local='';
if(this.Valid)Local=this.Local;
return Local;
} clsIDCard.prototype.GetVCode = function(CardNo17) {
var Wi = new Array(7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2,1);
var Ai = new Array('1','0','X','9','8','7','6','5','4','3','2');
var cardNoSum = 0;
for (var i=0; i<CardNo17.length; i++)cardNoSum+=CardNo17.charAt(i)*Wi[i];
var seq = cardNoSum%11;
return Ai[seq];
} clsIDCard.prototype.CheckValid = function(CardNo18) {
if(this.GetVCode(CardNo18.substr(0,17))!=CardNo18.charAt(17))return false;
if(!this.IsDate(CardNo18.substr(6,8)))return false;
var aCity={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江 ",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北 ",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏 ",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"};
if(aCity[parseInt(CardNo18.substr(0,2))]==null)return false;
this.ID18=CardNo18;
this.ID15=CardNo18.substr(0,6)+CardNo18.substr(8,9);
this.Local=aCity[parseInt(CardNo18.substr(0,2))];
return true;
} clsIDCard.prototype.IsDate = function(strDate) {
var r = strDate.match(/^(\d{1,4})(\d{1,2})(\d{1,2})$/);
if(r==null)return false;
var d= new Date(r[1], r[2]-1, r[3]);
return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[2]&&d.getDate()==r[3]);
} function valiIdCard(idCard){
var checkFlag = new clsIDCard(idCard);
if (!checkFlag.IsValid()) {
alert("输入的身份证号无效,请输入真实的身份证号！");
document.getElementByIdx("idCard").focus();
return false;
}else{
alert("是有效身份证！");
}
}
</script>-->
</body>
javascript中常见的表单验证项的更多相关文章
- Javascript中的Form表单知识点总结
Javascript中的Form表单知识点总结 在HTML中,表单是由form元素来表示的,但是在javascript中,表单则由HTMLFormElement类型,此元素继承了HTMLElement ...
- javascript中的常用表单事件用法
下面介绍几种javascript中常用的表单事件: 一,onsubmit:表单中的确认按钮被点击时发生的事件,如下案例. 案例解析:弹出表单中提交的内容 <form name="tes ...
- 在AngularJS中实现自定义表单验证
除了一些已经定义好了的验证(例如 必填项.最小长度.最大长度)之外,更常用的,还是需要我们自己定义表单验证,这样才能对于项目中遇到的很多非常规问题给出自己的合适的解决方案. 在表单中控制变量 表单的属 ...
- JavaScript：综合案例-表单验证
综合案例:表单验证 开发要求: 要求定义一个雇员信息的增加页面,例如页面名称为"emp_add.htmnl",而后在此页面中要提供有输入表单,此表单定义要求如下: .雇员编号:必须 ...
- AngularJS中使用的表单验证
Reference: http://www.tuicool.com/articles/2Qbiqi 客户端表单验证是AngularJS里面最酷的功能之一. AngularJS表单验证可以让你从一开始就 ...
- Django中的Form表单验证
回忆一下Form表单验证的逻辑: 前端有若干个input输入框,将用户输入内容,以字典传递给后端. 后端预先存在一个Form表单验证的基类,封装了一个检测用户输入是否全部通过的方法.该方法会先定义好错 ...
- javascript:正则表达式、一个表单验证的例子
本文内容: 正则表达式 正则表达式的使用方法 正则表达式的特殊匹配字符 正则表达式修饰符 利用正则表达式进行表单验证的例子 首发日期:2018-05-13 正则表达式: 正则表达式的使用方法: 首先创 ...
- (转)AngularJS中使用的表单验证
原文 http://www.cnblogs.com/woshinidezhu/p/Form-validation-with-AngularJS.html 客户端表单验证是AngularJS里面最酷的 ...
- yii框架中应用jquery表单验证插件
效果图: 视图层: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
随机推荐
- 【设计思想】MVC模式
MVC 模式 MVC 模式(三层架构模式) MVC模式(Model-View-Controller, MVC): 是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model).视图( ...
- linux ftp服务器设置，只允许用户访问指定的文件夹，禁止访问其他文件夹
在Linux中添加ftp用户,并设置相应的权限,操作步骤如下: 1.环境:ftp为vsftp.被限制用户名为test.被限制路径为/home/test 2.建用户:在root用户下: useradd ...
- 在ES批量插入数据超时时自动重试
当我们使用ES批量插入数据的时候,一般会这样写代码: from elasticsearch import Elasticsearch,helpers es =Elasticsearch(hosts=[ ...
- 曹工杂谈：花了两天时间，写了一个netty实现的http客户端，支持同步转异步和连接池（1）--核心逻辑讲解
背景 先说下写这个的目的,其实是好奇,dubbo是怎么实现同步转异步的,然后了解到,其依赖了请求中携带的请求id来完成这个连接复用:然后我又发现,redisson这个redis客户端,底层也是用的ne ...
- pycharm 更换pip镜像源为国内，解决下载慢的问题
参考链接:https://www.cnblogs.com/hkgov/p/7799078.html 官方源下载速度太慢,换成国内源会很快. 推荐清华的源:https://pypi.tuna.tsing ...
- [前端开发]Vue父子组件的通信及访问
父传子 props 子传父 自定义事件emit props传数组 props:['cmovies','cmessage'] props传对象 props:{ //1.类型限制 cmovies:Arra ...
- WEB应用之httpd基础入门（二）
前文我们聊了下httpd的一些基础设置,聊了下httpd的配置文件格式,长连接.mpm的配置以及访问控制基于文件路径和URL管控,回顾请参考https://www.cnblogs.com/qiuhom ...
- Netty Hello World 入门源码分析
第一节简单提了什么是网络编程,Netty 做了什么,Netty 都有哪些功能组件.这一节就具体进入 Netty 的世界,我们从用 Netty 的功能实现基本的网络通信开始分析 各个组件的使用. 1. ...
- Ubuntu16.04安装QQ机器人
Ubuntu安装QQ机器人 看了看现在QQ机器人似乎只有酷Q机器人有Docker可以在linux上运行了 那就k开始装酷Q机器人,资源占用也不是很大,大概占用180M内存吧 安装酷Q HTTP 首先安 ...
- hdu3973 AC's String 线段树+字符串hash
题目链接:http://icpc.njust.edu.cn/Problem/Hdu/3973/ 题意是:给出一个模式串,再给出一些串组成一个集合,操作分为两种,一种是替换模式串中的一个字符,还有一种是 ...