原生前端页面校验

最新推荐文章于 2022-10-08 23:44:30 发布
最新推荐文章于 2022-10-08 23:44:30 发布
阅读量219 收藏
点赞数 1
分类专栏： 前端 文章标签： html javascript 正则表达式 css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33735635/article/details/108993137
版权

一个简单的小Demo展示原生的前端校验

<%@ page contentType = "text/html;charset=UTF-8" %>
<%@ page import = "java.sql.*" %>
<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">
table.gridtable {
font-family: verdana,arial,sans-serif;
font-size:16px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table.gridtable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table.gridtable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
</style>
<html>
 <head> 
  <title>前端校验测试</title> 
 </head> 
 <body> 
  <h1>前端校验测试</h1> 
  <table  class="gridtable" 
  > 
   <thead> 
    <tr> 
     <th>规则</th> 
     <th>测试区</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td width="50%" height="40" align="left"> <font color="red" size="4"><strong>通用方法测试</strong></font>* 1、过滤首尾空格 * 2、字母自动转大写</td> 
     <td width="50%" height="40" align="left"> <input name="conditon1" type="text" class="common" maxlength="37" style="width: 50%" value="通用方法测试" onblur="commonFunction(this);" /> </td> 
    </tr> 
    <tr> 
     <td width="50%" height="40" align="left"> <font color="red" size="4"><strong>身份证号验证</strong></font> * 1、只能是15位或18位数字和字母 * 2、中间不允许空格 </td> 
     <td width="50%" height="40" align="left"> <input name="conditon1" type="text" class="common" maxlength="37" style="width: 50%" value="1" onblur="fucCheckIDCard(this);" /> </td> 
    </tr> 
    <tr> 
     <td width="50%" height="40" align="left"> <font color="red" size="4"><strong>港澳台居住证</strong></font> * 1、只能是18位数 * 2、中间不允许空格 </td> 
     <td width="50%" height="40" align="left"> <input name="conditon1" type="text" class="common" maxlength="37" style="width: 50%" value="2" onblur="fucCheckHKIDCard(this);" /> </td> 
    </tr> 
    <tr> 
     <td width="50%" height="40" align="left"><font color="red" size="4"><strong>驾驶证号码</strong></font> * 1、只能是12位数 * 2、中间不允许空格 </td> 
     <td width="50%" height="40" align="left"><input name="conditon1" type="text" class="common" maxlength="37" style="width: 50%" value="3" onblur="fucCheckCarIDCard(this);" /> </td> 
    </tr> 
    <tr> 
     <td width="50%" height="40" align="left"><font color="red" size="4"><strong>车架号/VIN码</strong></font> * 1、只能是17位字母+数字 * 2、中间不允许空格 </td> 
     <td width="50%" height="40" align="left"><input name="conditon1" type="text" class="common" maxlength="37" style="width: 50%" value="4" onblur="fucCheckSocialCreditCode(this);" /> </td> 
    </tr> 
    <tr> 
     <td width="50%" height="40" align="left"><font color="red" size="4"><strong>车牌号码</strong></font> * 1、汉字+字母+数字组合，长度不超过15； * 2、不包括*、%、-等特殊符号 </td> 
     <td width="50%" height="40" align="left"><input name="conditon1" type="text" class="common" maxlength="37" style="width: 50%" value="5" onblur="fucCheckCarLicensePlate(this);" /> </td> 
    </tr> 
    <tr> 
     <td width="50%" height="40" align="left"><font color="red" size="4"><strong>发动机号码</strong></font> * 1、不包括*、%、-等特殊符号 </td> 
     <td width="50%" height="40" align="left"><input name="conditon1" type="text" class="common" maxlength="37" style="width: 50%" value="6" onblur="fucCheckCarEngineNumber(this);" /> </td> 
    </tr> 
    <tr> 
     <td width="50%" height="40" align="left"><font color="red" size="4"><strong>银行账号1</strong></font> * 1、只能是数字组成，长度不超过19位； * 2、不包括除数字外的其他字符； * 3、中间不允许空格</td> 
     <td width="50%" height="40" align="left"><input name="conditon1" type="text" class="common" maxlength="37" style="width: 50%" value="7" onblur="fucCheckBankAccount(this);" /> </td> 
    </tr> 
    <tr> 
     <td width="50%" height="40" align="left"><font color="red" size="4"><strong>银行账号2</strong></font> * 1、只能是数字组成，长度不超过19位； * 2、不包括除数字外的其他字符； * 3、中间不允许空格 </td> 
     <td width="50%" height="40" align="left"><input name="conditon1" type="text" class="common" maxlength="37" style="width: 50%" value="8" onblur="fucCheckBankAccount2(this);" /> </td> 
    </tr> 
    <tr> 
     <td width="50%" height="40" align="left"><font color="red" size="4"><strong>手机号码</strong></font> * 1、只能是11位数字组成； * 2、不包括除0~9数字以外的其他字母字符； * 3、数字1开头 </td> 
     <td width="50%" height="40" align="left"><input name="conditon1" type="text" class="common" maxlength="37" style="width: 50%" value="9" onblur="fucCheckPhoneNumber(this);" /> </td> 
    </tr> 
    <tr> 
     <td width="50%" height="40" align="left"><font color="red" size="4"><strong>统一社会信用代码</strong></font> * 1、长度不超过18位； * 2、只能有字母和阿拉伯数字组成； * 3、中间不允许空格 </td> 
     <td width="50%" height="40" align="left"><input name="conditon1" type="text" class="common" maxlength="37" style="width: 50%" value="10" onblur="fucCheckSocialCreditCode(this);" /> </td> 
    </tr> 
    <tr> 
     <td width="50%" height="40" align="left"><font color="red" size="4"><strong>询报价号码</strong></font> * 1、长度不超过30 * 2、只允许阿拉伯数字 * 3、中间不允许空格 </td> 
     <td width="50%" height="40" align="left"><input name="conditon1" type="text" class="common" maxlength="37" style="width: 50%" value="11" onblur="fucCheckProposalNo(this);" /> </td> 
    </tr> 
	<tr> 
     <td width="50%" height="40" align="left"><font color="red" size="4"><strong>电话号码</strong></font> * 1、包括手机与座机号码校验 </td> 
     <td width="50%" height="40" align="left"><input name="conditon1" type="text" class="common" maxlength="37" style="width: 50%" value="12" onblur="fucCheckPhoneNumberAll(this);" /> </td> 
    </tr> 
   </tbody> 
  </table> 
  <!--数据校验--> 
  <script>
/**
 * 通用规则
 * 1、过滤首尾空格
 * 2、字母自动转大写
 */
function commonFunction(field){
	var inputDate ;
	var outputDate ;
	inputDate  = field.value;
	//outputDate = inputDate.toUpperCase().replace(/\s*/g,""); 过滤全部空格和小写转大写
	outputDate = inputDate.replace(/(^\s*)|(\s*$)/g, "").toUpperCase();//过滤首尾空格,小写转大写
	field.value = outputDate;
	}
  
/**
 * 身份证号验证
 * 1、只能是15位或18位数字和字母
 * 2、中间不允许空格
 */
function fucCheckIDCard(field) {
    var idCardNum;
    idCardNum = field.value;
    // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
    var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
    if (reg.test(idCardNum)) { //1、只能是15位或18位数字和字母, 2、中间不允许空格
        return true;
    } else {
        alert("请输入正确的15位或18位身份证号码。");
        field.value = "";
        return false;
    }
}

/**
 * 港澳台居住证
 * 1、只能是18位数
 * 2、中间不允许空格
 */
function fucCheckHKIDCard(field) {
    var hkIdCardNum;
    hkIdCardNum = field.value;
    // 
    var reg = /^[0-9]{18}$/;
    if (reg.test(hkIdCardNum)) { //1、只能18位数
        return true;
    } else {
        alert("请输入正确的18位港澳台居民居住证。");
        field.value = "";
        return false;
    }
}

/**
 * 驾驶证号码
 * 1、只能是12位数
 * 2、中间不允许空格
 */
function fucCheckCarIDCard(field) {
    var carNum;
    carNum = field.value;
    var reg = /^[0-9]{12}$/;
    if (reg.test(carNum)) { //12位数
        return true;
    } else {
        alert("请输入正确的驾驶证号码。");
        field.value = "";
        return false;
    }
}

/**
 * 车架号/VIN码
 * 1、只能是17位字母+数字
 * 2、中间不允许空格
 */
function fucCheckCarFrameNumber(field) {
    var carNum;
    carNum = field.value;
    var reg = /^[0-9a-zA-Z]{17}$/;
    if (reg.test(carNum)) { //数字字母
        if (carNum.length == 17) { //17位
            return true;
        } else {
            alert("请输入正确的17位车架号/VIN码。" + carNum.length);
            field.value = "";
            return false;
        }
    } else {
        alert("请输入正确的17位车架号/VIN码。");
        field.value = "";
        return false;
    }
}

/**
 * 车牌号码
 * 1、汉字+字母+数字组合，长度不超过15；
 * 2、不包括*、%、-等特殊符号
 */
function fucCheckCarLicensePlate(field) {
    var carNum;
    carNum = field.value;
    var reg = /^[\u4E00-\u9FA50-9A-Za-z]+$/;
    var regSpc = /[^u4e00-u9fa5w]{15}$/;
    if (reg.test(carNum) && !regSpc.test(carNum) && carNum.length <= 15) { //数字字母中文 //特殊字符^%&',;=?$\" //15位
		return true;
	}else {
        alert("请输入正确的车牌号码，不包括*、%、-等特殊符号。");
        field.value = "";
        return false;
    }
}

/**
 * 发动机号码
 * 1、不包括*、%、-等特殊符号
 */
function fucCheckCarEngineNumber(field) {
    var carNum;
    carNum = field.value;
    var reg = /[^u4e00-u9fa5w]/;
    if (!reg.test(carNum)) { //数字字母中文
        return true;
    } else {
        alert("请输入正确的发动机号码。");
        field.value = "";
        return false;
    }
}

/**
 * 银行账号
 * 1、只能是数字组成，长度不超过19位；
 * 2、不包括除数字外的其他字符；
 * 3、中间不允许空格
 */
function fucCheckBankAccount(field) {
    var bankAccountNo;
    bankAccountNo = field.value;
	//js去除空格的方法 str   =   str.replace(/\s+/g,""); 
    var regbankAccountNo = /^\d{1,19}$/; //只能是数字,长度不超过19位
    if (regbankAccountNo.test(bankAccountNo) && bankAccountNo.length <= 19) {
        return true;
    } else {
        alert("请填写正确的银行账号，长度不超过19位，谢谢！");
        field.value = "";
        return false;
    }
}

/**
 * 银行账号
 * 1、只能是数字组成，长度不超过19位；
 * 2、不包括除数字外的其他字符；
 * 3、中间不允许空格
 */
function fucCheckBankAccount2(field) {
    var bankAccountNo;
    bankAccountNo = field.value;
	//js去除空格的方法 str   =   str.replace(/\s+/g,""); 
    var regbankAccountNo = /^\d{1,19}$/;
    if (regbankAccountNo.test(bankAccountNo) && bankAccountNo.length > 0 && bankAccountNo.length < 20) { //只能是数字
        return true;
    }else {
        alert("请填写正确的银行账号，长度不超过19位，谢谢！");
        field.value = "";
        return false;
    }
}
/**
 * 手机号码
 * 1、只能是11位数字组成；
 * 2、不包括除0~9数字以外的其他字母字符；
 * 3、数字1开头；
 */
function fucCheckPhoneNumber(field) {
    var phoneNum;
    phoneNum = field.value;
    var reg = /^1\d{10}$/;
    if (reg.test(phoneNum)) { //1开头的11位数字
        return true;
    } else {
        alert("请输入正确的11位数字手机号码。");
        field.value = "";
        return false;
    }
}
/**
 * 统一社会信用代码
 * 1、长度不超过18位；
 * 2、只能有字母和阿拉伯数字组成；
 * 3、中间不允许空格
 */
function fucCheckSocialCreditCode(field) {
    var creditNum;
    creditNum = field.value;
    var reg = /^[0-9a-zA-Z]{1,18}$/;
    if (reg.test(creditNum)) { //1-18位数字字母验证
        return true;
    } else {
        alert("请注意，统一社会信用代码长度不能超过18位。");
        field.value = "";
        return false;
    }
}
/**
 * 询报价号码
 * 1、长度不超过30
 * 2、只允许阿拉伯数字
 * 3、中间不允许空格
 */
function fucCheckProposalNo(field) {
    var creditNum;
    creditNum = field.value;
    var reg = /^[0-9]{1,30}$/;
    if (reg.test(creditNum) || creditNum =="") { //1-18位数字字母验证
		//field.setAttribute("class","gridtable");
		field.style.backgroundColor = '#ffffff';
        return true;
    } else {
        alert("请注意，统一社会信用代码长度不能超过18位。");
        field.value = "";
		field.style.backgroundColor = '990000';
        return false;
    }
}

/**
 * 电话号码
 */
function fucCheckPhoneNumberAll(field) {
    var creditNum;
    creditNum = field.value;
    var reg = /^([1]\d{10}|([\(（]?0[0-9]{2,3}[）\)]?[-]?)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?)$/;
    if (reg.test(creditNum) || creditNum =="") { //1-18位数字字母验证
		//field.setAttribute("class","gridtable");
		field.style.backgroundColor = '#ffffff';
        return true;
    } else {
        alert("请输入正确的11位数字手机号码或电话号码。");
        field.value = "";
		field.style.backgroundColor = '990000';
        return false;
    }
}
</script> 
  <!--数据校验-->  
 </body>
</html>



<!--


/**
 * 证件号码验证(01居民身份证,06港澳台居民居住证)
 * 1、只能是15位或18位数字和字母
 * 2、中间不允许空格
 */
function fucCheckIDCard(field,identifyTypeName) {
    var idCardNum = field.value;
    var order = jtk.elementToolKit.getFieldOrder(field);
	var idType = document.getElementsByName(identifyTypeName)[order].value;
	var validateFlag = true;
    if(idType == '01'){//01居民身份证
    	validateFlag = fucCheckIDCard(field);
	}
	if(idType == '06'){//06港澳居民居住证
		var firstSixBitCheck = idCardNum.substring(0,6);
		if(firstSixBitCheck == "810000" || firstSixBitCheck == "820000" || firstSixBitCheck == "830000"){// 前6位为810000、820000或830000
			validateFlag = fucCheckIDCard(field);
		}else{
			alert("请输入正确的18位港澳台居民居住证。");
		}
	}
	return validateFlag;
}
-->
想飞的孤独少年
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生js实现表单前端校验
三个和尚_的博客
12-08 1232
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;注册页面&amp;lt;/title&amp;gt; &amp;lt;script&amp
原生JavaScript实现拖动校验功能
01-18
本文实例为大家分享了JavaScript实现拖动校验的具体代码，供大家参考，具体内容如下 思路 1、页面布局采用定位,背景颜色变化bg的宽度为0，其宽度会随着滑块的移动而移动。 页面结构 <!--验证--> <!--...
原生js实现表单验证（提交后验证）
08-29
在平常的页面当中，我们经常用到表单和表单验证，表单验证是数据进入数据库前一次在客户机利用脚本检查数据类型的行为。作为一个初学者，在这里贴下我的菜鸟代码。
css 使用 :valid 和 :invalid 实现原生表单校验
朝阳39的博客
12-21 504
效果见 https://demo.cssworld.cn/selector/9/3-1.php <form id="csForm" novalidate> <p> 验证码：<input class="cs-input" placeholder=" " required pattern="\w{4,6}"> <span class="cs-valid-tips"></span> </p&gt
html5 自定义密码验证,html5表单原生自定义验证的完善
weixin_28950403的博客
06-22 263
在我上篇博客https://my.oschina.net/u/3470006/blog/1505758html5表单原生自定义验证中用户名其实存在问题，用户名以拼音方式输入时会强制输入字母并突破字数限制，虽然后台再验证可以拦截非法输入，但这样的体验仍是不好的，我决定加以改进首先，将html改成如下name="UserName" onblur="if(value!='')CheckUserName(...
表单验证的两种方法-(原生JS和Html5)
zhuxufeifei的博客
08-18 8758
原生JS的表单验证 html部分 &amp;lt;form&amp;gt; &amp;lt;div&amp;gt; &amp;lt;label&amp;gt;用户名：&amp;lt;/label&amp;gt;&amp;lt;input type=&quot;text&quot; id=&quot;txtUsername&quot;&amp;gt; &amp;lt;di
js实现登录注册框手机号和验证码校验（前端部分）
11-28
总的来说，这个实现结合了正则表达式进行数据格式校验、事件监听处理用户交互、动态更新UI展示倒计时以及错误信息的显示，这些都是前端开发中常见的功能需求。理解并掌握这些技术对于构建安全、用户体验良好的登录...
amazeui页面校验功能的实现代码
11-19
### AmazeUI页面校验功能实现详解 #### 一、背景介绍 AmazeUI是一款优秀的前端框架，它基于HTML5和CSS3，并且兼容多种浏览器。AmazeUI提供了丰富的组件和便捷的功能，使得开发者能够快速地构建出美观、实用的Web...
VUE 图片上传-前端
11-20
5. **图片格式和大小限制**：为了保证上传的图片符合服务器要求，前端可以对图片格式和大小进行初步校验。例如，限制只能上传.jpg、.png等常见格式，或者限制文件大小不超过一定值。 6. **表单数据序列化**：在提交...
原生js综合表单验证
mcyhero的博客
06-06 707
要求： 1、使用失去焦点事件完成表单验证 每一项验证失去焦点时都可以即时验证 2、姓名： 单词字符组成 6--10为 ，不能用数字开头 年龄： 只能由数字组成 年龄不能为负数 密码：6--18位字符组成 有密码强弱验证 3、确认密码和密码相同 4、手机号： 15 13 18 开头 5、qq ： 5--12...
原生验证码验证编写
weixin_43343423的博客
06-30 170
servlet层 @WebServlet("/checkCode") public class CheckCodeServlet extends HttpServlet { //kaptcha验证码框架 @Override protected void service(HttpServletRequest req, HttpServletResponse res) thr...
前端常用input输入框正则校验总结及输入框输入限制处理
热门推荐
qq_40868156的博客
04-26 1万+
1.下面是封装好后的工具方法，进行输入框常见的正则校验: // 中文姓名校验器(只能输入汉字，最多10个) export const checkName = name => { return /^[\u4E00-\u9FA5]{1,10}$/.test(name) } // 手机号码校验（只能输入数字，1开头,第二位为3~9，后面9位为1~9） export const checkPhone = phone => { return /^1[3456789]\d{9}$/.test(ph
前端vue2.0表格Table如何校验
最新发布
weixin_55988085的博客
10-08 844
vue2.0动态表格的校验
原生js —— 表单验证
我的博客
09-02 1640
表单验证示例 知识点： ① form标签的action属性为提交地址，method属性为提交方式，取值有get和post。若想禁止点击type=submit//button按钮后提交表单内容，可通过form对象.onsubmit=function（）{return false}/对象.onsubmit="return false;""来禁止。默认是return true的。故默认是直接提交的。 ...
html5 原生表单验证,html5表单原生自定义验证
weixin_26985923的博客
06-04 433
这段时间在重构自己以前做的项目，在做到注册时花了不少时间，原先是打算做用户名，密码,确认密码，邮箱，手机这几个选项，但写了半天后测试发现有不少问题，就干脆删繁就简，只留下了用户名和密码两项按照设定，用户名要做唯一性检测，只能数字或字母，最大25位，密码则有很多条规则：1密码位数在6到25之间2密码不能是用户名或反转的用户名3密码不能是纯字母或纯数字4密码不能包含特殊符号5密码不能为简单密码,如ab...
html5表单原生自定义验证
weixin_34194379的博客
08-10 350
2019独角兽企业重金招聘Python工程师标准>>> ...
html5表单原生自定义验证的完善
weixin_34367845的博客
08-15 251
2019独角兽企业重金招聘Python工程师标准>>> ...
E9表单建模前端接口详解
这些接口是为E9系统的表单建模提供交互功能的关键，使得开发者可以更加便捷地进行数据操作和页面动态更新。接口被封装在全局对象`window.ModeForm`中，以实现统一的调用和管理。 E9系统采用的是单页模式，因此推荐...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值