js基础之正则验证

最新推荐文章于 2022-11-28 17:40:16 发布
最新推荐文章于 2022-11-28 17:40:16 发布
阅读量839 收藏
点赞数
分类专栏： js基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiang__dy/article/details/80456841
版权
<!DOCTYPE html >
< html lang= "en" >
< head >
< meta charset= "UTF-8" >
< title >Document </ title >
</ head >
< style type= "text/css" >
body {
background: #ccc;
}

label {
width: 40px;
display: inline-block;
}

.container {
margin: 100px auto;
width: 400px;
padding: 50px;
line-height: 40px;
border: 1px solid #999;
background: #efefef;
}

span {
margin-left: 30px;
font-size: 12px;
padding: 2px 20px 0;
color: #ccc;
}

.wrong {

color: red;
background: url( images/error.png) no-repeat;
}

.right {
color: green;
background: url( images/right.png) no-repeat;
}

.pwd {
width: 220px;
height: 20px;
background: url( "images/strong.jpg") no-repeat;
}
.str1{
background-position: 0 -20px;
}
.str2{
background-position: 0 -40px;
}
.str3{
background-position: 0 -60px;
}
.str4{
background-position: 0 -80px;
}
< / style >
< body >
< div class= "container" >
< label >QQ </ label >< input type= "text" id= "inp1" >< span >输入正确的QQ号码 </ span >< br >
< label >手机 </ label >< input type= "text" id= "inp2" >< span >输入13位手机号码 </ span >< br >
< label >邮箱 </ label >< input type= "text" id= "inp3" >< span >输入正确邮箱 </ span >< br >
< label >座机 </ label >< input type= "text" id= "inp4" >< span >输入您的座机 </ span >< br >
< label >账号 </ label >< input type= "text" id= "inp5" >< span >亲输入您的账号 </ span >< br >
< label >密码 </ label >< input type= "text" id= "inp6" >< span >请输入您的密码 </ span >< br >
< div id= "password" class= "pwd" ></ div >
</ div >


< script >
//需求：input中输入内容，失去焦点，进行判断。
// 如果错误在后面的span中提示出来。正确也提示出来。

//获取相关元素，一个一个绑定事件。(如果想要，可以自己封装)
var inpArr = document. getElementsByTagName( "input");
var password = document. getElementById( "password");

//第一个：qq号
fn( inpArr[ 0], / ^ [ 1-9 ][ 0-9 ] {4,10} $ /);
//第二个：手机号
fn( inpArr[ 1], / ^ (( 13 [ 0-9 ]) | ( 15 [^ 4,\D ]) | ( 18 [ 0-9 ])) \d {8} $ /);
//第三个：邮箱号
fn( inpArr[ 2], / ^ [ \w\- \. ] +\@ [ \w ] +\. [ \w ] {2,4} $ /);
//第四个：座机号
fn( inpArr[ 3], / ^ 0\d {2} -\d {8} $|^ 0\d {3} -\d {7} $ /);
//第五个：账号
fn( inpArr[ 4], / ^ [ a-zA-Z0-9_\- \$ ] {3,16} $ /);



//第六个：密码
inpArr[ 5]. onblur = function () {
//写正则：/^[1-9][0-9]{4,}$/
var reg1 = / ^ [ \$ \w \- ] {6,18} $ /;
if( reg1. test( this. value)){
//要给后面的span赋值，加类名。(right和wrong)
this. nextSibling. className = "right";
this. nextSibling. innerHTML = "恭喜您输入正确！";

//密码强度：初始化值为1级难度；
password. className = "pwd str1";
//根据难度不同在层叠...
//从高往低判断：因为符合难的密码的同样符合简单。
if( / ^ [ A-Za-z0-9 ] + [ _$ ] + [ A-Za-z0-9 ] * $ /. test( this. value)){
password. className = "pwd str4";
} else if( / ^ ([ a-z ] . * [ 0-9 ]) | ([ A-Z ] . * [ 0-9 ]) | ([ 0-9 ] . * [ a-zA-Z ]) $ /. test( this. value)){
password. className = "pwd str3";
} else if( / ^ ([ a-z ] . * [ A-Z ]) | ([ A-Z ] . * [ a-z ]) $ /. test( this. value)){
password. className = "pwd str2";
}
} else{
//要给后面的span赋值，加类名。(right和wrong)
this. nextSibling. className = "wrong";
this. nextSibling. innerHTML = "对不起，格式错误！";
}
}










//方法封装
function fn( ele, str){
ele. onblur = function () {
var reg = str;
if( reg. test( this. value)){
//要给后面的span赋值，加类名。(right和wrong)
this. nextSibling. className = "right";
this. nextSibling. innerHTML = "恭喜您输入正确！";
} else{
//要给后面的span赋值，加类名。(right和wrong)
this. nextSibling. className = "wrong";
this. nextSibling. innerHTML = "对不起，格式错误！";
}
}
}




< / script >



</ body >
</ html >
jdyy1
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS正则验证邮箱的格式详细介绍
01-21
对于我们做WEB开发的，对表单的验证是必不可少的，所以今天把常用的一些验证罗列出来，呵呵，今天下午刚学的JS正则表达式，有什么不足的地方还希望大家批评指正。 一.相关的代码 代码如下:function test() { var ...
Checkbox全选反选
weixin_43332393的博客
09-27 1129
</tbody> </table> </div> <script> // 1. 全选和取消全选做法： 让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可 // 获取元素 var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮 var j_tbs = documen...
js的一些实用正则判断方法
dxj124的博客
01-08 3855
1.正则判断 一个链接是否有效合法 if ($('input[name="iIsRedirect"]').prop('checked') && p2['sRedirectURL'] != '') { var sRedirectURL = $('input[name="sRedirectURL"]').val(), ...
常用JS判断正则
weixin_30448685的博客
09-06 50
经常用到的一些，总结下，哈哈 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889 ...
大陆、港澳台身份证、护照、军官证的正则表达式
ffeeng的博客
08-06 1万+
最近工作因为工作需要，有一个身份验证需要前端验证大陆、港澳台身份证、护照、军官证号码的合法性。 初步整理了一下各个验证的正则表达式，如有错误请大家指出，谢谢！ 大陆身份证正则表达式： idCardValid(id) { // 1 "验证通过!", 0 //校验不通过 var format = /^(([1][1-5])|([2][1-3])|([3][1-7])...
对护照等的正则判断（JAVA-工作记录）
最新发布
weixin_43966996的博客
11-28 3588
对护照、港澳通行证、台湾居民大陆通行证进行后台规则校验（java）
JS正则表达式验证数字（非常全）
10-20
正则表达式，又称规则表达式，在项目中经常会用到正则表达式，今天小编抽空给大家分享js正则表达式验证数字的方法，感兴趣的朋友参考下吧
JS input正则验证大全
08-08
本资源包“JS input正则验证大全”主要聚焦于使用JavaScript进行输入框（input）的各种类型的数据验证，包括英文、中文、邮箱、手机号、银行卡和身份证等常见字段的正则校验规则。以下是对这些知识点的详细说明： 1...
JS正则表达式 验证邮箱登入 分析
01-08
js正则表达式 验证邮箱登入 #emailError { color: red; } [removed] = function() { /* 分析： 0.给提交按钮绑定时间 1.先获取 用户输入框的值 2.写正则表达式 3.用正则表达式...
大陆、港澳台身份证、护照、军官证、户口本的正则表达式
licuicui5201的博客
07-26 4196
身份校验
常用证件号码的正则表达式大全(收集整理)
10-20
前段时间做一个项目，需要对各种常用证件进行验证。而港澳通行证，台湾通行证，护照这些证件，在网上并没有找到做正则验证的方法。后来从脚本之家网站的代码中发现了这些验证规则，特效分享给大家，供大家参考
身份证，港澳通行证，台胞证，护照正则表达式
329s的博客
12-29 1万+
身份证：/^(^\d{18}$|^\d{17}(\d|X|x))$/ 港澳通行证：/^([A-Z]\d{6,10}(\(\w{1}\))?)$/ 台湾通行证：/^[a-zA-Z][0-9]{9}$/ 护照：/^1[45][0-9]{7}$|([P|p|S|s]\d{7}$)|([S|s|G|g]\d{8}$)|([Gg|Tt|Ss|Ll|Qq|Dd|Aa|Ff]\d{8}$)|([H|h|M...
正则匹配护照格式
DwyanePeng的博客
09-20 5146
美国、英国护照号码：9 位数字 加拿大护照：2 个字母加 6 个数字 法国护照：2 个数字加 2 个字母加 5 个数字 意大利护照：2 个字母加 7 个数字 西班牙护照：3 个字母加 6 个数字 德国护照：9 个字符，由 2-3 个数字与 6-7 个字母混排，头尾是字母。或者单纯为 9 个数字 def foreign_passport(sentence): pattern = [r'...
各证件号码(身份证、护照、军官证、驾驶证、港澳台湾通行证、户口簿)正则表达式校验 完整正确
热门推荐
江湖行骗老中医
05-04 1万+
package com.***.utils; /** * @Description 各证件卡号校验类 * @author longwei * @date 2020/7/23 14:17 */ public class CardsUtil { /** 正则表达式：验证身份证 */ public static final String REGEX_ID_CARD = "(^[1-9]\\d{5}(18|19|20)\\d{2}((0[1-9])|(10|11|12))(([0-2].
js 常用证件类型的正则表达式
C# AES（ECB模式）加密 前段加密后端解密
03-05 1181
Js 常用证件类型的正则表达式 //居民户口簿 reg = /^[a-zA-Z0-9]{3,21}$/; // 护照验证 reg = /^[a-zA-Z]{5,17}$ | [a-zA-Z0-9]{5,17}$/; //军官证或士兵证 reg = /^[\u4E00-\u9FA5]{1,2}(字第)([0-9a-zA-Z]{4,8})(号?)$/; //驾驶证 reg = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}
js正则表达式校验：手机号、身份证、护照、港澳台通行证、银行卡号、车牌号等......
pipizhou16的博客
08-08 8858
js正则表达式校验：手机号、身份证、护照、港澳台通行证、银行卡号、车牌号等......
js 验证护照
置酒天晴的博客
04-28 2029
checkPassport(passport, empty) { if (empty != true && passport.length === 0) { console.log("请输入护照编号!"); return false; } var myreg = /^[a-zA-Z0-9]{3,21}$/; var hz = /^(P\d{7})|(G\d{8})$/; .
常用证件正则表达式
dingdabao8888的博客
05-11 958
1、身份证 /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}(\d|x|X)$/,//身份证 2、军官证 /^[0-9]{8}$/,//军官证 3、护照 /^[a-zA-Z0-9]{5,17}$/, //护照 4、营业执照 /^[a-zA-Z0-9]{10,20}$/,...
表单校验之---校验姓名/护照正则/台湾往来通行证/校验身份证号/港澳往来通行证正则/军官证正则/检验手机号/校验银行卡号
lixiaoqidecsdn的博客
08-06 1473
表单校验之---校验姓名/护照正则/台湾往来通行证/校验身份证号/港澳往来通行证正则/军官证正则/检验手机号/校验银行卡号。
JavaScript常用正则表达式验证函数示例与解释
在JavaScript编程中，正则表达式是一种强大的工具，常用于数据验证，确保用户输入符合预期格式。本篇文章将介绍五个常用的JavaScript验证正则表达式函数，分别针对不同的数据类型： 1. **字符串字节长度检测**: ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值