web前端表单验证注册信息基础实验1

最新推荐文章于 2024-05-26 12:07:30 发布
最新推荐文章于 2024-05-26 12:07:30 发布
阅读量263 收藏 2
点赞数 1
分类专栏： 湖北专升本 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lxw621/article/details/126908412
版权

效果图如下

 代码部分

这里使用的是onblur事件，onblur：用户离开input输入框触发事件。

使用到了正则来验证手机号码和邮箱

效果图

 

逐渐暴躁
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web前端开发教程之编写简洁的页面表单验证程序
01-08
看了山人表单验证，又看了其他一些验证程序和相关的一些参考资料，写出了一个比较简洁的js表单验证程序。 功能简述： 验证： http地址 时间日期 e-mail 数字 字符长度检查 一项输入与另一项输入比较（例如：...
Web实验二 HTML表单的应用 4月21日
Yutouxn0的博客
04-21 655
【实验目的】 1．掌握表格相关标记的使用； 2．掌握表单定义和属性设置。 【实验重点及难点】 掌握表格和表单相关标记的使用。 【实验内容】 1.建立如下表单页面。 <!DOCTYPE html> <html> <head> <title>手机使用意见调查表</title> <style type ="text/css"> form{border:2px double #00f ; wid.
公司用户注册页面---web前端实验报告
bxv65的博客
06-27 638
公司用户注册 用 户: 密 码: 确 认: ...
web前端案例二：简单的注册页面(有表单验证)
weixin_44197120的博客
01-27 5626
效果图 用到的图片 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面</title> <style> body{ background: url("../image/register_bg.png") no-repeat center;
课堂作业：web网页实验二（2）
一念之间的博客
09-17 599
<!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> <title...
22-实验一 java web前端实验——用户注册信息验证
DAIMAZHUANG的博客
09-20 1526
html+css+js+jquery用户注册信息验证
Web前端开发利器 SPRY框架之表单验证
06-09
Spry 框架是一个JavaScript 库，Web 设计人员使用它可以构建能够向站点访问者提供更丰富体验的 Web 页。本课程内容是SPRY框架的第一部分，从浅入深，带您进入WEB前端开发的世界，帮助你完成表单验证的实现。
Java Web Jquery表单验证
07-26
Java Web Jquery表单验证 jQuery是一个流行的JavaScript库，可用于在网页上进行各种操作，包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分：FrontPage.html、write.html、end.html、style.css。 1...
jQuery仿京东注册表单验证代码
06-24
jQuery仿京东注册表单验证代码是一款清爽简洁的京东注册界面，带有注册成功后的界面代码。
注册验证表单网页模板
01-22
注册验证表单网页模板
vue源码之mustache模板引擎1
qweasl_的博客
05-21 379
模板引擎的一个有点：它是将数据转为视图的最优雅的方法。相信vue的玩家首先想到的是。而还没学vue的朋友，就只能进行dom操作了。通过数组的join方法。以及es6推出的模板字符串。
【Web】CISCN 2024初赛 题解(全)
uuzeray的博客
05-21 1184
这里注意细节，靶机发了两次请求，第一次我们就返回一个正常的图片，第二次请求就发一个302，php代码块要用html标签包裹。注意下面这段报错，因为加不了引号，开头是数字的话，就会将类型识别为数字，若后续出现了字符串就会报错。再打sqlite，指定tableName，加载写入的恶意so文件，反弹shell。最后注意要将获取的变量元组转字符串，再用逗号分隔，依次输出，从而绕过seed。考的python栈帧沙箱逃逸，获取到外部的栈帧，就可以用。因为ban了引号，考虑hex2bin，将数字转为字符串。
深入解析：Element Plus 与 Vite、Nuxt、Laravel 的结合使用
一个普通人
05-23 989
Element Plus 作为一个强大的 Vue.js 组件库，可以与 Vite、Nuxt 和 Laravel 等不同的工具和框架结合使用，为开发者提供灵活、高效的开发体验。根据项目需求选择合适的工具和框架，可以极大地提升开发效率和应用性能
Web Speech API（2）—— SpeechSynthesis
LiangRZ
05-21 817
Web Speech API 有两个部分：SpeechSynthesis 语音合成（文本到语音 TTS）和 SpeechRecognition 语音识别（异步语音识别）。语音合成 (也被称作是文本转为语音，英语简写是 tts) 包括接收 app 中需要语音合成的文本，再在设备麦克风播放出来这两个过程。其中包含了将由语音服务朗读的内容，以及如何朗读它（例如：语种、音高、音量）。语音合成服务的控制器接口，可用于获取设备上可用的合成语音，开始、暂停以及其他相关命令的信息。控制器，从而获取语音合成功能的入口。
axios如何传递数组作为参数，后端又如何接收呢？？？？
qq_64847107的博客
05-25 142
前端的参数是一个数组。
amis 文件上传 & 大文件分块上传
最新发布
qq_42152032的博客
05-26 659
在信息安全领域，经常会用到MD5、SHA1、SHA256算法。这三种算法都属于散列算法，或者叫作哈希算法。它们具有输入任意长度，输出长度固定，以及单向性（无法根据散列值还原出消息）的特点。关于MD5MD5是一个安全散列算法，输入两个不同的明文不会得到相同的输出值，根据输出值，不能得到原始的明文，即其过程是不可逆的。所以要解密MD5没有现成的算法，只能穷举法，把可能出现的明文，用MD5算法散列之后，把得到的散列值和原始的数据形成一个一对一的映射表，通过匹配从映射表中找出破解密码所对应的原始明文。
前端-移动端布局
Kongfutu的博客
05-21 206
可以在浏览器里打开检查 点击一下移动端按钮 然后选择一下对应的手机型号可以切换到对应的手机端。进阶学习建议 Vue.js 和 微信小程序。如何在PC端模拟移动端设备。
js知识点汇总之let const 和 var的区别
fyw1789的博客
05-23 1485
声明的变量会先在作用域中被创建出来，但因此时还未进行词法绑定，所以是不能被访问的，如果访问就会抛出错误。因此，在这运行流程进入作用域创建变量，到变量可以被访问之间的这一段时间，就称之为暂时死区。其实上面不存在变量提升的例子中，其实也是暂时性死区，因为它有暂时性死区的概念，所以它压根就不存在变量提升了。实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。中的作用域有：全局作用域、函数作用域，命令声明变量之前，该变量都是不可用的。，导致绑定这个块级作用域，
VUE3注册指令的方法
weixin_44072254的博客
05-22 416
【代码】VUE3注册指令的方法。
微信小程序前端用验证表单实现完成注册功能csdn
09-21
微信小程序前端可以使用验证表单的方式来实现注册功能。以下是一个简单的示例实现： 首先，在注册页面的wxml文件中，需要设置表单输入的相关组件，例如用户名、密码和确认密码的输入框，以及一个提交按钮。 ```html <view class="form-item"> <text>用户名：</text> <input placeholder="请输入用户名" bindinput="handleInputUsername"/> </view> <view class="form-item"> <text>密码：</text> <input type="password" placeholder="请输入密码" bindinput="handleInputPassword"/> </view> <view class="form-item"> <text>确认密码：</text> <input type="password" placeholder="请再次输入密码" bindinput="handleInputConfirmPassword"/> </view> <view class="form-item"> <button bindtap="handleSubmit">注册</button> </view> ``` 然后，在注册页面的js文件中，需要编写相关的逻辑代码来处理表单的验证以及注册功能的实现。 ```javascript Page({ data: { username: '', password: '', confirmPassword: '' }, handleInputUsername(e) { this.setData({ username: e.detail.value }); }, handleInputPassword(e) { this.setData({ password: e.detail.value }); }, handleInputConfirmPassword(e) { this.setData({ confirmPassword: e.detail.value }); }, handleSubmit() { // 进一步验证表单数据 if (this.data.username === '') { wx.showToast({ title: '请输入用户名', icon: 'none' }); return; } if (this.data.password === '' || this.data.confirmPassword === '') { wx.showToast({ title: '请输入密码', icon: 'none' }); return; } if (this.data.password !== this.data.confirmPassword) { wx.showToast({ title: '两次输入的密码不一致', icon: 'none' }); return; } // 提交注册逻辑 // TODO: 发起网络请求，将注册信息传给后台 // 注册成功后的操作 wx.showToast({ title: '注册成功！', icon: 'success' }); wx.navigateTo({ url: '/pages/login/login' // 注册成功后跳转到登录页面 }); } }); ``` 以上示例中，通过使用表单输入组件和相关的事件处理函数来获取用户输入的数据，并进行基本的验证。验证通过之后，可以通过发起网络请求将注册信息传给后台进行注册操作，并在成功注册后给出提示信息并跳转到登录页面。 这样，就可以通过验证表单的方式实现微信小程序前端注册功能。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值