1 手机号验证

  1. <input type="tel" id="phone" name="phone" placeholder="请输入联系电话" maxlength="11" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')"
      onafterpaste="this.value=this.value.replace(/[^0-9]/g,'')" >
  2.  
  3. <script>
  4. function checkPhone(phone){
  5.     var regu = /^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$|(^(13[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$)/;
  6.                     if(!(regu.test(phone))){
  7.                         return true;
  8.                     } else{
  9.                         return false;
  10.                     }
  11.                 }
  12.  
  13.     $("#phone").blur(function(){      //手机验证
  14.                      var tel=$(this)[0];
  15.                     if(tel.value.length!=11){
  16.                         console.log("请输入正确的手机号");//增加错误提示
  17.                          $('[name="phone"]').focus();
  18.                          return ;
  19.                     }
  20.                     if(tel.value.length==11){
  21.                         if(checkPhone(tel.value)){
  22.                             console.log("请填写有效的11位手机号码");//错误提示
  23.                             $('[name="phone"]').focus();
  24.                              return ;
  25.                         }
  26.                     }
  27.              });
  28. </script>

2  email验证

  1. <input type="email" id="email" name="email" placeholder="请输入电邮地址" onblur="testEmail($(this).val())">                
  2.  
  3. <script>
  4. function testEmail(str){
  5.    var reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
  6.    if(!reg.test(str)){
  7.    console.log("请输入正确的电邮地址");//错误提示
  8.     $('[name="email"]').focus();
  9.       return ;
  10.     }
  11. }
  12.  
  13. </script>

3 身份证号验证

  1.     <input type="text" maxlength="18" class="input" placeholder="请输入您的身份证" id="icCode" name="icCode" 
    　　　　onblur="validIdCard($(this).val())" onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')" 
    　　　　onpaste="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')" oncontextmenu="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')" oncontextmenu="return false;" />
  2.  
  3.      <script>
  4.  function validIdCard(icCode) {
  5.      if($.trim($('[name="icCode"]').val()) == '') {
  6.          console.log("身份证号码不能为空！");
  7.          $('[name="icCode"]').focus();
  8.          return;
  9.      } else if(!validIcCode($.trim($('[name="icCode"]').val()))) {
  10.          $('[name="icCode"]').focus();
  11.          return;
  12.      }
  13.  
  14.  }
  15.  
  16.  function validIcCode(iIdNo) {
  17.      var aCity = {
  18.          11: "北京",
  19.          12: "天津",
  20.          13: "河北",
  21.          14: "山西",
  22.          15: "内蒙古",
  23.          21: "辽宁",
  24.          22: "吉林",
  25.          23: "黑龙江",
  26.          31: "上海",
  27.          32: "江苏",
  28.          33: "浙江",
  29.          34: "安徽",
  30.          35: "福建",
  31.          36: "江西",
  32.          37: "山东",
  33.          41: "河南",
  34.          42: "湖北",
  35.          43: "湖南",
  36.          44: "广东",
  37.          45: "广西",
  38.          46: "海南",
  39.          50: "重庆",
  40.          51: "四川",
  41.          52: "贵州",
  42.          53: "云南",
  43.          54: "西藏",
  44.          61: "陕西",
  45.          62: "甘肃",
  46.          63: "青海",
  47.          64: "宁夏",
  48.          65: "新疆",
  49.          71: "台湾",
  50.          81: "香港",
  51.          82: "澳门",
  52.          91: "国外"
  53.      };
  54.      var iSum = 0;
  55.      var info = "";
  56.  
  57.      if(!/^\d{17}(\d|x)$/i.test(iIdNo)) {
  58.          console.log("你输入的身份证长度或格式错误");
  59.          return false;
  60.      }
  61.  
  62.      iIdNo = iIdNo.replace(/x$/i, "a");
  63.  
  64.      if(aCity[parseInt(iIdNo.substr(0, 2))] == null) {
  65.          console.log("你的身份证地区非法");
  66.          return false;
  67.      }
  68.  
  69.      sBirthday = iIdNo.substr(6, 4) + "-" + Number(iIdNo.substr(10, 2)) + "-" + Number(iIdNo.substr(12, 2));
  70.  
  71.      var d = new Date(sBirthday.replace(/-/g, "/"));
  72.  
  73.      if(sBirthday != (d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate())) {
  74.          console.log("身份证上的出生日期非法");
  75.          return false;
  76.      }
  77.  
  78.      for(var i = 17; i >= 0; i--) iSum += (Math.pow(2, i) % 11) * parseInt(iIdNo.charAt(17 - i), 11);
  79.  
  80.      if(iSum % 11 != 1) {
  81.          console.log("你输入的身份证号非法");
  82.          return false;
  83.      } else {
  84.          return true;
  85.      }
  86.  }
  87.  </script>

4 非空验证

  1.  function isNullValue(val) {
  2.              if (val == '') {return true;}
  3.              var regu = "^[ ]+$|^[ ]+$";
  4.              var re = new RegExp(regu);
  5.              if (re.test(val) == true) {return true;}
  6.              return false;
  7.      }

5 url验证

  1.  1 <input name="www" type="text" id="www" size="20" maxlength="70" onblur="checkform1();">
  2.  2
  3.  3 <script language="javascript">
  4.  4     function isURL(str) {    
  5.  5         return !!str.match(/(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/g);  
  6.  6     }
  7.  7
  8.  8     function checkform1() {
  9.  9         var www = $('#www').val();
  10. 10         if(www == "") {
  11. 11             console.log("请输入个人主页地址！");
  12. 12             $('#www').val('').focus();
  13. 13             return;
  14. 14         } else {
  15. 15             if(!isURL(www)) {
  16. 16                 console.log("您输入的个人主页地址不合法！");
  17. 17                 $('#www').val('').focus();
  18. 18                 return;
  19. 19             }
  20. 20         }
  21. 21
  22. 22     }
  23. 23 </script>

6 日期格式及开始时间不得大于结束时间验证

  1. <input type="text" name="beginTime" id="beginTime" value="" onchange="changeDate(this)"/>
  2. <input type="text" name="engTime" id="engTime" value="" onchange="changeDate(this)" />
  3.  
  4. <script language="javascript">
  5.      function RQcheck(RQ) {
  6.         var date = RQ;
  7.         var result = date.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);
  8.         if (result == null)
  9.             return false;
  10.         var d = new Date(result[1], result[3] - 1, result[4]);
  11.         return (d.getFullYear() == result[1] && (d.getMonth() + 1) == result[3] && d.getDate() == result[4]);
  12.    }
  13.     function CheckAdd(input) {//验证日期格式,假定规定的日期格式是YYYY-MM-DD
  14.         var ret = true;
  15.         if (!RQcheck($(input).val())) {
  16.             console.log("请输入正确的日期格式");
  17.             $(input).focus();
  18.             return false;
  19.         }
  20.         return ret;
  21.     }
  22.     function getDate(date){//格式化日期格式,特别是月日小于10的补零
  23.          var month=(date.getMonth()+1)>9?(date.getMonth()+1):('0'+(date.getMonth()+1));
  24.          var IDate=date.getDate()>9?date.getDate():('0'+date.getDate());
  25.          var strDate=date.getFullYear()+'-'+month+'-'+IDate;
  26.          return strDate;
  27.      }
  28.     function changeDate(input){//结束日期必须大于等于开始日期
  29.         var thisDate=getDate(new Date($(input).val()));
  30.          var beginTime=getDate(new Date($('#beginTime').val()));
  31.         var engTime=getDate(new Date($('#engTime').val()));
  32.          if(!CheckAdd(input)){
  33.              $(input).val('').focus()
  34.          }else if(beginTime>engTime){
  35.              console.log('填写的动工日期必须大于当前日期.')
  36.              $(input).val('').focus()
  37.          }else{
  38.              $(input).val(thisDate)
  39.          }
  40.     }
  41. </script>

7 英文,数字,中文验证

  1. 只能输入英文
  2. <input type="text" onkeyup="value=value.replace(/[^a-zA-Z]/g,'')">
  3. <br />
  4. <br />
  5. 只能输入英文
  6. <input type="text" onkeyup="value=value.replace(/[^\a-\z\A-\Z]/g,'')"
  7.       onpaste="return false"
  8.     oncontextmenu="return false" />
  9. 无法粘贴，右键不会弹出粘贴菜单
  10. <br />
  11. <br />
  12. 只能输入数字：
  13. <input onkeyup="this.value=this.value.replace(/\D/g,'')"
  14.     onafterpaste="this.value=this.value.replace(/\D/g,'')">
  15. <br />
  16. <br />
  17. 只能输入数字，小数点：
  18. <input name="price" type="text"
  19.     onkeyup="value=value.replace(/[^\d\.]/g,'')">
  20. <br />
  21. <br />
  22. 只能输入数字，小数点，下划线：
  23. <input name="price" type="text"
  24.     onkeyup="value=value.replace(/[^\d\._]/g,'')">
  25. <br />
  26. <br />
  27. 只能输入英文和数字：
  28. <input onkeyup="value=value.replace(/[\W]/g,'') "
  29.     onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">
  30.  <br />
  31. <br />
  32. 只能输入汉字：
  33. <input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')"
  34.     onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))">
  35. <br />
  36. <br />
  37. 禁止输入法输入：
  38. <input type="text" style="ime-mode: disabled">
  39. 无法切换输入法
  40. <br />
  41. <br />
  42. 只能输入中文、英文、数字、@符号和.符号：
  43. <input type="text"
  44.     onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\@\.]/g,'')">
  45. <br />
  46. <br />
  47. 不能为空：
  48. <input onblur="if(this.value.replace(/^ +| +$/g,'')=='')alert('不能为空!')">

8 数值型验证

  1. <input type="text" name="" id="" value="" maxlength="10"  onblur="validationNum(this)" onkeyup="value=value.replace(/[^\d\.-]/g,'')"/>
  2.  
  3. <script language="javascript">
  4.     function validationNum(input) {
  5.         var val = $(input).val();
  6. //      var regu = /^\-?[1-9]\d*$/g ;//只能输入正负整数
  7. //      var regu = /^(\-?0\.[0-9]*)$|(\-?[1-9][0-9]*\.?[0-9]*$)|^0$/g ;//可输入正负数(包括有小数的,0)
  8.         var regu = /^[1-9]\d*$/g; //只能输入正整数
  9.         if(val != "") {
  10.             if(!regu.test(val)) {
  11.                 console.log('只能输入数值,正数的首位不能为0,负数的数值部分首位不能为0');
  12.                 $(input).val('');
  13.             }
  14.         }
  15.         console.log(val.length)
  16.     }
  17. </script>

9 银行卡号验证

  1.   <input type="text" name="bankNum" id="bankNum" value=""  onblur="CheckBankNo($(this).val())"  onkeyup="value=value.replace(/[^\d]/g,'')"/>
  2.  
  3. <script language="javascript">
  4. //银行卡号Luhn校验算法
  5. //luhn校验规则：16位银行卡号（19位通用）:
  6. //1.将未带校验位的 15（或18）位卡号从右依次编号 1 到 15（18），位于奇数位号上的数字乘以 2。
  7. //2.将奇位乘积的个十位全部相加，再加上所有偶数位上的数字。
  8. //3.将加法和加上校验位能被 10 整除。
  9. //bankno为银行卡号
  10.  function luhnCheck(bankno){
  11.      var lastNum=bankno.substr(bankno.length-1,1);//取出最后一位（与luhn进行比较）
  12.  
  13.      var first15Num=bankno.substr(0,bankno.length-1);//前15或18位
  14.      var newArr=new Array();
  15.      for(var i=first15Num.length-1;i>-1;i--){    //前15或18位倒序存进数组
  16.          newArr.push(first15Num.substr(i,1));
  17.      }
  18.      var arrJiShu=new Array();  //奇数位*2的积 <9
  19.      var arrJiShu2=new Array(); //奇数位*2的积 >9
  20.  
  21.      var arrOuShu=new Array();  //偶数位数组
  22.      for(var j=0;j<newArr.length;j++){
  23.          if((j+1)%2==1){//奇数位
  24.              if(parseInt(newArr[j])*2<9)
  25.              arrJiShu.push(parseInt(newArr[j])*2);
  26.              else
  27.              arrJiShu2.push(parseInt(newArr[j])*2);
  28.          }
  29.          else //偶数位
  30.          arrOuShu.push(newArr[j]);
  31.      }
  32.  
  33.      var jishu_child1=new Array();//奇数位*2 >9 的分割之后的数组个位数
  34.      var jishu_child2=new Array();//奇数位*2 >9 的分割之后的数组十位数
  35.      for(var h=0;h<arrJiShu2.length;h++){
  36.          jishu_child1.push(parseInt(arrJiShu2[h])%10);
  37.          jishu_child2.push(parseInt(arrJiShu2[h])/10);
  38.      }        
  39.  
  40.      var sumJiShu=0; //奇数位*2 < 9 的数组之和
  41.      var sumOuShu=0; //偶数位数组之和
  42.      var sumJiShuChild1=0; //奇数位*2 >9 的分割之后的数组个位数之和
  43.      var sumJiShuChild2=0; //奇数位*2 >9 的分割之后的数组十位数之和
  44.      var sumTotal=0;
  45.      for(var m=0;m<arrJiShu.length;m++){
  46.          sumJiShu=sumJiShu+parseInt(arrJiShu[m]);
  47.      }
  48.  
  49.      for(var n=0;n<arrOuShu.length;n++){
  50.          sumOuShu=sumOuShu+parseInt(arrOuShu[n]);
  51.      }
  52.  
  53.      for(var p=0;p<jishu_child1.length;p++){
  54.          sumJiShuChild1=sumJiShuChild1+parseInt(jishu_child1[p]);
  55.          sumJiShuChild2=sumJiShuChild2+parseInt(jishu_child2[p]);
  56.      }
  57.      //计算总和
  58.      sumTotal=parseInt(sumJiShu)+parseInt(sumOuShu)+parseInt(sumJiShuChild1)+parseInt(sumJiShuChild2);
  59.  
  60.      //计算luhn值
  61.      var k= parseInt(sumTotal)%10==0?10:parseInt(sumTotal)%10;
  62.      var luhn= 10-k;
  63.  
  64.      if(lastNum==luhn){
  65.         console.log("验证通过");
  66.          return true;
  67.      }else{
  68.         console.log("银行卡号必须符合luhn校验");
  69.          return false;
  70.      }
  71.  }
  72.  
  73.  //检查银行卡号
  74.  function CheckBankNo(bankno) {
  75.      var bankno = bankno.replace(/\s/g,'');
  76.      if(bankno == "") {
  77.          console.log("请填写银行卡号");
  78.          return false;
  79.      }
  80.      if(bankno.length < 16 || bankno.length > 19) {
  81.          console.log("银行卡号长度必须在16到19之间");
  82.          return false;
  83.      }
  84.      var num = /^\d*$/;//全数字
  85.      if(!num.exec(bankno)) {
  86.          console.log("银行卡号必须全为数字");
  87.          return false;
  88.      }
  89.      //开头6位
  90.      var strBin = "10,18,30,35,37,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,58,60,62,65,68,69,84,87,88,94,95,98,99";
  91.      if(strBin.indexOf(bankno.substring(0, 2)) == -1) {
  92.          console.log("银行卡号开头6位不符合规范");
  93.          return false;
  94.      }
  95.      //Luhn校验
  96.      if(!luhnCheck(bankno)){
  97.          return false;
  98.      }
  99.      return true;
  100.  }
  101. </script>

10 file类型的必填验证

file 类型的value是只读属性,不能由js去控制,在实际项目中需要编辑,上传预览, 但是后台传值过来value获取一直都是空

解决: 在input上规定自定义属性,用自定义去判断是不是已经有了图

题外  错误信息提示

  1. <style>
  2. .toast-box {
  3.     position: absolute;
  4.     z-index: ;
  5.     max-width: %;
  6.     top: %;
  7.     left: %;
  8. }
  9.  
  10. .popover-success {
  11.     opacity: ;
  12.     display: block;
  13.     text-align: center;
  14.    　font-size:1.2rem;
  15.     color: #fff;
  16.     padding: .7em 1em;
  17.     white-space: nowrap;
  18.     box-sizing: border-box;
  19.     border-radius: 6px;
  20.     background-color: rgba(, , , 0.6);
  21.     line-height: 1.6;
  22.     letter-spacing: 2px;
  23.     -webkit-transform: translateX(-%) scale();
  24.     -ms-transform: translateX(-%) scale();
  25.     transform: translateX(-%) scale();
  26.     -webkit-transition: .2s ease;
  27.     transition: .2s ease;
  28. }
  29. </style>
  30. function toast_1(message) {
  31.                     var toastBox = "<div class='toast-box'><span class='popover-success'>" + message + "</span></div>";
  32.                     $('body').append(toastBox);
  33.                     $(".toast-box").fadeOut(,function(){
  34.                         $(".toast-box").remove();
  35.                     });
  36.             }

很多都是网上找到的加之前用到的,如果有任何侵权麻烦联系我,主要是整理,谢谢~~

input的表单验证(不断更新中~~)的更多相关文章

  1. jquery插件-表单验证插件-提示信息中文化与定制提示信息

    接上一篇 2)messages 提示:修改默认的提示信息最简单的方法是引入message_zh.js文件即可! 如果需要在validate()方法内提示则可以使用本选项 类型:Object 说明:自定 ...

  2. web框架-（六）Django补充---form表单验证

    一.form表单验证 1. 常规html页面的form表单验证 常规页面中,如果想实现对表单中用户输入信息的数据验证,需要配合Ajax来实现. 使用前我们先来熟悉下函数参数:request,其中包含的 ...

  3. jquery validate表单验证插件-推荐

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  4. jquery validate表单验证插件

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  5. 表单验证——JavaScript和Jquery版

    1.轻量级的JavaScript表单验证 在应用中引用 validator.min.js 文件 <script type="text/javascript" src=&quo ...

  6. angularjs学习第四天笔记（第一篇：简单的表单验证）

    您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...

  7. FormValidator表单验证

    所需的库文件 红色框内是所需要的JavaScript库文件. <%@ page language="java" contentType="text/html; ch ...

  8. jquery validate表单验证插件的基本使用方法及功能拓展

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.    1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮助提 ...

  9. 微信小程序之表单验证

    表单验证 何为表单验证呢? 百度百科给出的回答是这样的: 表单验证是javascript中的高级选项之一.JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证 [ ...

随机推荐

  1. jdk不同版本的垃圾收集器

  2. Django项目：CMDB(服务器硬件资产自动采集系统)--06--06CMDB测试Linux系统采集硬件数据的命令01

    #base.py # ————————01CMDB获取服务器基本信息———————— from config import settings #配置文件 class BasePlugin(object ...

  3. 阿里OSS ajax方式 web直传

    部分js代码 send_request = function(){//这是从后台获取认证策略等信息. var htmlobj=$.ajax({url:root+"/service/polic ...

  4. Delphi 设计模式：《HeadFirst设计模式》Delphi2007代码---单例模式之ChocolateBoiler[转]

     1  2{<HeadFirst设计模式>之单例模式 }  3{ 编译工具: Delphi2007 for win32 }  4{ E-Mail : guzh-0417@163.com   ...

  5. Spring-session整合到Redis

    闲来无事,学习一下spring的session管理,作为一个初学者,我了解到了如下内容: 1.为何要用Spring-session 在传统单机web应用中,一般使用tomcat/jetty等web容器 ...

  6. Entity Framework底层操作封装V2版本号（5）

    这个框架到如今最大的变化立即就要出现了,哪就是对缓存的使用.由于系统常常要去读取数据库数据.可是大家知道.数据库的处理能力是有限的,所以对于一些数据量不大,可是又 须要常常去读取的功能来说.更好的方法 ...

  7. mongodb+nodejs 增删查的demo

    1.启动数据库 启动完成后显示 端口号是27017 2.创建数据库 创建一个名为mydb的数据库   3.先查询一下当然的用户,再新增一个 4.创建数据表,查询所有的表 db.createCollec ...

  8. 评价目标检测(object detection)模型的参数:IOU,AP,mAP

    首先我们为什么要使用这些呢? 举个简单的例子,假设我们图像里面只有1个目标,但是定位出来10个框,1个正确的,9个错误的,那么你要按(识别出来的正确的目标/总的正确目标)来算,正确率100%,但是其实 ...

  9. spring入门案例分析及原理

    Springmvc执行原理: 一. 入门案例的执行流程 1. 当启动Tomcat服务器的时候,因为配置了load-on-startup标签,所以会创建DispatcherServlet对象,就会加载s ...

  10. ECS应用管理最佳实践

    前言 即使在CloudNative发展如火如荼的当下,ECS应用(直接将应用部署在ECS上,不使用容器)仍然占了相当大的比重,原因主要在于相对容器化应用,ECS应用由于不需要容器的运行时环境和类似K8 ...