本文实例为大家分享了用正则表达式的方式实现注册登入的校验，供大家参考，具体内容如下
表单验证：
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; } } }以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。