javascript使用正则表达式实现注册登入校验

站长资源 2024/11/5 佚名

1 1538 1

相思资源网 Design By www.200059.com

本文实例为大家分享了用正则表达式的方式实现注册登入的校验，供大家参考，具体内容如下

表单验证：

1、用户名：6–18位数字,字母,下划线_，文本域获取焦点和失去焦点出现提示文字。
2、登入密码：请输入6–20位数字,字母,任意字符，文本域获取焦点和失去焦点出现提示文字。（效果同上）
3、确认密码：内容与登入密码必须一致。
4、姓名：2-5位中文字。
5、身份证号：开头为1234568，中间16位为数字，结尾为数字或Xx。
6、邮箱：常规验证如下
7、手机号：为1开头是11位数字
8、提交是验证为一项是否填写正确，并弹框提示。
确认已阅读选项是否选中，并弹框提示。

页面效果：

1、提交是验证为一项是否填写正确，并弹框提示。
2、确认已阅读选项是否选中，并弹框提示。

源代码：html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>用户登入界面</title>
 <link rel="stylesheet" type="text/css" href="demo.css" >
 <script type="text/javascript" src="/UploadFiles/2021-04-02/demo.js">

css


*{
 margin: 0;
 padding: 0;
}
/*内外边距*/
body{
 background-color: #f2f2f2;
}
/*背景颜色*/
form{
 width: 1200px;
 margin: 50px auto;
 border-radius: 10px;
 background-color: #fff;
 box-shadow: 0px 0px 5px 5px #ccc;
}
/*宽，外边距；削圆；背景颜色；盒子阴影*/
header{
 width: 1200px;
 height: 50px;
 background-color: #7B68EE;
 border-radius: 10px 10px 0 0;
 color: #fff;
 font-size: 20px;
 line-height: 50px;
 text-align: center;
 font-weight: bold;
 letter-spacing: 10px;
}
/*宽，高，背景颜色，削圆，字体颜色，大小；行高；文本居中，加粗，字符间距*/
div{
 height: 120px;
 width: 1200px;
 margin-left: 50px;
 position: relative;
}
/*高，宽，左边距，相对定位*/
div>label{
 font-weight: bold;
 font-size: 18px;
 position: absolute;
 top: 50px;
}
/*加粗，字体大小，绝对定位，上*/
div>label::before{
 content: '* ';
 color: #00f;
}
/*在前面添加文本，字体颜色*/
div>input{
 width: 595px;
 height: 40px;
 position: absolute;
 right: 420px;
 top: 40px;
 border-radius: 5px;
 border: 1px solid #ccc;
 padding-left: 5px;
}
/*宽；高；绝对定位；右；上；削圆；边框；内边距*/
div>input:focus{
 outline: none;
 box-shadow: 0px 0px 8px 3px #7B68EE;
 transition-duration: 0.5s;
}
/*清除激活后的边框；盒子阴影；过度事件0.5s；*/
div>p{
 width: 60%;
 height: 30px;
 border-bottom: .5px solid #7B68EE;
 line-height: 30px;
 padding-left: 15px;
 position: absolute;
 font-size: 14px;
 top: 86px;
}
/*宽；高；下边框；行高；内边距；绝对定位，上；字体大小*/
div>span{
 position: absolute;
 left: 790px;
 line-height: 120px;
}
/*绝对定位，左，行高*/
footer{
 margin-top: 20px;
 height: 50px;
 text-align: center;
 line-height: 50px;
}
/*上边距；高；文本居中；行高*/
footer>label{
 margin: 0 10px;
 cursor:pointer;
}
/*外边距；小手*/
footer>.btn{
 width: 120px;
 height: 30px;
 background-color: #6495ED; 
 border-radius: 5px;
 border: none;
 color: #fff;
 font-size: 14px;
 cursor:pointer;
}
/*宽；高；背景颜色；削圆；边框；字体颜色；大小；小手*/


js


window.onload = function(){

 var btn = document.getElementById('btn');//提交按钮
 var p = document.getElementsByTagName('p');//文字提示标签数组
 var span = document.getElementsByTagName('span');//文字提示标签数组
 var forms = document.getElementById('forms');//表单
 var choose = document.getElementById('choose');//选择框
 var userName = document.getElementById('userName');//用户名
 var password = document.getElementById('password');//密码
 var passwordTwos = document.getElementById('passwordTwos');//确认密码
 var theName = document.getElementById('theName');//姓名
 var identity = document.getElementById('identity');//身份证号
 var mailbox = document.getElementById('mailbox');//邮箱
 var phone = document.getElementById('phone');//电话号码

 //正则表达式
 var reg1 = /^[\w]{6,18}$/,//用户名 6--18位数字,字母,下划线_
 reg2 = /^[\W\da-zA-Z_]{6,20}$/,//密码 6--20位数字,字母,任意字符
 reg3 = /^[\u4e00-\u9fa5]{2,5}$/,//姓名 2-5为的汉子
 reg4 = /^[1234568][\d]{16}[\dxX]$/,
 //身份证号 第一个数字1234568，中间任意数字16位，结尾任意数字或者xX；
 reg5 = /^[a-z1-9]("http://www.baidu.com");
 return true;
 }
 }
 

}


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

js正则注册登入校验,js注册登入校验,js登入校验

标签：

js正则注册登入校验,js注册登入校验,js登入校验

相思资源网 Design By www.200059.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

相思资源网 Design By www.200059.com

评论“javascript使用正则表达式实现注册登入校验”

暂无javascript使用正则表达式实现注册登入校验的评论...

www.200059.com 相思资源网

139,976影音资源

144,792福利资源

21,817软件资源

631,128技术资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

javascript使用正则表达式实现注册登入校验

js正则注册登入校验,js注册登入校验,js登入校验

javascript实现简易计算器功能

javascript实现点击按钮切换轮播图功能

评论“javascript使用正则表达式实现注册登入校验”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

友情链接