JS——正则表达式应用 12306注册界面
2023-09-11 14:16:24 时间
当输入的值不符合正则表达式时出现提示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
form{
height: 900px; ;
width: 1200px; ;
box-sizing: border-box;
margin: auto;
}
.bigbox{
border: steelblue 4px solid;
border-radius: 5px;
margin-top: 0px;
}
.smallbox{
height:30px;
width:100%;
padding:0px;
margin: 0px;
}
.span1{
color: black;
font-weight: bold;
}
.span2{
color: slategrey;
}
.bigbox-top{
background-color: steelblue ;
color: white;
height:30px ;
line-height: 30px;/*使文字水平居中*/
width: 100%;
border-radius: 5px;
padding:0px;
margin: 0px;
}
.bigbox-bottom{
height: 840px;
text-align: center;
}
.span-left{
display:inline-block;/*因为span是行内元素直接设置宽高是无效的,所以先将span设置为行内快捷元素,然后可以设置宽高*/
width:200px;
text-align: right;
}
.span-right{
display: inline-block;
width: 500px;
text-align: left;
color: rgb(250, 130, 50);
}
input{
width: 200px;
height: 30px;
border: 2px,solid,(black, white);
text-align: left;
}
a{
text-decoration: none;
color: steelblue;
font-size:18px;
}
div{
margin-top: 20px;
}
p{
color: red;
}
</style>
<body>
<form>
<div class="smallbox">
<span class="span1">您现在的位置:</span>
<span class="span2">客运首页>注册</span>
</div>
<div class="bigbox">
<div class="bigbox-top">
账户信息
</div>
<div class="bigbox-bottom">
<div>
<span class="span-left">用户名:</span>
<input id="input1" type="text" placeholder="用户名设置成功后不可修改">
<span class="span-right">6-30位字母、数字或"_",字母开头</span>
<p id="error1" style="display: none;"></p>
</div>
<div>
<span class="span-left">登录密码:</span>
<input id="input2" type="text" placeholder="6-20位字母、数字或符号">
<span class="span-right"></span>
<p id="error2" style="display: none;"></p>
</div>
<div>
<span class="span-left">确认密码:</span>
<input id="input3" type="text" placeholder="再次输入您的登陆密码">
<span class="span-right"></span>
<p id="error3" style="display: none;"></p>
</div>
<div>
<span class="span-left">证件类型:</span>
<select style="width: 200px;height: 30px; border:2px ,solid,(black, white);">
<option>台湾居民来往大陆通行证</option>
</select>
<span class="span-right">证件填写规则</span>
</div>
<div>
<span class="span-left">姓名:</span>
<input type="text" placeholder="请输入证件上的中文姓名">
<span class="span-right">(用于身份核验,请正确填写)</span>
</div>
<div>
<span class="span-left">证件号码:</span>
<input id="input4" type="text" placeholder="请输入您的证件号码">
<span class="span-right">(用于身份核验,请正确填写)</span>
<p id="error4" style="display: none;">请正确输入18位的身份证号码!</p>
</div>
<div>
<span class="span-left">证件有效期截止日期:</span>
<input type="text">
<span class="span-right">(用于身份核验,请正确填写)</span>
</div>
<div>
<span class="span-left">出生日期:</span>
<input type="text">
<span class="span-right">(用于身份核验,请正确填写)</span>
</div>
<div>
<span class="span-left">姓别:</span>
<input type="radio" style=" font: size 12px;vertical-align:middle;margin-top:0px;width:80px; border-radius: 20px;" name="sex"/>男
<input type="radio" style=" font: size 12px;vertical-align:middle;margin-top:0px;width:80px; border-radius: 20px;" name="sex"/>女
<span class="span-right"></span>
</div>
<div>
<span class="span-left">邮箱:</span>
<input id="input5" type="text" placeholder="请正确填写邮箱地址">
<span class="span-right"></span>
<p id="error5" style="display: none;">请输入有效的电子邮件地址!</p>
</div>
<div>
<span class="span-left">手机号码(+86):</span>
<input id="input6" type="text" placeholder="请输入您的手机号">
<span class="span-right">请正确填写手机号码,稍后将向该手机号码发送短信验证码</span>
<p id="error6" style="display: none;">您输入的手机号码不是有效的格式!</p>
</div>
<div>
<span class="span-left">旅客类型:</span>
<select style="width: 200px;height: 30px; border:2px ,solid,(black, white);">
<option>成人</option>
</select>
<span class="span-right"></span>
</div>
<div style="text-align: right;margin-right: 200px;">
<input type="checkbox" checked style="display:line-block;height: 20px;width:50px">
<span>
我已阅读并同意遵守
<a href="#">《中国铁路客户服务中心网站服务条款》 《隐私权政策》</a>
</span>
</div></br></br>
<div >
<input type="submit" value="下一步" style="text-align:center;height:40px;width: 150px;color:white;background-color: tomato;border-radius: 5px;border-color:tomato ;">
</div>
</div>
</div>
</form>
<script>
let input1=document.querySelector('#input1')
input1.onblur=function(){
let reg1=/^[a-zA-Z](\w|_){5,29}$/i
let value1=this.value;//获取当前节点的value属性的值
let p1=document.querySelector('#error1')
if(value1.trim().length==0){
p1.innerText='用户名不能为空!'
p1.style.display='block'
return
}
if(value1.trim().length>0&&value1.trim().length<6){
p1.innerHTML='用户名长度不能小于6个字符!'
p1.style.display='block'
return
}
if(!reg1.test(value1)){
p1.innerText='用户名只能由30位字母,数字和_组成,须以字母开头!'
p1.style.display='block'
return
}
}
let input2=document.querySelector('#input2')
input2.onblur=function(){
let reg2=/(\w|_|\.){6,20}$/
let value2=this.value
let p2=document.querySelector('#error2')
if(value2.trim().length==0){
p2.innerText='密码不能为空!'
p2.style.display='block'
return
}
if(value2.trim().length>0 && value2.trim().length<6){
p2.innerHTML='密码长度不能小于6个字符!'
p2.style.display='block'
return
}
if(!reg2.test(value2)){
p2.innerText='注意,登陆密码为6-20位数字字母或符号!'
p2.style.display='block'
return
}
}
let value2=input2.value
let input3=document.querySelector('#input3')
input3.onblur=function(){
let value3=this.value
let p3=document.querySelector('#error3')
if(!value3==value2){
p3.innerText='确认密码与密码不同!'
p3.style.display='block'
return
}
}
let input4=document.querySelector('#input4')
input4.onblur=function(){
let reg4=/^\d{17}(0-9|x)$/
let value4=this.value
let p4=document.querySelector('#error4')
if(!reg4.test(value4)){
p4.innerText='请输入正确的18位身份证号码'
p4.style.display='block'
return
}
}
let input5=document.querySelector('#input5')
input5.onblur=function(){
let reg5=/^\w{8}(@)(qq|gmail|126|163|hotmail|263|21\.cn|yahoo|live|sihu|sina)\.(com|com\.cn)$/
let value5=this.value
let p5=document.querySelector('#error5')
if(!reg5.test(value5)){
p5.innerText='请输入正确的电子邮箱地址'
p5.style.display='block'
return
}
}
let input6=document.querySelector('#input6')
input6.onblur=function(){
let reg6=/^1[3|4|5|6|8|7]\d{9}$/
let value6=this.value
let p6=document.querySelector('#error6')
if(!reg6.test(value6)){
p6.innerText='您输入的手机号码不是有效格式!'
p6.style.display='block'
return
}
}
</script>
</body>
</html>
<!-- border-radius:5px使边框四个角变圆滑 -->
<!-- vertical-align:middle;margin-top:0px;使单选框和文字在同一水平线上 -->
相关文章
- js 生成4位随机数及Js知识汇总
- js获取网页屏幕可视区域高度
- 在vs2017中创建Node.js项目
- 【Js】前端使用xlsx.full.min.js读取和导出excel表格数据
- js,jq滚动监听,切换等常用JS代码
- JS监听不到被操作后dom的事件,js动态生成的DOM绑定事件失效,解决方案
- 【Vue/js】Js中执行变量中的命令语句,也就是所谓的宏替换(很实用的例子)
- 【Vue/js】通过localStorage浏览器实现变量和对象的本地缓存(图文+完整源代码)
- 【Vue/js】Js中执行变量中的命令语句,也就是所谓的宏替换(很实用的例子)
- 【微信小程序】--WXML & WXSS & JS 逻辑交互介绍(四)
- 爬虫之JS的解析确定js的位置
- Vue - 实现用 JS 调用自定义组件 / 类似 ElementUI 弹框组件(在 js 文件中通过 this.xxx 方式调用并显示自定义弹框模态框组件)
- Vue - 在纯 JS 文件中调用自定义组件 / 类似 ElementUI 弹框组件 Message、Modal(在纯 js 文件中通过 import 方式引入并调用弹框模态框组件显示出来,)
- JS 从内存空间谈到垃圾回收机制
- 分享几个简单的技巧让你的 vue.js 代码更优雅
- JS的执行上下文,变量声明提升,函数声明提升
- JS——递归函数
- 【HarmonyOS】【JS】【布局】鸿蒙js开发input 输入框弹出输入法时上方布局被挤扁?
- js判断字符串长度
- js 保留两位小数,Js四舍五入,JavaScript Math四舍五入
- base.js,通用js方法,Js方法封装
- js回调函数
- JS教程之使用 P5.js 构建一个贪吃蛇游戏(教程含源码)
- bcrypt.js实现对登录注册中密码的加密存储和验证
- 聊聊JS动画库:Velocity.js
- JS函数详解(二)
- 有趣的HTML实例(七) 注册登录界面Ⅱ(css+js)
- Vue-cli 4在vue.config.js中配置别名
- js 闭包实例
- 如何删除您的注册js图书馆bower私人图书馆
- JS学习第4天——Web API之DOM(事件高级)【注册/删除事件、DOM事件流、阻止事件冒泡、事件委托、常用的鼠标/键盘事件】
- jquery.lazyload.js 的 使用
- node js实战:带数据库,加密的注册登录表单
- 【转】java去除html代码中含有的html、js、css标签,获取文字内容
- JQuery/JS插件 json2.js
- Three.js学习-光照和阴影(了解向)