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

最新推荐文章于 2024-09-19 17:35:39 发布
原创 最新推荐文章于 2024-09-19 17:35:39 发布 · 487 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#登录表单的制作 #表单的校验 #表单 #onblur事件 #js中的表单制作

制作的效果图：

制作思路：

整个表单框在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 1453
知识点：掌握string对象的用法、会使用正则表达式验证页面输入内容、会使用表单选择器。 1、表单基本验证技术 无论是动态网站，还是其他 B/S 结构的系统，都离不开表单。表单作为客户端向服务器端提交数据的主要载体，如果提交的数据不合法，将会引出各种各样的问题，那么如何避免这样的问题昵？ 1.1 表单验证的必要性 有时，在用户填写表单时，我们希望...
【前端开发实战】用 CSS 制作一个华丽的动画登录表单超详细教程新手友好~完整代码示例| 前端动效| 网页设计| 项目实例|HTML/CSS动画|打造炫酷漂亮的登陆表单 - 适合初学者小白的详细指南
南北极之间
06-07 1053
总之，学习前端开发需要耐心和毅力，要保持对技术的热情和兴趣，不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式，你可以逐渐成为一名优秀的前端开发者。在用户悬停在环形动画上时，边框颜色会变化并增加阴影，提升交互体验。整体效果是一个炫酷的动画登录表单。这个登录表单页面包含了一个环形动画效果和一些输入框、按钮的样式。
前端案例：简易登录表单的制作，包括用户名、密码、随机验证码（代码完整，复制即用）
m0_61083409的博客
03-06 1724
案例效果 本案例基于 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 392
前端表单布局丨简洁大气的登录表单一(源码)
JS例子：表单的严谨验证（bootstrap布局）
weixin_52166438的博客
08-27 157
表单的严谨验证 <!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 4504
页面效果如下： 代码分享： 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之制作自动校验的表单】 在传统的网页开发中，当用户在注册时需要检查用户名是否已被占用，通常需要提交整个表单到服务器，等待服务器响应，然后更新页面来显示结果。这种方法用户体验较差，因为它...
javascript表单校验注册页面
老王玩编程
05-04 2297
一个简单的HTML页面 利用javascript知识点 和正则表达公式 练习巩固一下 然后突发奇想 仿制一下QQ的注册页面(仅校验部分)
java socket 传输文件时做和校验，校验位
03-10
java socket在传输文件时，分包、组包和校验。 校验包数据，现成的代码可以拷贝直接运行。
html网页用户注册表单验证校验JavaScript源码代码
05-02
html网页用户注册表单验证校验JavaScript源码代码，完整代码已经打包，还迎下载，代码仅供学习参考。 function checkuser(){//检查用户名的方法 var usernameNode=document.getElementById("username");//通过id得到input标签节点 var str=usernameNode.value;//获取到input标签框框里面输入的值，是一个字符串 var regExp = new RegExp("^\\w*$","gm");//一定要写上开头^和结尾$不然匹配上后，没办法排除别的，要打上*号，表示可以0个以上匹配的字符 var ismacth=regExp.test(str);//获得的字符串跟正则表达式做比较 if(str.length !==0){//字符串的长度不等于0则判断字符串是否匹配正则表达式 if(ismacth){//输入的用户名不为空时 document.getElementById("username1").innerHTML="√";//正确时候输出√ document.getElementById("username1").setAttribute("class","duitishi");//设置div标签的class属性为对提示，让它正确的时候显示绿色 }else{//输入的用户名不为空但是有不合法字符时 document.getElementById("username1").innerHTML="× 只能包含数字，字母，下划线"; document.getElementById("username1").setAttribute("class","cuotishi");//设置div标签的class属性为错提示，让它错误的时候显示红色 } }else{//输入的用户名为空时 document.getElementById("username1").innerHTML="请输入用户名"; document.getElementById("username1").setAttribute("class","cuotishi"); } }
用javascript对表单进行验证
01-04
常用的都有了 用javascript对表单进行验证 用javascript对表单进行验证 常用的都有了
前端登录模板html+css漂亮的水滴登录页
10-24
好看酷炫的水滴登录页，拿去即用
网页表单制作和验证过程
huanxuecheng的专栏
04-01 1139
在Webapp编程中程序员经常要和前台页面打交道，CSS，HTML和JS等都是经常需要操作的内容，对于直接用户来说，这些就是他们印象中的整个程序，如果前台页面不美观或是使用不便将影响用户对程序的印象，因此程序员应该在前台上投入一些精力学习是值得的，在Web2.0时代来临之后更是如此。　　下面就是一个通用网页表单的制作和验证过程　　表单效果　　　　放置表单项的表格　　将表单项放在
关于表单设计（登录）的几点感悟
weixin_30824479的博客
09-04 151
需求：登录页：用户名，密码，验证码，短信验证码。表单验证。 原来： 1.右侧留空放提示文字： 缺点：超过一定长度会折行。 2.用input里的placeholder代替label的提示作用 缺点：输入时会消失。 现在： 1.提示文字另起一行visibility:hidden，不用担心折行问题了。 2.input加上background-img， padding-left:40p...
JS页面校验
Rick的博客
03-21 872
结构： 1.导入正则表达式校验包：https://blog.youkuaiyun.com/weixin_44718300/article/details/88726653 2.页面校验.HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>...
网页表单验证
wyhcczz的博客
04-09 417
<html> <head> <meta charset="UTF-8"> <title>表单验证</title> <style type="text/css"> *:focus{ outline: none; }/*设置表单中的所有元素获得焦点时，不再出现虚线框或者高亮框*/ ....
表单验证案例
无言月梧桐的博客
07-15 964
表单验证案例 一.需求分析 要实现的功能： 1.出现如下图所示的内容：（HTML和CSS完成） 2.对表单中的每一个表单项进行校验，使得文本框发生失去焦点事件后，校验信息。（javascript完成） 3.点击注册功能后判断每一个表单项是否正确，若全部正确才能提交，否则不能提交。（javascript完成） 二.具体实现 <!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8">
制作表单页面跳转
最新发布
05-07
在 HTML 和 JavaScript 中，可以通过多种方式实现在表单提交后页面自动跳转的功能。以下是几种常见的方法及其具体实现： #### 方法一：通过 `window.location.href` 实现跳转 当表单数据验证完成后，可以使用 ...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

psjasf1314

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

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

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

打赏作者

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

抵扣说明：

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

余额充值