input的表单验证(不断更新中~~)

最新推荐文章于 2022-12-03 15:26:08 发布

weixin_30505043

最新推荐文章于 2022-12-03 15:26:08 发布

阅读量172

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xcdl/p/7412870.html

版权

1 手机号验证

<input type="tel" id="phone" name="phone" placeholder="请输入联系电话" maxlength="11" οnkeyup="this.value=this.value.replace(/[^0-9]/g,'')"
  onafterpaste="this.value=this.value.replace(/[^0-9]/g,'')" >

<script>
function checkPhone(phone){
    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}$)/;
                    if(!(regu.test(phone))){ 
                        return true; 
                    } else{
                        return false;
                    }
                }

    $("#phone").blur(function(){      //手机验证
                     var tel=$(this)[0];
                    if(tel.value.length!=11){
                        console.log("请输入正确的手机号");//增加错误提示
                         $('[name="phone"]').focus();
                         return ;
                    }
                    if(tel.value.length==11){
                        if(checkPhone(tel.value)){
                            console.log("请填写有效的11位手机号码");//错误提示
                            $('[name="phone"]').focus();
                             return ;
                        }
                    }
             });
</script>

2 email验证

<input type="email" id="email" name="email" placeholder="请输入电邮地址" οnblur="testEmail($(this).val())">                

<script>
function testEmail(str){
   var reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
   if(!reg.test(str)){
   console.log("请输入正确的电邮地址");//错误提示
    $('[name="email"]').focus();
      return ;
    }
}

</script>

3 身份证号验证

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

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

<input type="text" name="beginTime" id="beginTime" value="" οnchange="changeDate(this)"/>
<input type="text" name="engTime" id="engTime" value="" οnchange="changeDate(this)" />

<script language="javascript">
     function RQcheck(RQ) {
        var date = RQ;
        var result = date.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);
        if (result == null)
            return false;
        var d = new Date(result[1], result[3] - 1, result[4]);
        return (d.getFullYear() == result[1] && (d.getMonth() + 1) == result[3] && d.getDate() == result[4]);
   }         
    function CheckAdd(input) {//验证日期格式,假定规定的日期格式是YYYY-MM-DD
        var ret = true;
        if (!RQcheck($(input).val())) {
            console.log("请输入正确的日期格式");
            $(input).focus();
            return false;
        }
        return ret;
    }
    function getDate(date){//格式化日期格式,特别是月日小于10的补零
         var month=(date.getMonth()+1)>9?(date.getMonth()+1):('0'+(date.getMonth()+1));
         var IDate=date.getDate()>9?date.getDate():('0'+date.getDate());
         var strDate=date.getFullYear()+'-'+month+'-'+IDate;
         return strDate;
     }
    function changeDate(input){//结束日期必须大于等于开始日期
        var thisDate=getDate(new Date($(input).val()));
         var beginTime=getDate(new Date($('#beginTime').val()));
        var engTime=getDate(new Date($('#engTime').val()));
         if(!CheckAdd(input)){
             $(input).val('').focus()
         }else if(beginTime>engTime){
             console.log('填写的动工日期必须大于当前日期.')
             $(input).val('').focus()
         }else{
             $(input).val(thisDate)
         }
    }    
</script>

7 英文,数字,中文验证

只能输入英文
<input type="text" onkeyup="value=value.replace(/[^a-zA-Z]/g,'')">
<br />
<br />
只能输入英文
<input type="text" onkeyup="value=value.replace(/[^\a-\z\A-\Z]/g,'')"
      onpaste="return false"
    oncontextmenu="return false" />
无法粘贴，右键不会弹出粘贴菜单
<br />
<br />
只能输入数字：
<input onkeyup="this.value=this.value.replace(/\D/g,'')"
    onafterpaste="this.value=this.value.replace(/\D/g,'')">
<br />
<br />
只能输入数字，小数点：
<input name="price" type="text"
    onkeyup="value=value.replace(/[^\d\.]/g,'')">
<br />
<br />
只能输入数字，小数点，下划线：
<input name="price" type="text"
    onkeyup="value=value.replace(/[^\d\._]/g,'')">
<br />
<br />
只能输入英文和数字：
<input onkeyup="value=value.replace(/[\W]/g,'') "
    onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">
 <br />
<br />
只能输入汉字：
<input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')"
    onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))">
<br />
<br />
禁止输入法输入：
<input type="text" style="ime-mode: disabled">
无法切换输入法
<br />
<br />
只能输入中文、英文、数字、@符号和.符号：
<input type="text"
    onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\@\.]/g,'')">
<br />
<br />
不能为空：
<input onblur="if(this.value.replace(/^ +| +$/g,'')=='')alert('不能为空!')">

8 数值型验证

<input type="text" name="" id="" value="" maxlength="10"  onblur="validationNum(this)" onkeyup="value=value.replace(/[^\d\.-]/g,'')"/>

<script language="javascript">
    function validationNum(input) {
        var val = $(input).val();
//      var regu = /^\-?[1-9]\d*$/g ;//只能输入正负整数
//      var regu = /^(\-?0\.[0-9]*)$|(\-?[1-9][0-9]*\.?[0-9]*$)|^0$/g ;//可输入正负数(包括有小数的,0)
        var regu = /^[1-9]\d*$/g; //只能输入正整数
        if(val != "") {
            if(!regu.test(val)) {
                console.log('只能输入数值,正数的首位不能为0,负数的数值部分首位不能为0');
                $(input).val('');
            }
        }
        console.log(val.length)
    }
</script>

9 银行卡号验证

  <input type="text" name="bankNum" id="bankNum" value=""  onblur="CheckBankNo($(this).val())"  onkeyup="value=value.replace(/[^\d]/g,'')"/>

<script language="javascript">
//银行卡号Luhn校验算法
//luhn校验规则：16位银行卡号（19位通用）: 
//1.将未带校验位的 15（或18）位卡号从右依次编号 1 到 15（18），位于奇数位号上的数字乘以 2。
//2.将奇位乘积的个十位全部相加，再加上所有偶数位上的数字。
//3.将加法和加上校验位能被 10 整除。
//bankno为银行卡号
 function luhnCheck(bankno){
     var lastNum=bankno.substr(bankno.length-1,1);//取出最后一位（与luhn进行比较）
 
     var first15Num=bankno.substr(0,bankno.length-1);//前15或18位
     var newArr=new Array();
     for(var i=first15Num.length-1;i>-1;i--){    //前15或18位倒序存进数组
         newArr.push(first15Num.substr(i,1));
     }
     var arrJiShu=new Array();  //奇数位*2的积 <9
     var arrJiShu2=new Array(); //奇数位*2的积 >9
     
     var arrOuShu=new Array();  //偶数位数组
     for(var j=0;j<newArr.length;j++){
         if((j+1)%2==1){//奇数位
             if(parseInt(newArr[j])*2<9)
             arrJiShu.push(parseInt(newArr[j])*2);
             else
             arrJiShu2.push(parseInt(newArr[j])*2);
         }
         else //偶数位
         arrOuShu.push(newArr[j]);
     }
     
     var jishu_child1=new Array();//奇数位*2 >9 的分割之后的数组个位数
     var jishu_child2=new Array();//奇数位*2 >9 的分割之后的数组十位数
     for(var h=0;h<arrJiShu2.length;h++){
         jishu_child1.push(parseInt(arrJiShu2[h])%10);
         jishu_child2.push(parseInt(arrJiShu2[h])/10);
     }        
     
     var sumJiShu=0; //奇数位*2 < 9 的数组之和
     var sumOuShu=0; //偶数位数组之和
     var sumJiShuChild1=0; //奇数位*2 >9 的分割之后的数组个位数之和
     var sumJiShuChild2=0; //奇数位*2 >9 的分割之后的数组十位数之和
     var sumTotal=0;
     for(var m=0;m<arrJiShu.length;m++){
         sumJiShu=sumJiShu+parseInt(arrJiShu[m]);
     }
     
     for(var n=0;n<arrOuShu.length;n++){
         sumOuShu=sumOuShu+parseInt(arrOuShu[n]);
     }
     
     for(var p=0;p<jishu_child1.length;p++){
         sumJiShuChild1=sumJiShuChild1+parseInt(jishu_child1[p]);
         sumJiShuChild2=sumJiShuChild2+parseInt(jishu_child2[p]);
     }      
     //计算总和
     sumTotal=parseInt(sumJiShu)+parseInt(sumOuShu)+parseInt(sumJiShuChild1)+parseInt(sumJiShuChild2);
     
     //计算luhn值
     var k= parseInt(sumTotal)%10==0?10:parseInt(sumTotal)%10;        
     var luhn= 10-k;
     
     if(lastNum==luhn){
        console.log("验证通过");
         return true;
     }else{
        console.log("银行卡号必须符合luhn校验");
         return false;
     }        
 }
 
 //检查银行卡号
 function CheckBankNo(bankno) {
     var bankno = bankno.replace(/\s/g,'');
     if(bankno == "") {
         console.log("请填写银行卡号");
         return false;
     }
     if(bankno.length < 16 || bankno.length > 19) {
         console.log("银行卡号长度必须在16到19之间");
         return false;
     }
     var num = /^\d*$/;//全数字
     if(!num.exec(bankno)) {
         console.log("银行卡号必须全为数字");
         return false;
     }
     //开头6位
     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";
     if(strBin.indexOf(bankno.substring(0, 2)) == -1) {
         console.log("银行卡号开头6位不符合规范");
         return false;
     }
     //Luhn校验
     if(!luhnCheck(bankno)){
         return false;
     }
     return true;
 }
</script>

10 file类型的必填验证

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

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

题外错误信息提示

<style>
.toast-box {
    position: absolute;
    z-index: 9999;
    max-width: 90%;
    top: 48%;
    left: 50%;
}

.popover-success {
    opacity: 1;
    display: block;
    text-align: center;
   　font-size:1.2rem;
    color: #fff;
    padding: 0.7em 1em;
    white-space: nowrap;
    box-sizing: border-box;
    border-radius: 6px;
    background-color: rgba(0, 0, 0, 0.6);
    line-height: 1.6;
    letter-spacing: 2px;
    -webkit-transform: translateX(-50%) scale(1);
    -ms-transform: translateX(-50%) scale(1);
    transform: translateX(-50%) scale(1);
    -webkit-transition: .2s ease;
    transition: .2s ease;
}
</style>
function toast_1(message) {
                    var toastBox = "<div class='toast-box'><span class='popover-success'>" + message + "</span></div>";
                    $('body').append(toastBox); 
                    $(".toast-box").fadeOut(3000,function(){
                        $(".toast-box").remove(); 
                    });          
            }

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

转载于:https://www.cnblogs.com/xcdl/p/7412870.html

weixin_30505043

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
input的表单验证(不断更新中~~)

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]/...
复制链接

扫一扫