1、不能超过20个字符

  1. <body>
  2.     <form name=a onsubmit="return test()">
  3.         <textarea name="b" cols="40" rows="6" placeholder="不能超过20个字符！"></textarea>
  4.         <br />
  5.         <input type="submit" name="Submit" value="check">
  6.     </form>
  7.  
  8.     <script language="javascript">
  9.         function test() {
  10.             if (document.a.b.value.length > 20) {
  11.                 alert("不能超过20个字符！");
  12.                 document.a.b.focus();
  13.                 return false;
  14.             }
  15.         }
  16.     </script> -->
  17. </body>

2、只能是英文字母

  1.  <input type="text" onblur="isEnglish(this.value)" placeholder="请输入英文！" /> 
     1 <script type="text/javascript">
  2.  //验证只能是字母
  3.  function isEnglish(zm){
  4.  var zmReg=/^[a-zA-Z]*$/;
  5.  if(zm!=""&&!zmReg.test(zm)){
  6.  alert("只能是英文字母！");
  7.  return false;
  8.  }
  9.  }
  10.  </script> -->

3、只能是中文

  1. <body>
  2.     <input type="text" onblur="isChinese(this.value)" placeholder="请输入中文！" />
  3.  
  4.     <script language="javascript">
  5.     function isChinese(obj){
  6.     var reg=/^[\u0391-\uFFE5]+$/;
  7.     if(obj!=""&&!reg.test(obj)){
  8.     alert('必须输入中文！');
  9.     return false;
  10.     }
  11.     }
  12.  
  13.     </script> -->
  14. </body>

4、只能是数字

  1. <body>
  2.     <input type="text" onblur="checkNumber(this.value)" placeholder="请输入数字！" />
  3.  
  4.     <script language=javascript>
  5.         //验证只能为数字
  6.         function checkNumber(obj) {
  7.             var reg = /^[0-9]+$/;
  8.             if (obj != "" && !reg.test(obj)) {
  9.                 alert('只能输入数字！');
  10.                 return false;
  11.             }
  12.         }
  13.     </script> -->
  14. </body>

5、只能是英文字母和数字

  1. <body>
  2.     <input type="text" onblur="checkZmOrNum(this.value)" placeholder="请输入字母和数字！" />
  3.  
  4.     <script type="text/javascript">
  5.         //验证只能是字母和数字
  6.         function checkZmOrNum(zmnum) {
  7.             var zmnumReg = /^[0-9a-zA-Z]*$/;
  8.             if (zmnum != "" && !zmnumReg.test(zmnum)) {
  9.                 alert("只能输入是字母或者数字,请重新输入");
  10.                 return false;
  11.             }
  12.         }
  13.     </script> -->
  14. </body>

6. 检验时间大小(与当前时间比较)

  1. body>
  2.     <input type="text" onblur="checkDate(this.value)" placeholder="请输入时间！" />
  3.  
  4.     <script type="text/javascript">
  5.         //检验时间大小(与当前时间比较)
  6.         function checkDate(obj) {
  7.             var obj_value = obj.replace(/-/g, "/");//替换字符，变成标准格式(检验格式为：'2009-12-10')
  8.             // var obj_value=obj.replace("-","/");//替换字符，变成标准格式(检验格式为：'2010-12-10 11:12')
  9.             var date1 = new Date(Date.parse(obj_value));
  10.             var date2 = new Date();//取今天的日期
  11.             if (date1 > date2) {
  12.                 alert("不能大于当前时间！");
  13.                 return false;
  14.             }
  15.         }
  16.     </script>
  17. </body>

7. 屏蔽关键字(这里屏蔽***和****)

  1. <body>
  2.     <input type="text" onblur="test(this.value)" placeholder="输入字符！" />
  3.  
  4.     <script type="text/javascript">
  5.         function test(obj) {
  6.             if ((obj.indexOf("***") == 0) || (obj.indexOf("****") == 0)) {
  7.                 alert("屏蔽关键字(这里屏蔽***和****)！");
  8.                 return false;
  9.             }
  10.         }
  11.     </script>
  12. </body>

8. 两次输入密码是否相同 

  1. <body>
  2.     <input type="text" onblur="checkpwd(this.value)" placeholder="再次输入密码" />
  3.  
  4.     <script type="text/javascript">
  5.         function checkpwd() {
  6.             with (document.all) {
  7.                 if (input1.value != input2.value) {
  8.                     alert("密码不一致")
  9.                     input1.value = "";
  10.                     input2.value = "";
  11.                 }
  12.                 else {
  13.                     alert("密码一致");
  14.                     document.forms[0].submit();
  15.                 }
  16.             }
  17.         }
  18.     </script> -->
  19. </body>

9、表单项不能为空

  1. <body>
  2.     <input type="submit" onblur="CheckForm(this.value)" value="提交" />
  3.  
  4.     <script language="javascript">
  5.         function CheckForm(obj)
  6.         {
  7.         if (obj.length == 0) {
  8.         alert("姓名不能为空!");
  9.         return false;
  10.         }
  11.         return true;
  12.         alert("姓名不能为空!");
  13.         }
  14.         </script>
  15. </body>

10、邮箱验证

  1. <body>
  2.     <input type="text" onblur="CheckMail(this.value)" value="输入邮箱地址" />
  3.  
  4.     <script language="javascript">
  5.         function CheckMail(obj) {
  6.             //对电子邮件的验证
  7.             var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
  8.             if (!myreg.test(obj)) {
  9.                 alert('请输入有效的邮箱！');
  10.                 return false;
  11.             }
  12.         }
  13.     </script> -->
  14. </body>

11、验证手机号

  1. <body>
  2.     <input type="text" onblur="Checkphone(this.value)" value="输入手机号码" />
  3.  
  4.     <script type="text/javascript">
  5.         function Checkphone(mobile) {
  6.             if (mobile.length == 0) {
  7.                 alert('手机号码不能为空！');
  8.                 return false;
  9.             }
  10.             if (mobile.length != 11) {
  11.                 alert('请输入有效的手机号码，需是11位！');
  12.                 return false;
  13.             }
  14.  
  15.             var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
  16.             if (!myreg.test(mobile)) {
  17.                 alert('请输入有效的手机号码！');
  18.                 return false;
  19.             }
  20.         }
  21.     </script> -->
  22. </body>

12、验证身份号码

  1. <body>
  2.     <input type="text" onblur="clsIDCard(this.value)" value="输入身份号码" />
  3.  
  4.     <script type="text/javascript">
  5.         // 构造函数，变量为15位或者18位的身份证号码
  6.         function clsIDCard(CardNo) {
  7.         this.Valid=false;
  8.         this.ID15='';
  9.         this.ID18='';
  10.         this.Local='';
  11.         if(CardNo!=null)this.SetCardNo(CardNo);
  12.         }
  13.  
  14.         // 设置身份证号码，15位或者18位
  15.         clsIDCard.prototype.SetCardNo = function(CardNo) {
  16.         this.ID15='';
  17.         this.ID18='';
  18.         this.Local='';
  19.         CardNo=CardNo.replace(" ","");
  20.         var strCardNo;
  21.         if(CardNo.length==18) {
  22.         pattern= /^\d{17}(\d|x|X)$/;
  23.         if (pattern.exec(CardNo)==null)return;
  24.         strCardNo=CardNo.toUpperCase();
  25.         } else {
  26.         pattern= /^\d{15}$/;
  27.         if (pattern.exec(CardNo)==null)return;
  28.         strCardNo=CardNo.substr(0,6)+'19'+CardNo.substr(6,9)
  29.         strCardNo+=this.GetVCode(strCardNo);
  30.         }
  31.         this.Valid=this.CheckValid(strCardNo);
  32.         }
  33.  
  34.         // 校验身份证有效性
  35.         clsIDCard.prototype.IsValid = function() {
  36.         return this.Valid;
  37.         }
  38.  
  39.         // 返回生日字符串，格式如下，1981-10-10
  40.         clsIDCard.prototype.GetBirthDate = function() {
  41.         var BirthDate='';
  42.         if(this.Valid)BirthDate=this.GetBirthYear()+'-'+this.GetBirthMonth()+'-'+this.GetBirthDay();
  43.         return BirthDate;
  44.         }
  45.  
  46.         // 返回生日中的年，格式如下，1981
  47.         clsIDCard.prototype.GetBirthYear = function() {
  48.         var BirthYear='';
  49.         if(this.Valid)BirthYear=this.ID18.substr(6,4);
  50.         return BirthYear;
  51.         }
  52.  
  53.         // 返回生日中的月，格式如下，10
  54.         clsIDCard.prototype.GetBirthMonth = function() {
  55.         var BirthMonth='';
  56.         if(this.Valid)BirthMonth=this.ID18.substr(10,2);
  57.         if(BirthMonth.charAt(0)=='0')BirthMonth=BirthMonth.charAt(1);
  58.         return BirthMonth;
  59.         }
  60.  
  61.         // 返回生日中的日，格式如下，10
  62.         clsIDCard.prototype.GetBirthDay = function() {
  63.         var BirthDay='';
  64.         if(this.Valid)BirthDay=this.ID18.substr(12,2);
  65.         return BirthDay;
  66.         }
  67.  
  68.         // 返回性别，1：男，0：女
  69.         clsIDCard.prototype.GetSex = function() {
  70.         var Sex='';
  71.         if(this.Valid)Sex=this.ID18.charAt(16)%2;
  72.         return Sex;
  73.         }
  74.  
  75.         // 返回15位身份证号码
  76.         clsIDCard.prototype.Get15 = function() {
  77.         var ID15='';
  78.         if(this.Valid)ID15=this.ID15;
  79.         return ID15;
  80.         }
  81.  
  82.         // 返回18位身份证号码
  83.         clsIDCard.prototype.Get18 = function() {
  84.         var ID18='';
  85.         if(this.Valid)ID18=this.ID18;
  86.         return ID18;
  87.         }
  88.  
  89.         // 返回所在省，例如：上海市、浙江省
  90.         clsIDCard.prototype.GetLocal = function() {
  91.         var Local='';
  92.         if(this.Valid)Local=this.Local;
  93.         return Local;
  94.         }
  95.  
  96.         clsIDCard.prototype.GetVCode = function(CardNo17) {
  97.         var Wi = new Array(7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2,1);
  98.         var Ai = new Array('1','0','X','9','8','7','6','5','4','3','2');
  99.         var cardNoSum = 0;
  100.         for (var i=0; i<CardNo17.length; i++)cardNoSum+=CardNo17.charAt(i)*Wi[i];
  101.         var seq = cardNoSum%11;
  102.         return Ai[seq];
  103.         }
  104.  
  105.         clsIDCard.prototype.CheckValid = function(CardNo18) {
  106.         if(this.GetVCode(CardNo18.substr(0,17))!=CardNo18.charAt(17))return false;
  107.         if(!this.IsDate(CardNo18.substr(6,8)))return false;
  108.         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:"国外"};
  109.         if(aCity[parseInt(CardNo18.substr(0,2))]==null)return false;
  110.         this.ID18=CardNo18;
  111.         this.ID15=CardNo18.substr(0,6)+CardNo18.substr(8,9);
  112.         this.Local=aCity[parseInt(CardNo18.substr(0,2))];
  113.         return true;
  114.         }
  115.  
  116.         clsIDCard.prototype.IsDate = function(strDate) {
  117.         var r = strDate.match(/^(\d{1,4})(\d{1,2})(\d{1,2})$/);
  118.         if(r==null)return false;
  119.         var d= new Date(r[1], r[2]-1, r[3]);
  120.         return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[2]&&d.getDate()==r[3]);
  121.         }
  122.  
  123.         function valiIdCard(idCard){
  124.         var checkFlag = new clsIDCard(idCard);
  125.         if (!checkFlag.IsValid()) {
  126.         alert("输入的身份证号无效,请输入真实的身份证号！");
  127.         document.getElementByIdx("idCard").focus();
  128.         return false;
  129.         }else{
  130.         alert("是有效身份证！");
  131.         }
  132.         }
  133.         </script>-->
  134. </body>

javascript中常见的表单验证项的更多相关文章

  1. Javascript中的Form表单知识点总结

    Javascript中的Form表单知识点总结 在HTML中,表单是由form元素来表示的,但是在javascript中,表单则由HTMLFormElement类型,此元素继承了HTMLElement ...

  2. javascript中的常用表单事件用法

    下面介绍几种javascript中常用的表单事件: 一,onsubmit:表单中的确认按钮被点击时发生的事件,如下案例. 案例解析:弹出表单中提交的内容 <form name="tes ...

  3. 在AngularJS中实现自定义表单验证

    除了一些已经定义好了的验证(例如 必填项.最小长度.最大长度)之外,更常用的,还是需要我们自己定义表单验证,这样才能对于项目中遇到的很多非常规问题给出自己的合适的解决方案. 在表单中控制变量 表单的属 ...

  4. JavaScript：综合案例-表单验证

    综合案例:表单验证 开发要求: 要求定义一个雇员信息的增加页面,例如页面名称为"emp_add.htmnl",而后在此页面中要提供有输入表单,此表单定义要求如下: .雇员编号:必须 ...

  5. AngularJS中使用的表单验证

    Reference: http://www.tuicool.com/articles/2Qbiqi 客户端表单验证是AngularJS里面最酷的功能之一. AngularJS表单验证可以让你从一开始就 ...

  6. Django中的Form表单验证

    回忆一下Form表单验证的逻辑: 前端有若干个input输入框,将用户输入内容,以字典传递给后端. 后端预先存在一个Form表单验证的基类,封装了一个检测用户输入是否全部通过的方法.该方法会先定义好错 ...

  7. javascript:正则表达式、一个表单验证的例子

    本文内容: 正则表达式 正则表达式的使用方法 正则表达式的特殊匹配字符 正则表达式修饰符 利用正则表达式进行表单验证的例子 首发日期:2018-05-13 正则表达式: 正则表达式的使用方法: 首先创 ...

  8. (转)AngularJS中使用的表单验证

    原文  http://www.cnblogs.com/woshinidezhu/p/Form-validation-with-AngularJS.html 客户端表单验证是AngularJS里面最酷的 ...

  9. yii框架中应用jquery表单验证插件

    效果图: 视图层: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

随机推荐

  1. Python学习之布尔和数字

    布尔有True和Flase两种值 数字0.None,以及元素为空的容器类对象都可视为False,反之为Ture.

  2. 编译putty 源码去掉 Are you sure you want to close this session? 提示

    0, 为什么要编译 putty ?在关闭窗口的时候,会弹出一个 Are you sure you want to close this session?要把这个去掉.当然也可以用 OD 之类的来修改. ...

  3. django 从零开始 6 数据库模型增删改查

    这些都是凭记忆写下的,有些会漏掉,在之后的笔记中会写 和flask query不同,django是使用objects进行一个查询 查询 单条记录 django 模型.bojects.get(查询的字段 ...

  4. vue-cli2.0项目 添加骨架屏

    1.创建项目 npm init webpack project 3.下载   vue-skeleton-webpack-plugin 插件 npm install vue-skeleton-webpa ...

  5. Object.keys()方法

    一.定义和用法 返回对象的可枚举属性和方法的名称.二.参数 obj:要返回器枚举自身属性的对象.三.返回值 返回一个所有元素为字符串的数组,其元素来自于从给定的obj里可直接枚举的属性.这些属性的顺序 ...

  6. js小数计算引起的精度误差问题

    我记得刚开始学js的时候学到浮点有举例0.1+0.2 它的计算结果是: 0.1+0.20.30000000000000004 很神奇的一个计算,js是弱语言,在精度上没做处理: 我就自己定义了加减乘除 ...

  7. 一、create-react-app的安装及使用

    一.安装create-react-app 1.在全局环境中安装create-react-app npm install -g create-react-app 2.在您所需要的目录(盘)下生成一个项目 ...

  8. 视频 embed标签动态改变Src的值，局部刷新播放其他视频的javascript方法

    看图: 视频处html代码: <div id="mod_player" class="mod_player"> <embed id=" ...

  9. MQTT抓包分析

    1. 概述 MQTT(Message Queuing Telemetry Transport,消息队列遥测传输协议),是一种基于发布/订阅(Publish/Subscribe)模式的轻量级通讯协议,该 ...

  10. 【Weiss】【第03章】练习3.22、3.23、3.24：无代码题，栈的思考题

    [练习3.22] a.提出支持栈的Push和Pop操作以及第三种操作FindMin的数据结构,其中FindMin 返回该数据结构的最小元素,所有操作在最坏情况下的运行时间都是O(1). b.证明,如果 ...