JS实现成才网注册系统(网页数据验证)

主代码

<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>旅游网注册</title><style type="text/css">.txtInit {border: 1px #cecece solid;}.txtFocus {border: 1px solid #009;}.spanInit {width: 300px;height: 22px;display: block;float: right;background-repeat: no-repeat;background-position: left;}/* 错误提示时的样式设置 */input.error {border: 1px solid red;}label.error {padding-left: 16px;padding-bottom: 2px;font-weight: bold;color: #EA5200;}</style><script type="text/javascript" src src="js/jquery.metadata.js"></script><script type="text/javascript" src="js/jquery.validate.js"></script><script type="text/javascript" src="js/jquery.validate.messages_cn.js"></script><script type="text/javascript" src="js/jquery-1.3.2.min.js"></script><link href="css/layout.css" rel="stylesheet" type="text/css" /></head><body><!--头部--><div id="top-cont"><div id="top-min"><div id="min-left"></div><div id="min-right"></div></div></div><div id="menu"><div id="menu-m"><ul><li><a href="#">好好学习</a></li><li style="width:8px;"><img src="images/t1.jpg" width="8" height="42" /></li><li><a href="#">天天向上</a></li><li style="width:8px;"><img src="images/t1.jpg" width="8" height="42" /></li><li><a href="#">成才网注册</a></li></ul></div></div><!--广告位图片--><!--注册版块--><div id="reg"></br><div>当前时间:<span id="timeSpan">2020-12-01 08:08:08</span></div></br><div id="reg-top">&nbsp;&nbsp;&nbsp;&nbsp;注册</div><div id="reg-mleft"><form id="regFrm" action="./success.html"><ul><li class="m">*用户帐号: </li><li class="r"><input name="txtNo" type="text" class="box txtInit" id="txtNo" /><span id="txtinfo">必填*,只能是由数字组成的4~16位字符</span></li><li class="m">*设置密码: </li><li class="r"><input name="txtPwd" type="password" class="box txtInit" id="txtPwd" /><span id="txtpwdinfo">必填*,字符长度为6~12位</span></li><li class="m">*确认密码: </li><li class="r"><input name="txtConfirmPwd" type="password" class="box txtInit" id="txtConfirmPwd" /><span id="txtConfirmPwdinfo">必填*,字符长度为6~12位,与设置密码保持一致</span></li><li class="m">*用户姓名: </li><li class="r"><input name="txtName" type="text" class="box txtInit" id="txtName" /><span id="txtNameinfo">必填*</span></li><li class="m">*性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别: </li><li class="r"><input name="radio" type="radio" id="radio" value="男" />男<input type="radio" name="radio" id="radio2" value="女" />女</li><li class="m">*手机号码: </li><li class="r"><input name="txtPhone" type="text" class="box txtInit" id="txtPhone" /><span id="txtPhoneinfo">必填*,字符长度必须为11位,且只能以13、15、18开头</span></li><li class="m">邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱: </li><li class="r"><input name="mailBox" type="text" class="box txtInit" id="mailBox" /><span id="mailBoxInfo">非空时满足邮箱验证格式</span></li><li class="m">*注册来源: </li><li class="r"><input type="checkbox" value="1" class="rt2" name="shoppingsite"><label>淘宝网</label><input type="checkbox" value="2" class="rt2" name="shoppingsite"><label>当当网</label><br /><input type="checkbox" value="3" class="rt2" name="shoppingsite"><label>京&nbsp;&nbsp;&nbsp;东</label><input type="checkbox" value="4" class="rt2" name="shoppingsite"><label>亚马逊</label><br /></li><li class="m"> </li><li class="r"><input type="submit" id="tijiao" value="提交" src="images/delSure.jpg" /><input type="reset" id="chongzhi" value="重置" src="images/delCancel.jpg" /></li><li class="m"> </li></ul></form></div><div id="reg-right"><div><img src="images/kf.jpg" width="230" height="150" /></div><div id="kf2"><a href="#" onclick="changeText()" id="textChange">别点我,点我也没用</a></div></div></div><!--底部--><div id="foot"><div id="foot-t"><p style="color:red;font-size:+3">虽然我跑的慢,但我从未放弃奔跑</p><p><a href="#">隐私保护</a> | <a href="#">诚聘英才</a> | <a href="#">关于我们</a> | <a href="#">网站地图</a> | <ahref="#">友情链接</a> | <a href="#">商务合作</a></p></div></div><script src="./js/jquery-3.7.1.js"></script><script>$(function() {var zhanghao = falsevar mima = falsevar querenmima = falsevar xingming = falsevar hao = falsevar youxiang = false//账号$('#txtNo').on('blur', function() {var p_zhanghao = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/if (p_zhanghao.test($('#txtNo').val())) {$('#txtinfo').text('格式正确')zhanghao = true} else {$('#txtinfo').text('格式错误')}})//密码$('#txtPwd').on('blur', function() {var qu = $('#txtPwd').val().lengthif (qu == 0) {$('#txtpwdinfo').text('密码不能为空')} else {$('#txtpwdinfo').text('必填*,字符长度为6~12位')mima = true}})//确认密码$('#txtConfirmPwd').on('blur', function() {var yan1 = $('#txtConfirmPwd').val()var yan2 = $('#txtPwd').val()if (yan1 == yan2) {$('#txtConfirmPwdinfo').text('正确')querenmima = true} else {$('#txtConfirmPwdinfo').text('两次密码不相同')}})//用户姓名$('#txtName').on('blur', function() {if ($('#txtName').val().length == 0) {$('#txtNameinfo').text('请输入姓名')xingming = true} else {$('#txtNameinfo').text('必填*')xingming = true}})//手机号$('#txtPhone').on('blur', function() {// var shu=	$('#txtPhone').text()// 	console.log(shu)if ($('#txtPhone').val().length == 11) {$('#txtPhoneinfo').text('正确')hao = true} else {$('#txtPhoneinfo').text('必填*,字符长度必须为11位,且只能以13、15、18开头')}})//邮箱$('#mailBox').on('blur', function() {var p_youxiang = /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/if (p_youxiang.test($('#mailBox').val())) {$('#mailBoxInfo').text('格式正确')youxiang = true} else {$('#mailBoxInfo').text('格式错误')}})//提交$('#tijiao').on('click', function() {var dan = $('input[name=radio]:checked')var dan2 = $('input[name=shoppingsite]:checked')if (dan2.length != 0 && dan.length == 1 && zhanghao && mima && querenmima && xingming &&hao && youxiang) {console.log('完成')} else {console.log('未完成')}})})</script></body>
</html>
<script type="text/javascript">//友情提示function changeText() {$("#textChange").html("说了别点你还点,赶紧做题吧,O(∩_∩)O~").css("color", "red");}
</script>

跳转页面区域

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>旅游网注册</title>
<style type="text/css">
.txtInit {border: 1px #cecece solid;
}
.txtFocus {border: 1px solid #009;
}
.spanInit {width: 300px;height: 22px;display: block;float: right;background-repeat: no-repeat;background-position: left;
}
/* 错误提示时的样式设置 */
input.error {border: 1px solid red; 
}
label.error {padding-left: 16px;padding-bottom: 2px;font-weight: bold;color: #EA5200;
}
</style>
<script type="text/javascript" src src="js/jquery.metadata.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.validate.messages_cn.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
</head><body onSubmit="return false;"><h1>登录成功了!</h1>
</body>
</html>

效果图

js主要实现的是数据验证功能下方是主要数据验证代码

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/197766.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Hadoop进阶学习---HDFS分布式文件存储系统

1.hdfs分布式文件存储的特点 分布式存储:一次写入,多次读取 HDFS文件系统可存储超大文件,时效性较差. HDFS基友硬件故障检测和自动快速恢复功能. HDFS为数据存储提供很强的扩展能力. HDFS存储一般为一次写入,多次读取,只支持追加写入,不支持随机修改. HDFS可以在普通廉价的机器…

Linux: 文档 :相关接口文档手册还是需要仔细阅读

接口文档的阅读&#xff0c;一定要仔细。最近遇到一个问题&#xff0c;明明文档里有说&#xff0c;read函数读取到的是一个或者多个events&#xff0c;但是代码里依然按照一个来处理。就会导致漏event的可能。漏了event&#xff0c;后续的逻辑就会受影响。 Each successful rea…

llama.cpp部署(windows)

一、下载源码和模型 下载源码和模型 # 下载源码 git clone https://github.com/ggerganov/llama.cpp.git# 下载llama-7b模型 git clone https://www.modelscope.cn/skyline2006/llama-7b.git查看cmake版本&#xff1a; D:\pyworkspace\llama_cpp\llama.cpp\build>cmake --…

Leetcode1038. 从二叉搜索树到更大和树(每日一题)

目录 ⚽题目&#xff1a; &#x1f3d0;题目分析&#xff1a; &#x1f3c0;题目解答&#xff1a; &#x1f94e;代码如下&#xff1a; ⚽题目&#xff1a; 给定一个二叉搜索树 root (BST)&#xff0c;请将它的每个节点的值替换成树中大于或者等于该节点值的所有节点值…

Stream 流

配合Lambda表达式&#xff0c;简化集合和数组的操作 获取Stream流对象 集合 Collection接口中的方法&#xff1a;stream() 单列&#xff1a;直接调用stream() 多列&#xff1a;间接获取&#xff0c;map.entrySet() ArrayList<String> list new ArrayList<>();…

SSM项目实战-前端-在Index.vue中展示第一页数据

1、util/request.js import axios from "axios";let request axios.create({baseURL: "http://localhost:8080",timeout: 50000 });export default request 2、api/schedule.js import request from "../util/request.js";export let getSchedu…

4-Docker命令之docker run

1.docker run介绍 docker run命令是用来创建新的容器并运行相关命令 2.docker run用法 docker run [参数] [root@centos79 ~]# docker run --helpUsage: docker run [OPTIONS] IMAGE [COMMAND] [ARG...]Create and run a new container from an imageAliases:docker conta…

传输层可靠传输的原理

目录 1.停止等待协议 2.连续ARQ协议 3.TCP报文段的首部格式 4.TCP的滑动窗口机制 &#xff08;1&#xff09;发送窗口 &#xff08;2&#xff09;接收窗口 &#xff08;3&#xff09;发送缓存 5.超时重传时间的选择 6.选择确认SACK(Selective ACK) 7.使用滑动窗口实现…

PAD平板签约投屏-高端活动的选择

传统的现场纸质签约仪式除了缺乏仪式感之外还缺少互动性&#xff0c;如果要将签约的过程投放到大屏幕上更是需要额外的硬件设备成本。相比于传统的纸质签约仪式&#xff0c;平板现场电子签约的形式更加的新颖、更富有科技感、更具有仪式感。 平板签约投屏是应用于会议签字仪式的…

【NGINX--12】性能调优

1、使用压测工具实现测试自动化 需要使用压测工具实现测试自动化&#xff0c;以确保测试一致性和可重复性。 使用 HTTP 压测工具&#xff0c;例如 Apache Jmeter、Locust、Gatling 或团队标准化的任何测试工具。为压测工具创建配置&#xff0c;对您的 Web 应用做全面测试&…

【C语言】static 和 extern 的理解和应用。

对于 C 语言的初学者&#xff0c;对 static 和 extern 的理解可能会遇到一些问题。 用在哪&#xff1f; 首先明确 static 和 extern 可以用在哪&#xff1f; static 和 extern 都可以用来修饰【变量】和【函数】。ok&#xff0c;知道这么多就行了&#xff0c;所谓实践出真知&…

【Unity动画】为一个动画片段添加事件Events

动画不管播放到那一帧&#xff0c;我们都可以在这里“埋伏”一个事件&#xff08;调用一个函数并且给函数传递一个参数&#xff0c;参数在外部设置&#xff0c;甚至传递一个物体&#xff09;&#xff01; 嗨&#xff0c;亲爱的Unity小伙伴们&#xff01;你是否曾想过为你的动画…

常用性能工具与性能分析

iperf3 iperf3是一个用于测量网络带宽和性能的工具。它支持客户端-服务器模式&#xff0c;通过在客户端和服务器之间进行数据传输来评估网络的吞吐量、延迟和丢包率等指标。 iperf3的基本使用方法&#xff1a; 1. 安装iperf3&#xff1a; 首先&#xff0c;你需要在客户端和…

WPF halcon 机器视觉

1 鼹鼠的故事第14集 鼹鼠与智能房 鼹鼠无意中坐进了一辆小汽车&#xff0c;小汽车开进了一所智能住宅。鼹鼠看到房主在智能房里&#xff0c;享受着现代化的服务。趁着主人看电视的时候&#xff0c;鼹鼠也享用了一顿丰盛的智能晚餐。 小编大胆的畅想&#xff0c;这些食物 前一秒…

创建conan包-打包现有二进制文件

创建conan包-打包现有二进制文件 1 Packaging Existing Binaries1.1 Packaging Pre-built Binaries1.2 Downloading and Packaging Pre-built Binaries 本文是基于对conan官方文档Packaging Existing Binaries翻译而来&#xff0c; 更详细的信息可以去查阅conan官方文档。 1 P…

Ubuntu开机出现Welcome to emergency mode解决办法

问题描述 笔记本电脑安装了windows 10和ubuntu 16.04双系统&#xff0c;windows系统关机时按电源键强制关机&#xff0c;再次开机进入Ubuntu系统时无法进入图形界面&#xff0c;出现Welcome to emergency mode。 问题分析 异常关机导致文件系统受损&#xff0c;依据提示使用…

上传文件获得下载链接方法:直链!直链!

&#xff01;非 百度网盘 不是直接用网盘下载&#xff0c;要用直链&#xff0c;百度上有很多方法。 我自己研究了个&#xff0c;跳过百度网盘输密码进网页的方法 还是先还是要把文件上传网盘让后搜索网盘获取直链的方法&#xff08;那百度网盘举例&#xff09; 地址 https:…

数据结构:字典树(前缀树,Trie树),压缩字典树(Radix)

字典树Trie Tree 字典树也称前缀树&#xff0c;Trie树。在 Elasticsearch 的倒排索引中用的也是 Trie 树。是一种针对字符串进行维护的数据结构。 字典树是对词典的一种存储方式&#xff0c;这个词典中的每个“单词”就是从根节点出发一直到某一个目标节点的路径&#xff0c;…

<JavaEE> 多线程编程中的“等待和通知机制”:wait 和 notify 方法

目录 一、等待和通知机制的概念 二、wait() 方法 2.1 wait() 方法的使用 2.2 超时等待 2.3 异常唤醒 2.4 唤醒等待的方法 三、notify() 方法 四、notifyAll() 方法 五、wait 和 sleep 的对比 一、等待和通知机制的概念 1&#xff09;什么是等待和通知机制&#xff1f…

EM32DX-E4【C#】

1外观&#xff1a; ecat总线&#xff0c;分布式io 2电源&#xff1a; 靠近SW拨码&#xff1a;24V 中间&#xff1a;0V 靠近面板&#xff1a;PE接地 3DI&#xff1a; 6000H DI输入寄存器 16-bit &#xff08;16位输入&#xff09; 00H U8 子索引总数 01H Unsigned16 IN1…