基本正则表达式的运用【前端】
基本正则表达式的运用【前端】
天蝎座的程序媛
发布于 2022-11-18 20:49:39
发布于 2022-11-18 20:49:39
代码可运行
运行总次数：0
代码可运行
关于正则表达式一直都是个让很多程序员都觉得很郁闷的一个东西，我觉得创造正则表达式的那个家伙简直就是个奇葩，要不就是外星人。就那么一个字符规则校验就足以使那么多程序员为之抓狂，你可以想象这个东西该有多变态。由于本人水平有限，不可能写的那么全面，只是把比较实用的东西给写下来，还有对一些常用的正则表达式进行收集整理，如果有写的不对的地方，还希望各路大牛多多指教！代码真的很详细，句句有解释
正则表达式简介：
正则表达式是由一些具有特殊含义的字符组成的字符串，多用于查找、替换符合规则的字符串。在表单验证、Url映射等处都会经常用到。 废话不多说，开始进入正题。
下面是没有任何css样式和js文件的正则表达式，很简单，可以直接用，下面是效果图
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>正则验证</title>
<style type="text/css">
span{
color: red;
font-size: 14px;
}
</style>
<script type="text/javascript">
function $(sid){
return document.getElementById(sid);
}
//做最终的验证
function myf(){
var a = vName();
var b = vPwd();
if(a==false&&b==false){
return false;
}
return true;
}
function vName(){
var name = $("sname").value;//拿到文本框的值
var sp = $("sa");//拿到span
var reg = /^\w{6,10}$/;//正则模板
if(!reg.test(name)){//不匹配 shift+end
sp.innerHTML = "用户名必须是6-10位的合法字符";
return false;
}
else{//匹配上了
sp.innerHTML = "";
return true;
}
}
function vPwd(){
var name = $("spwd").value;//拿到文本框的值
var sp = $("sb");//拿到span
var reg = /^\d{6}$/;//正则模板
if(!reg.test(name)){//不匹配 shift+end
sp.innerHTML = "密码必须是6位的数字";
return false;
}
else{//匹配上了
sp.innerHTML = "";
return true;
}
}
function vEmail(){//2384jk@sj.com
var name = $("semail").value;//拿到文本框的值
var sp = $("sc");//拿到span
var reg = /^\w+@\w+\.[a-zA-Z]{2,3}$/;//正则模板
if(!reg.test(name)){//不匹配 shift+end
sp.innerHTML = "邮箱格式不正确";
}
else{//匹配上了
sp.innerHTML = "";
}
}
//1-9 10-99 100-149 150
function vAge(){//1-150
var name = $("sage").value;//拿到文本框的值
var sp = $("sd");//拿到span
var reg = /^([1-9]|[1-9]\d|1[0-4]\d|150)$/;//正则模板
if(!reg.test(name)){//不匹配 shift+end
sp.innerHTML = "年龄必须在1-150之间";
}
else{//匹配上了
sp.innerHTML = "";
}
}
function vZj(){//1-150
var name = $("szj").value;//拿到文本框的值
var sp = $("se");//拿到span
var reg = /^(\d{3,4}-)?(\d{7,8})(-\d{1,4})?$/;//正则模板
if(!reg.test(name)){//不匹配 shift+end
sp.innerHTML = "座机号码格式不正确";
}
else{//匹配上了
sp.innerHTML = "";
}
}
function vPhone(){//1-150
var name = $("sphone").value;//拿到文本框的值
var sp = $("sf");//拿到span
var reg = /^1[3-9]\d{9}$/;//正则模板
if(!reg.test(name)){//不匹配 shift+end
sp.innerHTML = "手机号码格式不正确";
}
else{//匹配上了
sp.innerHTML = "";
}
}
function vSfz(){//1-150
var name = $("ssfz").value;//拿到文本框的值
var sp = $("sg");//拿到span
var reg = /^(\d{18}|\d{15}|\d{17}X)$/;//正则模板
if(!reg.test(name)){//不匹配 shift+end
sp.innerHTML = "身份证格式不正确";
}
else{//匹配上了
sp.innerHTML = "";
}
}
</script>
</head>
<body>
<!--
用户名必须是6-10位的合法字符
密码必须是6位的数字
邮箱：@ .
年龄：1-150
座机：(区号3,4)-(号码(7,8))-(分机号1,4)
手机号：1[3-9]9个数字
身份证：15位或者18位 17位+X
-->
<form action="1.html" onsubmit="return myf()">
用户名：<input type="text" id="sname" onblur="vName()"/><span id="sa"></span><br />
密码：<input type="text" id="spwd" onblur="vPwd()"/><span id="sb"></span><br />
邮箱：<input type="text" id="semail" onblur="vEmail()"/><span id="sc"></span><br />
年龄：<input type="text" id="sage" onblur="vAge()"/><span id="sd"></span><br />
座机：<input type="text" id="szj" onblur="vZj()"/><span id="se"></span><br />
手机号：<input type="text" id="sphone" onblur="vPhone()" /><span id="sf"></span><br />
身份证：<input type="text" id="ssfz" onblur="vSfz()" /><span id="sg"></span><br />
<input type="submit" value="提交" />
<input type="reset" value="清空" />
</form>
</body>
</html>感谢！
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-04-23，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
