博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
用Html+Css+JavaScript中的事件和正则表达式做一个“个人信息登记表“
阅读量:3958 次
发布时间:2019-05-24

本文共 1077 字,大约阅读时间需要 3 分钟。

用Html+Css+JavaScript中的事件和正则表达式做一个“个人信息登记表”

页面效果要如下图所示,且要保证信息录入格式正确无遗漏(输入有误要给到对应提示~)

个人信息登记表页面效果
使用HTML+CSS布局出如上图所示页面效果,嵌入JS代码,添加表单提交和表单项失去焦点等事件处理。
代码如下:

    
表单正则验证校验

个人信息登记表

登录账号:
  6-18位有效字符(字母、数字、下划线)
登录密码:
  6-18位任意字符
重复密码:
  重复密码与登录密码一致
性  别:
          必须选择一个
年  龄:
  大于0的任意两位整数
邮  箱:
  有效的Email地址
学  历:
          必须选择一个学历选项
  

总结相关正则表达式:

6-18位有效字符(字母、数字、下划线): ^\w{6,18}$
6-18位任意字符:[\s\S*]{6,18}
大于0的任意两位整数:^ [1-9][0-9]$
有效的Email地址: ^\w+@\w+(.\w+){1,2}$

另外我为了达到页面效果加了很多全角的空格

下面是相应的框的输入内容不符合提示的要求的弹窗:1

2
3
4

转载地址:http://mbozi.baihongyu.com/

你可能感兴趣的文章
理解套接字recv(),send()
查看>>
发一个C++写的跨平台的BlockingQueue
查看>>
Linux TCP/IP协议栈剖析【体系结构篇】
查看>>
游戏开发中预防内存泄露的一些措施
查看>>
以前的文章全部移除了。
查看>>
几首歌
查看>>
蝴蝶泉边
查看>>
编码转换
查看>>
freerice
查看>>
Does your mother know
查看>>
《写出质量好软件的75条体会》暨答案ZT [转自monkyy的blog]
查看>>
关于详细设计
查看>>
POJ2838,Sliding Window(单调队列)
查看>>
牛客练习赛50,B tokitsukaze and Hash Table(STL+输入输出挂)
查看>>
POJ3728,The merchant(倍增LCA+分治)
查看>>
2019 ICPC Malaysia National,E. Optimal Slots(01背包变形)
查看>>
洛谷P1638 逛画展(双向队列)
查看>>
牛客练习赛51,D(二分图匹配)
查看>>
POJ2892,Tunnel Warfare(线段树维护连续区间)
查看>>
POJ3468,A Simple Problem with Integers(线段树-区间查询-区间更新)
查看>>