表单验证--注册页面

最新推荐文章于 2025-05-10 09:45:10 发布

lu__lala

最新推荐文章于 2025-05-10 09:45:10 发布

阅读量1.7k

点赞数 3

文章标签： css html jquery javascript

本文链接：https://blog.csdn.net/lu__lala/article/details/121021874

版权

本文介绍了如何进行前端注册页面的表单验证，包括昵称、密码、邮箱和确认密码的规则设定，如字符类型、长度限制和特殊符号要求。同时，提到了手机号码的特定格式验证，确保以特定号段开头且长度正确。

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

1.昵称不能为空只能由英文字母，数字和下划线组成，长度为6~15个字符

2.密码不能为空只能由英文字母，数字和下划线组成，长度为8~16个字符

3.邮箱不能为空只允许由英文字母，数字和下划线组成，必须含包含字符"@"与"."

4.密码与确认密码必须相同

5.手机号码长度为11位，号段只能以13,14,15,18开头

实现代码如下：

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>注册页面</title>
    <link href="./css/style.css" rel="stylesheet" type="text/css">
    <script src="js/jquery.js"></script>
</head>

<body class="body">

    <div class="warp">

        <form>
            <div class="form" id="form" name="myform" action="#" method="get">
                <div class="form-title">
                    <span>注册账号</span>
                </div>
                <div class="form-main">
                    <div class="form-list">
                        <span>昵称</span>
                        <div class="form-text">
                            <input type="text" id="user" />
                        </div>
                        <b id="user_msg"></b>
                    </div>
                    <div class="form-list">
                        <span>邮箱</span>
                        <div class="form-text">
                            <input type="text" id="email">
                        </div>
                        <b id="email_msg"></b>

最低0.47元/天解锁文章