JavaScript 正则表达式实现表单验证

表单验证
效果图：
输入格式正确：

输入格式错误：

基本代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>表单验证</title><style type="text/css">input{margin:10px 0;margin-left:50px;}#box{width:500px;height:500px;border:2px solid black;margin:50px auto;padding:30px;}span{color:red;}#btn{width:100px;height:30px;background:dodgerblue;}</style></head><body><div id="box">密码   <input type="password" id="ipt1" value="" /><span id="bz1"></span><br />确认密码  <input type="password" id="ipt2" value=""/><span id="bz2"></span><br />最大值  <input type="text" id="ipt3" value=""/><span id="bz3"></span><br />最小长度  <input type="text" id="ipt4" value=""/><span id="bz4"></span><br />手机  <input type="text" id="ipt5" value=""/><span id="bz5"></span><br />邮箱  <input type="text" id="ipt6" value=""/><span id="bz6"></span><br />身份证  <input type="text" id="ipt7" value=""/><span id="bz7"></span><br /><input type="button" id="btn" value="提交" /></div><script type="text/javascript">//密码大于6位数let aipt1 = false;ipt1.oninput = function(){let mima = /^.{6,}$/if(mima.test(ipt1.value)){bz1.innerHTML = '正确'aipt1 = true;}else{bz1.innerHTML = '输入有误'aipt1 = false;}}//确认密码和密码一致let aipt2 = false;ipt2.oninput = function(){if(ipt1.value == ipt2.value){bz2.innerHTML = '正确'aipt2 = true;}else{bz2.innerHTML = '两次输入不一致'aipt2 = false;}}//最大值为15let aipt3 = false;ipt3.oninput = function(){let min = /^([0-9]|10|11|12|13|14|15)$/if(min.test(ipt3.value)){bz3.innerHTML = '正确'aipt3 = true;}else{bz3.innerHTML = '最大值为 ：15'aipt3 = false;}}//最少输入5个字符let aipt4 = false;ipt4.oninput = function(){let max = /^\w{5,}$/if(max.test(ipt4.value)){bz4.innerHTML = '正确'aipt4 = true;}else{bz4.innerHTML = '最少输入5个字符'aipt4 = false;}}//手机号验证let aipt5 = false;ipt5.oninput = function(){let num = /^(13|14|15|17|18|19)\d{9}$/if(num.test(ipt5.value)){bz5.innerHTML = '正确'aipt5 = true;}else{bz5.innerHTML = '请输入正确的手机号码'aipt5 = false;}}//邮箱验证let aipt6 = false;ipt6.oninput = function(){let email = /^\w+[-+.]*\w*@([a-z0-9A-Z\u2E80-\u9FFF]-?)+(\.\w{2,6})+/if(email.test(ipt6.value)){bz6.innerHTML = '正确 'aipt6 = true;}else{bz6.innerHTML = '请输入规则的邮箱 'aipt6 = false;}}//身份证号验证let aipt7 = false;ipt7.oninput = function(){let id = /(^\d{15}$|^\d{18}$)|^\d{17}X$/if(id.test(ipt7.value)){bz7.innerHTML = '正确'aipt7 = true;}else{bz7.innerHTML = '请输入有效的身份证号码'aipt7 = false;}}btn.onclick = function(){if(aipt1&&aipt2&&aipt3&&aipt4&&aipt5&&aipt6&&aipt7){alert('输入正确')   }else{alert('输入错误')   }}</script></body>
</html>

JavaScript 正则表达式实现表单验证相关推荐

html表单验证邮箱表达式,Javascript正则表达式实现表单验证
今天我们通过实现用户注册页面验证来学习js当中的正则表达式的构造 1.题目:正则表达式实现用户注册页面验证 . 在各文本框中输入信息,在文本框失去焦点时,验证信息,如果输入的信息部满足要求,则提示信息 ...
常用正则表达式,常用表单验证javascript代码
常用正则表达式,常用表单验证javascript代码 function f_MobilCheck(as_SourceString) { if(as_SourceString.match(/^13[0 ...
html表单验证用正则表达式,JavaScript 使用正则表达式进行表单验证的示例代码
搜索热词 JavaScript 表单验证正则表达式大全利用正则表达式判断是否是0-9的阿拉伯数字 function regIsDigit(fData) { var reg = new RegExp(& ...
常用正则表达式,常用表单验证javascript代码(转)
function f_MobilCheck(as_SourceString) { if(as_SourceString.match(/^13[0-9]{9}$/g)) return true; / ...
JavaScript中的表单验证、正则表达式、数组的使用
表单验证.正则表达式.数组字符串的使用为什么要使用表单验证表单验证的常用步骤提交表单的2种方式文本框对象为什么要使用正则表达式正则表达式的两种创建方法正则表达式的模式正则表达式常用的 ...
正则表达式和表单验证
表单验证: 1.非空验证判断非空最好不要用trim()方法,不兼容,推荐使用正则表达式. <!DOCTYPE html> <html><head><meta ...
【前端学习-25】【day04】正则表达式、表单验证、用户名验证
[day04正则表达式] 一.正则表达式 1.1 什么是正则表达式 1.2 正则表达式的特点二.正则表达式在js中的应用 2.1 创建正则表达式(两种方式) 三.正则表达式的特殊字符 3.1 边界符 ...
JavaScript基础-form表单验证
表单验证的两种方式: 一.使用alert提示框 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"& ...
Javascript第六章世上最全常用RegExp正则表达式及表单验证源码第七课
元字符: 很多不太懂正则的朋友,在遇到需要用正则校验数据时,往往是在网上去找很久,结果找来的还是不很符合要求.所以我最近把开发中常用的一些正则表达式整理了一下,在这里分享一下.给自己留个底,也给朋友们 ...

JavaScript 正则表达式实现表单验证

JavaScript 正则表达式实现表单验证相关推荐

最新文章

热门文章