网页制表验证联系

最新推荐文章于 2022-05-29 21:16:18 发布
最新推荐文章于 2022-05-29 21:16:18 发布
阅读量128 收藏 1
点赞数
分类专栏： html 文章标签： html js css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43610614/article/details/111726642
版权

文章目录

要求

在这里插入图片描述

实现

在这里插入图片描述

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header  id="head">
    </header>
    <form id="form" action="" method="GET" onsubmit="return check()">
        <div>
            <img src="images/pic001.gif" alt="">
           <img src="images/pic002.gif" alt="">
            <p>欢迎您申请SOHO联名信用卡</p>
        </div>
        <div>
            <div>
                <p>登录名：</p> 
                <!-- <br> -->
                <p>登录密码：</p> 
                <!-- <br> -->
                <p>确认密码：</p> 
                <!-- <br> -->
                <p>身份证号码：</p> 
                <!-- <br> -->
                <p>固定电话：</p> 
                <!-- <br> -->
                <p>手机号码：</p> 
                <!-- <br> -->
                <p>电子邮件：</p>        
            </div>
            <div>
                <input type="text" name="name">
                <input type="password" name="password1">
                <input type="password" name="password2">
                <input type="ID" name="ID">
                <input type="text" name="tel">
                <input type="mobile" name="mobile">
                <input type="text" name="email">
            </div>
            <div>
                <span id="name"></span>
                <br>
                <span id="password1"></span>
                <br>
                <span id="password2"></span>
                <br>
                <span id="ID"></span>
                <br>
                <span id="tel"></span>
                <br>
                <span id="mobile"></span>
                <br>
                <span id="email"></span>
            </div>
        </div>
        <div>
            <input type="submit" style="background: url(images/pic-sb.jpg);" value="">
        </div>
    </form>
     <script language="JavaScript" src="from_js.js"> </script>
</body>
</html>

css代码

*{
    margin: 0;
    padding: 0;
}
#head{
    width: 528px;
    height: 57px;
    border-top-left-radius: 10%;
    border-top-right-radius: 10%;
    background-image: url("images/top.gif");
    margin: 0 auto;
}
#form{
    width: 520px;
    height: 300px;
    background-color: blanchedalmond; 
    margin: 0 auto;
    border: 5px solid #FF9EB6;
    border-bottom-left-radius: 2%;
    border-bottom-right-radius: 2%;
}
#form div:first-child{
    height: 60px;
    width: 100%;
    /* background-color: aqua; */
}
#form div:first-child img{
    float: left;
    margin-top: 17px;
    margin-right: 5px;
}
#form div:first-child img:first-child{
    margin-left: 100px; 
    margin-top: 0px;
    margin-right: 5px;
}
#form div:first-child p{
    float: left;
    font-size: 5px;
    color:#E41414;
    line-height: 56px;
}

#form div:nth-child(2){
    height: 180px;
    width: 100%;
    /* background-color: blue;   */
}
#form div:nth-child(2) div:first-child{
    height: 100%;
    width:30%;
     /* background-color: red;   */
    float: left;
    /* padding-top: 10px;  */
}
#form div:nth-child(2) div:first-child p{
    margin: 0;
    padding: 0;
    width: 100%;
    line-height: 15px;
    float: right;
    color: black;
    margin-top: 10px; 
   margin-right: 0px;
   /* margin-bottom: 8px; */
    text-align: right;
}
#form div:nth-child(2) div:nth-child(2){
    height: 175px;
    width:32%;
    /* background-color: yellow;   */
    float: left;
    padding-left: 5px;
    padding-top: 5px;
    overflow: hidden;
}
#form div:nth-child(2) div:nth-child(2) input{
    margin-bottom: 2px;
}
#form div:nth-child(2) div:nth-child(3){
    height: 100%;
    width:37%;
    /* background-color: green;  */
    float: left;
}
#form div:nth-child(2) div:last-child span{
    margin: 0;
    padding: 0;
    width: 100%;
    line-height: 15px;
    float: right;
    color: black;
    margin-top: 10px; 
    text-align: left;
}
#form div:last-child{
    height: 60px;
     /* background-color: crimson;  */
}
#form div:last-child img{
    margin-left: 180px;
     /* background-color: crimson;  */
}
#form div:last-child input{
    width: 100px;
    height: 32px;
    margin-left: 180px;
     /* background-color: crimson;  */
}

js代码

var inputs = document.getElementsByTagName("input");
// console.log(inputs)
//验证登录名，不能含有数字长度4-8位
var flag_name=false;
inputs[0].onblur=function(){
    var valuue_name=this.value;
    var reg_name_true=/[A-z]{4,8}/g;
    var reg_name_false=/[0-9]+/g;
    var span=document.getElementById("name");
    if(reg_name_true.test(valuue_name))
    {
        if(reg_name_false.test(valuue_name))
        {
            flag_name=false;
            span.innerHTML="登录名不能含有数字";
            span.style.display="inline"; 
        }
        else if(valuue_name.length<4||valuue_name.length>8){
            flag_name=false;
            span.innerHTML="姓名4-8位";
            span.style.display="inline"; 
        }
        else{
            flag_name=true;
            span.innerHTML="√";
            span.style.display="inline"; 
        }
    }
    else if(reg_name_false.test(valuue_name))
        {
            flag_name=false;
            span.innerHTML="登录名不能含有数字";
            span.style.display="inline"; 
        }
    else if(valuue_name=="")
        {
            flag_name=false;
            span.innerHTML="登录名不能为空";
            span.style.display="inline"; 
        }
    else{
            flag_name=false;
            span.innerHTML="登录名格式错误";
            span.style.display="inline"; 
    }
}
//密码不能为空，并且密码包含的字符大等于6个且少等于16,两次输入的密码必须一致
// console.log(inputs[1]);
var flag_password1=false
inputs[1].onblur=function(){
    // console.log(value_password1);
    var span=document.getElementById("password1");
    var value_password1=this.value;
    var reg_password=/^[A-z]+[0-9]+.*/g;//密码开头为字母，且必须含有数字
    if(value_password1=="")
    {
        flag_password1=false;
        span.innerHTML="密码不能为空";
        span.style.display="inline";
    }
    else if(reg_password.test(value_password1))
    {
        if(value_password1.length>16||value_password1.length<6){
            flag_password1=false;
            span.innerHTML="密码需6-16位";
            span.style.display="inline";
        }
         else{
            flag_password1=true;
            span.innerHTML="√";
            span.style.display="inline";  
         }
    }
    else{
        flag_password1=false;
        span.innerHTML="密码格式错误";
        span.style.display="inline";
    }
}
//验证密码的一致性
var flag_password2=false;
inputs[2].onblur=function()
{
    var value_password1=inputs[1].value;
    var value_password2=this.value;
    var span=document.getElementById("password2");
    if(value_password2=="")
        {
            flag_password2=false;
            span.innerHTML="密码不能为空";
            span.style.display="inline"; 
        }
    else if(value_password2!=value_password1)
        {
            flag_password2=false;
            span.innerHTML="密码不一致";
            span.style.display="inline"; 
        }
    else{
             flag_password2=true;
            span.innerHTML="√";
            span.style.display="inline";  
         }
}
//验证身份证号码日期1800-2020 18位最后一位可以是x或数字
var flag_ID=false;
inputs[3].onblur=function(){
    var reg_ID=/^[1-9]\d{5}(((18|19)\d{2})|(20)[0-1]{1}[0-9]{1})((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/g;
    var value_ID=this.value;
    var span=document.getElementById("ID");
    if(value_ID==""){
        flag_ID=false;
        span.innerHTML="身份证号码不能为空";
        span.style.display="inline";
    }
    else if(reg_ID.test(value_ID)){
        flag_ID=true;
        span.innerHTML="√";
        span.style.display="inline";
    }
    else {
        flag_ID=false;
        span.innerHTML="身份证号码格式错误";
        span.style.display="inline";
    }
}
//验证固定电话不以0开头长11位
var flag_tel=false;
inputs[4].onblur=function(){
    var value_tel=this.value;
    var span=document.getElementById("tel");
    var reg_tel=/^[1-9][0-9]{10}/g
    if(value_tel=="")
        {
            flag_tel=false;
            span.innerHTML="固定电话不能为空";
            span.style.display="inline";
        }
    else if(reg_tel.test(value_tel)){
            flag_tel=true;
            span.innerHTML="√";
            span.style.display="inline";
    }else
    {
        flag_tel=false;
        span.innerHTML="固定电话格式错误";
        span.style.display="inline";
    }
}
//验证电话13 15 17 18开头
var flag_mobile=false;
inputs[5].onblur=function(){
    var value_mobile=this.value;
    var span=document.getElementById("mobile");
    var reg_mobile=/^(13|15|17)[0-9]{9}/g
    if(value_mobile=="")
        {
            flag_mobile=false;
            span.innerHTML="电话不能为空";
            span.style.display="inline";
        }
    else if(reg_mobile.test(value_mobile)){
            flag_mobile=true;
            span.innerHTML="√";
            span.style.display="inline";
    }else
    {
        flag_mobile=false;
        span.innerHTML="电话格式错误";
        span.style.display="inline";
    }
}
//验证email：必须有@.且顺序正确，不能为空
var falg_email=false;//email正确返回true,否则false
inputs[6].onblur=function(){
var value=this.value;
var span = document.getElementById("email")
var reg=/@./g;
if(reg.test(value)){
    // console.log(value.match(value))
    span.innerHTML="√";
    span.style.display="inline";
    falg_email=true;
    }
else if(value=="")
{
    falg_email=false;
    span.innerHTML="邮箱格式不能为空"
    span.style.display="inline";
}
else{
    falg_email=false;
    span.innerHTML="邮箱格式不正确"
    span.style.display="inline";
    }
}
function check()
{
    var flag=false;
    if(flag_name&&flag_password1&&flag_password2&&falg_email&&flag_ID&&flag_mobile&&flag_tel)
        flag=true;
    else{
        flag=false;
        alert("请输入正确的注册信息");
    }
    return flag;
}

完整文件

link

@玉面小蛟龙
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
python操作网页界面_python3 操作页面上各种元素的方法
weixin_39835925的博客
12-03 1235
(1) 控制浏览器①控制浏览器窗口大小set_window_size(宽，高)打开浏览器全屏maximize_window()②控制浏览器后退back()、前进forward()③模拟浏览器刷新refresh()(2) 简单元素操作①清除文本clear()②模拟按键输入send_keys(*value)③单击元素click()④提交表单submit()⑤返回元素的尺寸siz...
js一组验证函数
10-30
JavaScript是一门广泛使用的前端脚本语言，它在网页中负责实现用户交互、数据处理和内容动态更新等功能。在实际开发过程中，表单验证是其中非常重要的一个环节。为了简化开发和提高代码的重用性，开发者们常会编写...
实现省市级联效果
sgyhl18的专栏
01-15 505
欢迎您申请 SOHO联名信用卡 登录名： 登录密码： 确认密码： 身份证号码： 固定电话： 手机号码： 电子邮件： 现居住地： --选择省份-- --选择城市--
开发常用正则验证表达式
lwx931449660的博客
04-21 1821
// 合法url export function validateURL(textval) { const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1...
php 表单验证及跳转,PHP 表单验证
weixin_42139357的博客
03-12 234
通过 PHP 验证表单数据我们要做的第一件事是通过 PHP 的 htmlspecialchars() 函数传递所有变量。在我们使用 htmlspecialchars() 函数后，如果用户试图在文本字段中提交以下内容：location.href('http://www.hacked.com')- 代码不会执行，因为会被保存为转义代码，就像这样：<script>location.href(...
验证输入框合法性
real_fxy的博客
05-29 267
验证 输入框 合法性
超实用的正则验证
时代新人的博客
09-20 664
package com.android.sdlc.checkterminal.utils; import android.annotation.SuppressLint; import android.text.TextUtils; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStream; import java.io.InputStreamReader; import java.uti.
自己写网页爬虫——网页分类抓取/采集并导入数据库
Carey
08-14 4995
一直想着整理出网页抓取的具体实现功能代码，方便大家指正，也方便自己学习修正。当然这个并不是针对所有网页，自己写的功能有限，只能针对某一特定结构的网页进行数据采集，如果有更好的方法，请大家不吝指教，在此谢过！
25种提高网页加载速度的方法和技巧
Elvis技术小屋
11-17 2675
哦先生随笔 - 82, 文章 - 33, 评论 - 12, 引用 - 025种提高网页加载速度的方法和技巧您希望加快网页的加载速度吗？了解如何通过缩短加载时间来改善拨号上网用户的浏览体验，在某些情形下，加载时间最多可缩短 80% 引言不是所有人都能够使用高速 Internet 连接。即使每个人都能够使用高速网络，也会因为各种各样的原因使您的 Web 应用程序看起来运行缓慢。在这个宽带速度不断提高的
ASP.NET表单验证方法详解
song_zheng的专栏
05-02 992
在表单提交的时候，经常需要对录入信息的长度、格式、内容等进行验证，以便获得合理的信息。在ASP.NET开发中主要的验证方法，我总结了一下，主要有一下几种，如有不足之处请朋友们予以指出。 1、使用验证控件 这属于客户端验证，微软开发人员将最常用的验证功能进行了封装，使得我们开发效率明显提高，而且特别是自定义验证控件，非常灵活，我们可以自行设计验证逻辑。但是验证控件收到了浏览器的限制，记得在一次
js中正则表达式验证_JS正则表达式（常用正则校验）
weixin_29123181的博客
12-24 964
需求表达式Email地址^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$域名[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?InternetURL[a-zA-z]+://[^\s]* 或 ^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*...
正则表达式验证大全
04-14
它通过一套预定义的规则来描述字符序列，广泛应用于编程语言、文本编辑器和网页表单验证等场景。以下是一些常见的正则表达式及其用途： 1. **匹配中文字符**：`[\u4e00-\u9fa5]` - 这个正则表达式用于匹配任何中文...
Js 小数验证函数代码(基于正则)
10-29
综上所述，小数验证功能在网页开发中非常重要，合理的使用JavaScript函数可以有效地规范用户的输入行为，保证数据的有效性和一致性。通过结合OnKeyPress事件和onblur事件的验证，我们能够提供及时和准确的反馈，确保...
js正则表达式验证大全
03-10
在网页表单提交、用户输入校验等场景下，正则表达式发挥着关键作用。本教程将深入探讨JavaScript中的正则表达式及其在验证中的应用。 一、正则表达式基础 1. 创建正则表达式： - 字面量表示法：`/pattern/flags` ...
JavaScript验证正则表达式大全
02-28
JavaScript中的正则表达式是用于文本模式匹配的强大工具，它在数据验证、字符串处理等...它们在网页表单验证、数据清洗、文本分析等领域都有重要作用。熟练掌握这些正则表达式，将极大地提高你的JavaScript编程能力。
记事本方式编写html和运行
qq_43610614的博客
05-31 9259
第一步：新建文本文档 在桌面上新建一个文本文档： 第二步：写入代码 <html> <head> <title>html</title> </head> <body> <h>第一个标题</h> <p>第一个段落</p> </body> </html> 第三步：更改格式 对新建的文档保存好后重命名，将‘txt’改为‘html’ 出现这个点确定： 这样就可以用浏
网页期末大作业
qq_43610614的博客
12-26 5804
文章目录声明界面html代码indexmdltclzztdfjstimecssstylemdltclzztdf完整文件 声明 网页内容全部来自微信公众号：吃货研究所 界面 html代码 index <html> <head> <meta charset="UTF-8"> <title>吃货研究所</title> <link rel="shortcut icon" href="images/tu1.jpg"/> &
html5表单验证练习
qq_43610614的博客
12-24 273
文章目录验证条件效果图html代码：js代码 验证条件 对email只验证了@.必须出现且顺序要对，不能为空 对于输入放入密码：第一个需要为字母，必须含有数字，长度有限制，不能为空 再一次输入的密码和上一次的相同，不能为空 姓名不含有数字，长度有限制，不能为空 性别默认男，无验证 出生日期不为空 信息全部正确才能注册 效果图 html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="
手机网页轮播+表单验证联系
qq_43610614的博客
12-26 262
文章目录样例实现html代码商品registercss商品注册完整文件 样例 实现 html代码 商品 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&lt
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

@玉面小蛟龙

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

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

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

打赏作者

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

抵扣说明：

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

余额充值