正则表达式表单验证

最新推荐文章于 2025-03-23 14:39:27 发布

风叶翩翩

最新推荐文章于 2025-03-23 14:39:27 发布

阅读量1.3k

点赞数 2

分类专栏： JavaScript 正则表达式

本文链接：https://blog.youkuaiyun.com/weixin_45743799/article/details/103225485

版权

本文介绍如何利用正则表达式进行表单验证，包括失去焦点、获取内容后的判断过程，确保输入内容符合预设格式。并提供效果和代码演示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用正则表达式验证表单中输入的内容是否符合格式。

原理分析：
1.失去焦点和获取焦点
2.获取内容
3.判断是否符合
4.不符合显示错误号符合显示对号

效果演示

在这里插入图片描述

代码演示

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div>用户名：<input type="text" id="userName"/><span id="a1"></span></div>
    <div>密码：<input type="password" id="pwd" /><span id="a2"></span></div>
    <div>确认密码：<input type="password" id="affirmPwd" /><span id="a3"></span></div>
    <div>邮箱：<input type="text" id="mailbox" /><span id="a4"></span></div>
    <div>手机号：<input type="text" id="cellphone" /><span id="a5"></span></div>
    <div>身份证号：<input type="text" id="identityCard" /><span id="a6"></span></div>
    <div>地址：<input type="text" id="address" /><span id="a7"></span></div>
    <div><input type="button" value=