使用jQuery写一个注册界面

最新推荐文章于 2024-06-02 21:52:39 发布
最新推荐文章于 2024-06-02 21:52:39 发布
阅读量1.5k 收藏 25
点赞数
文章标签： html jquery javascript css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_64674481/article/details/130328168
版权

写一个注册页面，包含用户名、密码、二次输入密码、邮箱地址。
必须校验内容：
1. 用户名必须包含英文字母和数字；
2. 密码必须大于6位；
3. 两次密码必须一致；
4. 邮箱必须包含.com和@符号，@符号后必须是：gmail、163、qq、woniu其中之一；
5. 用户名、密码、二次输入密码、邮箱都不能为空。
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="../../pack/bootstrap/css/bootstrap.min.css"/>
    <script type="text/javascript" src="../js/jquery-3.6.3.js"></script>
    <style>

        body{
            background-image: url("../img/q.jpg");
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;
        }
        .login-frame {
            width: 450px;
            height: 500px;
            margin-top: 200px;
        }

        .login-head {
            width: 450px;
            height: 70px;
            background-color: rgba(37, 169, 210, 0.80);
            text-align: center;
            line-height: 100px;
            font-size: 10px;
            font-weight: bold;
            color: rgba(245, 245, 245, 0.90);
            padding-top: 1px;
            border-top-left-radius: 15px;
            border-top-right-radius: 15px;
        }

        .login-
最低0.47元/天 解锁文章
子鱼.
关注
  • 0
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
使用JQ完成注册页面（表单）的校验
南无阿弥豆腐的博客
04-22 1895
1.步骤: 1.0:在页面加载时,执行3部分操作 1.1:第1部分-必填项 1.1.1:给form表单中所有的带"required"类名的input标签中,添加一个红色的*,表示必填项. 1.2:第2部分-获取焦点/失去焦点的校验 1.2.1:获得所有的输入项,为输入项添加一个blur事件. 1.2.2:获得当前元素的父元素(即触发blur函数的元素的父元素) 1.2.3:清除父元素中显示...
一个jquery注册界面
05-30
总的来说，这个"一个jQuery注册界面"项目通过结合HTML、CSS和JavaScript（特别是jQuery库），创建了一个功能完备且视觉效果良好的用户注册界面。其特效可能包括动画效果、实时输入验证、以及更高级的用户交互，这些...
HTML+CSS+jQuery实现登录界面（含用户验证）
apple_54470279的博客
05-28 5978
前言 本登录页面来自最近在做的一个学生作业管理项目。在系统设计时，学生和教师用户统一由该校的管理员导入，因此去除了用户注册的功能。 登录页面由 HTML+CSS+jQuery 实现，通过 $.ajax 获取 json 文件并读取其中保存的学校列表，动态的展示在选择学校的下拉列表中。 该页面实现了简单的登录验证功能。 不赘述 HTML 和 CSS 的实现原理！仅对 jQuery 部分进行详解，需要源代码的可以自行下载，内含详细注释。 源代码： CSDN： 百度网盘：https://pan.baidu.com/
【JQuery】注册界面
看！爪可摘星辰！
10-19 6734
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Register&lt;/title&gt; &lt;link rel="stylesheet" href="bo
HTML静态网页作业——基于html+css+javascript+jquery+bootstarp响应式成都家乡介绍网页
最新发布
QQ__2709137139的博客
06-02 924
家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒子设定居中，内部左中右布局，下方横向浮动排列，大学学习的前端知识点和布局方式都有运用，CSS的代码量也很足、很细致，使用hover来完成过渡效果、鼠标滑过效果等，使用表格、表单补充模块，为方便新手学习页面中没有使用js有需要的可以自行添加。 ⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——
js验证用户名的方法
未知的方向
06-24 967
<br />function chkUsername() {<br /> var username = $.trim($("#inp_uname").val());<br /> if(username=="") {<br />  return 0;<br /> }<br /> else if( /^/d.*$/.test( username ) ){<br />  //用户名不能以数字开头<br />  return -1;<br /> }<br /> else if(fLen( username )<6
使用JQ完成注册页面校验
03-09 327
validate入门： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>validate入门案例</title> <script type="tex...
jquery实现界面无刷新加载登陆注册
10-21
标题中的“jquery实现界面无刷新加载登陆注册”指的是使用jQuery库来创建一个用户界面，该界面可以在不重新加载整个网页的情况下进行登录和注册操作。这种技术通常被称为Ajax（Asynchronous JavaScript and XML）...
FormValidator.zip（使用jquery-validate实现注册界面表单验证）
06-23
本项目"FormValidator.zip"包含了一个使用 `jquery-validate` 实现的注册界面表单验证的示例源码。 `jQuery Validate` 插件的核心功能包括： 1. **基本验证**：它可以自动检查表单字段是否为空、是否为邮箱格式、...
jquery用户注册页面
06-01
本项目"jquery用户注册页面"是利用jQuery技术来实现一个用户注册界面，主要关注点在于如何通过jQuery提高用户体验并简化前端代码。 在用户注册页面中，jQuery通常用于以下关键功能： 1. **表单验证**：jQuery可以...
jquery css3带背景透明登录注册表单提交页面.zip
12-10
不错的前端JS特效、页面功能的代码，很适合练习前端的各种特效和功能，也可直接拿来适当调整后使用，用于练手、学习，也是很不错的
jQuery登录注册框动态切换代码
07-24
jQuery登录注册框动态切换代码是一款卡片式的登录注册框切换，点击编辑图标按钮登录和注册表单切换效果代码。
jQuery点击弹出登录注册表单代码
06-24
jQuery点击弹出登录注册表单代码是一款jQuery基于bootstrap制作网站点击弹出登录或注册表单内容切换代码。
jQuery Ajax 登陆和注册页面
06-01
带有自动验证插件，
漂亮的JQuery登陆注册界面
06-20
登陆注册页面，在一个页面上遮罩实现，可拓展。
jQuery可切换皮肤的会员注册界面代码.zip
07-11
《jQuery可切换皮肤的会员注册界面代码》是一个用于创建具有多皮肤切换功能的用户注册界面的JavaScript库。这个代码库特别适用于那些希望为他们的企业网站提供个性化登录或注册体验的开发者。通过使用jQuery，它提供...
使用原生js写一个简单的注册登录页面
热门推荐
apple_61973423的博客
08-15 2万+
使用JavaScript写的登录注册页面
jquery实现注册表单验证（仅供参考）
2301_77638787的博客
08-22 664
尽量帮助初学者减少初级的困难，其实一旦掌握了之后，会发现它其实是非常容易。但大道至简，知易行难，需要大家之后不断练习，在此基础上加强知识的认知深度。虽然我尽量以通俗易通的形式，将内容体现出来，但水平毕竟有限，望大家海涵。
jquery h5注册页面及功能函数封装
yehaocheng520的博客
09-21 609
h5 注册页面 很久没有用过jquery了，都差点忘记如何在html中引入自定义的js文件了。 在html文件中引入自定义的js文件，可以通过script标签引入，为了能够执行js文件中的方法，可以用立即执行函数进行函数封装。 具体写法如下： (function(){ //里面是代码块 })() 或者是这样的: (function(){ //里面是代码块 }()) 判断访问终端 为了保证兼容性，可以通过判断访问终端的方式来获取当前的环境。 因为像微信 QQ等，是不能直接在微信/QQ中打开某个链接进行
用html+css+jquery生成一个注册验证界面
05-25
以下是一个简单的注册验证界面的示例代码： HTML代码： ``` <!DOCTYPE html> <html> <head> <title>注册验证界面</title> <meta charset="UTF-8"> <link href="style.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="script.js"></script> </head> <body> <h1>注册验证界面</h1> <form id="register-form" method="post" action=""> <label for="username">用户名：</label> <input type="text" id="username" name="username" required> <div id="username-error" class="error-message"></div> <label for="email">邮箱：</label> <input type="email" id="email" name="email" required> <div id="email-error" class="error-message"></div> <label for="password">密码：</label> <input type="password" id="password" name="password" required> <div id="password-error" class="error-message"></div> <label for="confirm-password">确认密码：</label> <input type="password" id="confirm-password" name="confirm-password" required> <div id="confirm-password-error" class="error-message"></div> <input type="submit" value="注册"> </form> </body> </html> ``` CSS代码： ``` body { font-family: Arial, sans-serif; background-color: #f0f0f0; } h1 { text-align: center; margin-top: 50px; } form { width: 400px; margin: 0 auto; padding: 20px; background-color: #fff; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } label { display: block; margin-bottom: 5px; } input[type="text"], input[type="email"], input[type="password"] { display: block; width: 100%; padding: 10px; margin-bottom: 10px; border: none; border-radius: 3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); } input[type="submit"] { display: block; width: 100%; padding: 10px; margin-top: 20px; background-color: #4CAF50; color: #fff; border: none; border-radius: 3px; cursor: pointer; } .error-message { color: #f00; font-size: 12px; margin-bottom: 10px; } ``` jQuery代码： ``` $(document).ready(function() { // 验证用户名 $("#username").blur(function() { var username = $(this).val(); if (username.trim() == "") { $("#username-error").text("用户名不能为空"); } else if (username.length < 6 || username.length > 20) { $("#username-error").text("用户名长度应为6-20个字符"); } else { $("#username-error").text(""); } }); // 验证邮箱 $("#email").blur(function() { var email = $(this).val(); if (email.trim() == "") { $("#email-error").text("邮箱不能为空"); } else if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(email)) { $("#email-error").text("邮箱格式不正确"); } else { $("#email-error").text(""); } }); // 验证密码 $("#password").blur(function() { var password = $(this).val(); if (password.trim() == "") { $("#password-error").text("密码不能为空"); } else if (password.length < 6 || password.length > 20) { $("#password-error").text("密码长度应为6-20个字符"); } else { $("#password-error").text(""); } }); // 验证确认密码 $("#confirm-password").blur(function() { var confirmPassword = $(this).val(); var password = $("#password").val(); if (confirmPassword.trim() == "") { $("#confirm-password-error").text("确认密码不能为空"); } else if (confirmPassword != password) { $("#confirm-password-error").text("两次密码输入不一致"); } else { $("#confirm-password-error").text(""); } }); // 提交表单时验证 $("#register-form").submit(function() { var username = $("#username").val(); var email = $("#email").val(); var password = $("#password").val(); var confirmPassword = $("#confirm-password").val(); if (username.trim() == "") { $("#username-error").text("用户名不能为空"); return false; } else if (username.length < 6 || username.length > 20) { $("#username-error").text("用户名长度应为6-20个字符"); return false; } else if (email.trim() == "") { $("#email-error").text("邮箱不能为空"); return false; } else if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(email)) { $("#email-error").text("邮箱格式不正确"); return false; } else if (password.trim() == "") { $("#password-error").text("密码不能为空"); return false; } else if (password.length < 6 || password.length > 20) { $("#password-error").text("密码长度应为6-20个字符"); return false; } else if (confirmPassword.trim() == "") { $("#confirm-password-error").text("确认密码不能为空"); return false; } else if (confirmPassword != password) { $("#confirm-password-error").text("两次密码输入不一致"); return false; } else { return true; } }); }); ``` 在这个示例中，我们使用了HTML、CSS和jQuery来创建一个简单的注册验证界面。在表单中，我们为每个输入字段添加了必要的验证规则，例如，用户名不能为空且长度应为6-20个字符，电子邮件地址必须符合标准格式，密码不能为空且长度应为6-20个字符，确认密码必须与密码相匹配。 我们使用jQuery的事件处理程序来验证每个输入字段，并在需要时显示错误消息。在提交表单时，我们还验证了每个输入字段，并在表单未通过验证时阻止提交。 这只是一个简单的示例，您可以根据需要添加更多的验证规则和样式来创建自定义的注册验证界面。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

子鱼.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值