登陆表单页面的制作和校验

最新推荐文章于 2024-09-19 17:35:39 发布
最新推荐文章于 2024-09-19 17:35:39 发布
阅读量467 收藏 3
点赞数 1
CC 4.0 BY-SA版权
分类专栏： js 文章标签： 登录表单的制作 表单的校验 表单 onblur事件 js中的表单制作
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/psjasf1314/article/details/99737634

制作的效果图：

制作思路：

整个表单框在div控件中，可把此表单看作是一个十行三列的表格。

要用到的控件：<form></form>表单控件  <table></table>表格控件 <tr></tr>行控件 <td></td>单元格控件

<input/>控件

校验思路：

当焦点离开第一行时，判断第一行是否为空，若为空，提醒用户。以下雷同。

主要用到的事件：onblur(失去焦点事件）

源码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <link rel="stylesheet" href="css/表单.css" />
        <script type="text/javascript">
            function shiqu(id,id2)
            {  
//            alert("第一行失去焦点");
            var idElement = document.getElementById(id);
             var v = idElement.value;
//             alert(typeof v);
        if(v == "")
        {   
        
        
        var id2Element = document.getElementById(id2);
        id2Element.style.display = "inline";
        
        }
        else{  
        var id2Element = document.getElementById(id2);
        id2Element.style.display = "none";
        
        }
            }
        </script>
        
        
    </head>
    <body>
    
    <div id = "div001" style="
    border: 5px solid gray;
    width: 60%;
    height: 600px;">
<form>
    <table>
        <tr>
            <th id="001"><h2>会员注册</h2></th>
            <td colspan="2">USER REGISTER</td>
            
        </tr>
        <tr>
            <td>用户名：</td>
            <td>
                <input type="text" name="username001" id="username001" onblur="shiqu('username001','username001001')" />
            </td>
            <td style="display: none;"id = "username001001"><font color="#FF0000">用户名为空</font></td>
            
        </tr>
        <tr>
            <td>密码：</td>
            <td ><input type="password" name="password" id="password001" onblur="shiqu('password001','password001001')" /></td>
            <td style="display: none;" id="password001001"><font color="#FF0000">密码不能为空</font></td>
        </tr>
        <tr>
            <td>确认密码：</td>
        <td colspan="2"><input type="password" name="qrpassword" id="qrpassword001" /></td>
        
        </tr>
        <tr>
            <td>Email:</td>
            <td><input type="text" name="email" id="email001"onblur="shiqu('email001','email001001')" /></td>
        <td style="display: none;" id="email001001"><font color="#FF0000">email不能为空</font></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td  colspan="2">
            男<input type = "radio"  name = "xingbie" id = "xingbie001"/>
            女<input type ="radio" name = "xingbie" id = "xingbie002" checked="checked"/></td>
        </tr>
        <tr>
            <td>出生日期：</td>
            <td colspan="2"><input type="text" name="birth001" id="birth001"onblur="shiqu('birth001','birth001001')" /></td>
            <td style="display: none;"id="birth001001"><font color="#FF0000">出生日期不能为空</font></td>
        </tr>
        <tr>
            <td>验证码：</td>
            <td><input type="text" name="yanzhengma001" id="yanzhengma001" /></td>
            <td><input type="image" name="tupian001" id="tupian001"src="../img/captcha.jhtml"onblur="shiqu('tupian001','tupian001001')"/></td>
            <td style="display: none;"id="tupian001001"><font color="#FF0000">验证码不能为空</font></td>
        </tr>
        <tr>
            <td colspan="3"><input type="submit" name="tijiao001" id="tijiao001" value="提交" /></td>
            
        </tr>
        
    </table>
    
</form>
    </div>
    </body>
</html>

 

【jQuery】第七课——使用jquery制作表单校验提示特效，正则表达式的应用
王迪
09-28 1346
知识点：掌握string对象的用法、会使用正则表达式验证页面输入内容、会使用表单选择器。 1、表单基本验证技术 无论是动态网站，还是其他 B/S 结构的系统，都离不开表单。表单作为客户端向服务器端提交数据的主要载体，如果提交的数据不合法，将会引出各种各样的问题，那么如何避免这样的问题昵？ 1.1 表单验证的必要性 有时，在用户填写表单时，我们希望...
【前端开发实战】用 CSS 制作一个华丽的动画登录表单超详细教程新手友好~完整代码示例| 前端动效| 网页设计| 项目实例|HTML/CSS动画|打造炫酷漂亮的登陆表单 - 适合初学者小白的详细指南
南北极之间
06-07 805
总之，学习前端开发需要耐心和毅力，要保持对技术的热情和兴趣，不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式，你可以逐渐成为一名优秀的前端开发者。在用户悬停在环形动画上时，边框颜色会变化并增加阴影，提升交互体验。整体效果是一个炫酷的动画登录表单。这个登录表单页面包含了一个环形动画效果和一些输入框、按钮的样式。
前端案例：简易登录表单的制作，包括用户名、密码、随机验证码（代码完整，复制即用）
m0_61083409的博客
03-06 1700
案例效果 本案例基于 vue.js 和Element UI 实现。随机验证码采用 DOM 操作和 canvas 绘制，可随机生成和刷新；后续程序逻辑直接填入方法即可。 Element UI 下载安装 //npm安装element npm i element-ui -S //vue项目中全局引入 src/main.js中 import ElementUI from 'element-ui'; Vue.use(ElementUI); element ui 的使用方式参见官网：Element - The
前端表单布局丨简洁大气的登录表单一(源码)
我们好像在哪见过
09-19 289
前端表单布局丨简洁大气的登录表单一(源码)
JS例子：表单的严谨验证（bootstrap布局）
weixin_52166438的博客
08-27 144
表单的严谨验证 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <link rel="stylesheet" href="../css/bootstrap.min.css"> <script src="../jquery-1.12
html表单验证代码网页表单验证
11-29
网页表单验证
纯前端实现登录页面(表单通过正则判断，实现验证码功能以及简单的登录和重置功能)
曾小超的博客
02-05 4396
页面效果如下： 代码分享： HTML代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="icon" href="image/logo.jpg"> <title>登录系统</title> ...
Bootstrap实现登录校验表单(带验证码)
09-02
在本文中，我们将探讨如何使用Bootstrap来创建一个带有验证码和验证功能的登录表单。 首先，要创建这样一个表单，我们需要引入Bootstrap的相关CSS和JavaScript文件。在提供的代码片段中，可以看到引用了以下文件： ...
零基础学习AJAX之制作自动校验的表单
12-09
【零基础学习AJAX之制作自动校验的表单】 在传统的网页开发中，当用户在注册时需要检查用户名是否已被占用，通常需要提交整个表单到服务器，等待服务器响应，然后更新页面来显示结果。这种方法用户体验较差，因为它...
html网页用户注册表单验证校验JavaScript源码代码
05-02
html网页用户注册表单验证校验JavaScript源码代码，完整代码已经打包，还迎下载，代码仅供学习参考。 function checkuser(){//检查用户名的方法 var usernameNode=document.getElementById("username");//通过id...
java socket 传输文件时做和校验，校验位
03-10
java socket在传输文件时，分包、组包和校验。 校验包数据，现成的代码可以拷贝直接运行。
用javascript对表单进行验证
01-04
常用的都有了 用javascript对表单进行验证 用javascript对表单进行验证 常用的都有了
前端登录模板html+css漂亮的水滴登录页
10-24
好看酷炫的水滴登录页，拿去即用
网页表单制作和验证过程
huanxuecheng的专栏
04-01 1111
在Webapp编程中程序员经常要和前台页面打交道，CSS，HTML和JS等都是经常需要操作的内容，对于直接用户来说，这些就是他们印象中的整个程序，如果前台页面不美观或是使用不便将影响用户对程序的印象，因此程序员应该在前台上投入一些精力学习是值得的，在Web2.0时代来临之后更是如此。　　下面就是一个通用网页表单的制作和验证过程　　表单效果　　　　放置表单项的表格　　将表单项放在
关于表单设计（登录）的几点感悟
weixin_30824479的博客
09-04 131
需求：登录页：用户名，密码，验证码，短信验证码。表单验证。 原来： 1.右侧留空放提示文字： 缺点：超过一定长度会折行。 2.用input里的placeholder代替label的提示作用 缺点：输入时会消失。 现在： 1.提示文字另起一行visibility:hidden，不用担心折行问题了。 2.input加上background-img， padding-left:40p...
JS页面校验
Rick的博客
03-21 859
结构： 1.导入正则表达式校验包：https://blog.youkuaiyun.com/weixin_44718300/article/details/88726653 2.页面校验.HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>...
网页表单验证
wyhcczz的博客
04-09 403
<html> <head> <meta charset="UTF-8"> <title>表单验证</title> <style type="text/css"> *:focus{ outline: none; }/*设置表单中的所有元素获得焦点时，不再出现虚线框或者高亮框*/ ....
表单验证案例
无言月梧桐的博客
07-15 947
表单验证案例 一.需求分析 要实现的功能： 1.出现如下图所示的内容：（HTML和CSS完成） 2.对表单中的每一个表单项进行校验，使得文本框发生失去焦点事件后，校验信息。（javascript完成） 3.点击注册功能后判断每一个表单项是否正确，若全部正确才能提交，否则不能提交。（javascript完成） 二.具体实现 <!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8">
web页面设计和校验
Asavakitln的博客
10-18 438
#1用户设计页面代码 <%@ page language=“java” contentType=“text/html; charset=UTF-8” pageEncoding=“UTF-8”%> 用户登录 <%@ include file="/pages/header.jsp"%> 欢迎使用...
制作表单页面跳转
最新发布
05-07
### 表单提交后实现页面跳转的方法 在 HTML 和 JavaScript 中，可以通过多种方式实现在表单提交后页面自动跳转的功能。以下是几种常见的方法及其具体实现： #### 方法一：通过 `window.location.href` 实现跳转 当表单数据验证完成后，可以使用 JavaScript 的 `window.location.href` 属性来指定目标 URL 并完成页面跳转[^3]。 ```javascript osub.onclick = function () { if (t1 && p1 && p2 && t2 && t3) { // 验证所有字段是否有效 window.location.href = "https://example.com/target-page"; // 跳转到目标页面 } else { alert("请填写正确的信息！"); } }; ``` 此方法适用于需要动态控制跳转逻辑的情况，例如基于用户输入的有效性决定是否执行跳转。 --- #### 方法二：利用 `<form>` 标签的 `action` 属性 HTML 表单本身支持通过设置 `action` 属性，在提交时直接跳转至指定的目标地址[^2]。 ```html <form action="https://example.com/target-page" method="POST"> <!-- 输入字段 --> <input type="text" name="username" placeholder="用户名"> <button type="submit">提交</button> </form> ``` 在此情况下，浏览器会在表单提交后默认加载由 `action` 指定的 URL 页面。 --- #### 方法三：结合 PHP 后端处理返回重定向响应 如果希望在服务器端处理完请求后再进行页面跳转，则可以在 PHP 文件中发送 HTTP 重定向头信息[^1]。 ```php <?php // 假设这是接收表单数据的PHP脚本 if ($_SERVER["REQUEST_METHOD"] === "POST") { $isValid = validateFormData($_POST); // 自定义函数用于校验数据有效性 if ($isValid) { header("Location: https://example.com/success-page"); exit(); } else { echo "提交失败，请检查您的输入！"; } } ?> ``` 注意：调用 `header()` 函数前不能有任何输出（包括空白字符），否则会引发报错。 --- #### 方法四：借助 AJAX 提交表单并手动触发跳转 对于更复杂的场景，比如不想刷新整个页面而仅更新部分内容的同时还能实现跳转，可采用 AJAX 技术异步提交表单数据，并根据服务端反馈结果调整行为[^2]。 ```javascript $(document).ready(function() { $('#myForm').on('submit', function(e) { e.preventDefault(); // 阻止默认提交动作 $.ajax({ url: $(this).attr('action'), type: 'POST', data: new FormData(this), processData: false, contentType: false, success: function(response) { if (response.success) { window.location.href = response.redirectUrl; // 根据后台返回的数据跳转 } else { alert('提交失败！'); } }, error: function(xhr, status, error) { console.error(error); } }); }); }); ``` 以上代码片段展示了如何利用 jQuery 库简化 AJAX 请求过程以及后续操作。 --- ### 总结 不同的需求对应着不同层次的技术解决方案。如果是简单的静态网页开发可以直接运用 HTML 或基础 JS 完成任务；而对于交互性强的应用程序来说，则可能需要用到高级技术如AJAX或者配合后端编程语言共同协作达成目的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

psjasf1314

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

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

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

打赏作者

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

抵扣说明：

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

余额充值