input的表单验证(不断更新中~~)
2024-06-05 09:44:01
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-DDvar 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的积 <9var arrJiShu2=new Array(); //奇数位*2的积 >9var 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);elsearrJiShu2.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
input的表单验证(不断更新中~~)相关推荐
- 笔记：表单验证以及sweetalert中swal的使用
1.表单验证jsp页面表单样例 <div class="input-group input-group-lg"><span class="input-g ...
- jquery插件-表单验证插件-提示信息中文化与定制提示信息
接上一篇 2)messages 提示:修改默认的提示信息最简单的方法是引入message_zh.js文件即可! 如果需要在validate()方法内提示则可以使用本选项 类型:Object 说明:自定 ...
- Angular 表单验证
模板驱动验证 使用模板驱动验证需要依赖于原生的HTML表单验证器 Angular 会用指令来匹配具有验证功能的这些属性. 原生的HTMl验证器主要分两种 通过语义类型来进行定义 通过验证相关的属性来进 ...
- javascript 表单验证大全（一）
javascript 表单验证大全(一) 5.身份证验证:包括15位和18位.function idNumber(s)//身份证验证 {regu1=/^[1-9]\d{7}((0\d)|(1[0-2] ...
- jquery validate表单验证插件
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
- html中表单的校验的插件,功能强大的jquery.validate表单验证插件
本文实例为大家分享了jquery.validate表单验证的使用方法,供大家参考,具体内容如下 1 .表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助 ...
- angularjs学习第四天笔记（第一篇：简单的表单验证）
您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...
- jQuery Validate表单验证框架详解
jQuery表单验证框架总结 jQuery Validate验证框架详解 jQuery校验官网地址:bassistance.de » jQuery plugin: Validation 一.导入js库 ...
- html表单验证的作用,HTML5表单元素 、 表单属性 、 表单验证
[HTML5新表单] 1.type: - email : 验证逻辑不完整,只验证是否包含 @ : - search : - url : 验证逻辑不完整,只判断是否包含 http:// : - tel ...
最新文章
- R2LIVE: 一个鲁棒实时的雷达-惯导-视觉紧耦合的位姿估计和建图系统
- Visual Studio 2019连接自动的Sql Server开发版数据库（C#语言）
- Activiti之 Exclusive Gateway
- 使用$.post和$.get向服务器发送请求
- scala 转换为字符串_如何在Scala中将字符串转换为布尔值？
- 将下列数组中奇数和偶数分别存放于两个不同的两个数组
- 如何用python画长方形_Python 画矩形
- 非阻塞IO发送http请求
- linux新手入门学习 - linux目录结构
- ./configure --prefix --with解释
- Atitit 多线程 什么时候使用多进程的选择场景 目录 1.1. 看实现，比如你的用node.js实现，那就没得选了，只能多进程 1 1.2. 如果用java这一类，可以选择多进程与多线程模式，或
- 易语言WebUI教程 —— 入门简介
- Vite 入门 Vue Node
- “Uncaught TypeError: $(...).dataTable is not a function”
- html5制作心路历程,原创到伪原创 心路历程实战技巧
- 航空货运物流的全球与中国市场2022-2028年：技术、参与者、趋势、市场规模及占有率研究报告
- JS港澳台身份证校验
- mysql篇-sql查询语句-平均分、最高最低分、排序
- html显示隐藏图片,简单的图片显示与隐藏
- 中国第一块区块链牌照