JS正则验证注册表单案例资源-CSDN文库

共5个文件

png：2个

html：1个

css：1个

正则表达式

需积分: 23 70 浏览量 2022-08-02 10:27:13 上传评论收藏 96KB ZIP 举报

资源详情

资源评论

资源推荐

收起资源包目录

正则表单验证.zip （5个子文件）

正则表单验证

qqq.png 6KB

注册表单验证案例.html 20KB

jquery-3.6.0.js 292KB

rff.png 202B

<!doctype html> <html> <head> <meta charset="utf-8"> <title>河南省双新双创公共服务平台</title> <link href="login.css" type="text/css" rel="stylesheet"> <script src="./jquery-3.6.0.js"></script> <style> body{background: #f5f5f5} </style> </head> <body> <script> window.onload = function () { let iphone = document.querySelector('#iphone'), verification = document.querySelector('#verification'), message = document.querySelector('#message'), password = document.querySelector('#password'), passAge = document.querySelector('#passAge'), name = document.querySelector('#name'), idCard = document.querySelector('#idCard'), company = document.querySelector('#company'), region = document.querySelector('#region'); function regExp(ele,reg){ ele.addEventListener('blur',function () { let data = ele.value.trim() if (data == ''){ ele.nextElementSibling.style.color = '#f35' ele.nextElementSibling.innerHTML = '请输入内容' }else if (reg.test(data)){ ele.nextElementSibling.style.color = '#207807' ele.nextElementSibling.innerHTML = '设置成功' }else { ele.nextElementSibling.style.color = '#f35' ele.nextElementSibling.innerHTML = '您输入的内容不符合规范' } }) } regExp(iphone,/^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/) regExp(message,/\d{6}/) regExp(password,/^[a-zA-Z0-9-_]{6,16}$/) regExp(name,/^[\u4E00-\u9FA5]{2,4}$/) regExp(idCard, /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/) regExp(company,/^[\u4e00-\u9fa5]{4,16}$/) regExp(region,/^[\u4e00-\u9fa5]{3,8}$/) passAge.addEventListener('blur',function () { let data = this.value.trim() if (data == ''){ this.nextElementSibling.style.color = '#f35' this.nextElementSibling.innerHTML = '请输入内容' }else if (data == password.value){ this.nextElementSibling.style.color = '#207807' this.nextElementSibling.innerHTML = '再次输入密码成功' }else { this.nextElementSibling.style.color = '#f35' this.nextElementSibling.innerHTML = '密码不一致' } }) verification.addEventListener('blur',function () { let data = this.value.trim() if (data == ''){ this.nextElementSibling.style.color = '#f35' this.nextElementSibling.innerHTML = '请输入内容' }else if (data == '4skx'){ this.nextElementSibling.style.color = '#207807' this.nextElementSibling.innerHTML = '图片校验码输入成功' }else { this.nextElementSibling.style.color = '#f35' this.nextElementSibling.innerHTML = '校验码错误试下4skx' } }) } </script>  <div class="biaodan"> <div class="biaodan-bt">学员注册</div> <div class="biaodan-nei"> <form action="" class="lab"> <div class="lab1"> <span class="jjq">手机号码：</span> <input type="text" class="jjk" id="iphone"> <p></p> <div class="cl"></div> </div> <div class="lab1"> <span class="jjq">验证码：</span> <input type="text" class="jja" id="verification"> <p></p> <img src="qqq.png" alt="" class="yanimg"> <div class="cl"></div> </div> <div class="lab1"> <span class="jjq">短信验证码：</span> <input type="text" class="jja" id="message"> <p></p> <input type="submit" value="获取验证码" class="zima"> <p></p> <div class="cl"></div> </div> <div class="lab1"> <span class="jjq">输入账号密码：</span> <input type="password" class="jjk" id="password"> <p></p> <div class="cl"></div> </div> <div class="lab1"> <span class="jjq">再次输入密码：</span> <input type="password" class="jjk" id="passAge"> <p></p> <div class="cl"></div> </div> <div class="lab1"> <span class="jjq">真实姓名：</span> <input type="text" class="jjk" id="name"> <p></p> <div class="cl"></div> </div> <div class="lab1"> <span class="jjq">身份证号：</span> <input type="text" class="jjk" id="idCard"> <p></p> <div class="cl"></div> </div> <div class="lab1"> <span class="jjq">所在企业：</span> <input type="text" class="jjk" id="company"> <p></p> <div class="cl"></div> </div> <div class="lab1"> <span class="jjq">意向学习地区：</span> <input type="text" class="jjk" id="region"> <p></p> <div class="cl"></div> </div> <div> <input type="checkbox">我已阅读并同意 <span class="color5">《职业技能提升平台服务条款》</span> </div> <input type="submit" value="提交" class="titi"> </form> </div> </div> <div class="xieyi"> <div class="xieyi-nei"> <div class="xieyi-bt">职业技能提升平台服务条款</div> <div class="xieyi-wen"> <textarea class="qqt"> 职业技能提升平台PC端使用协议和注册协议一、接受协议 1、一旦您注册成为职业技能提升平台PC端的用户，便表示您（以下简称“用户”）已经完全理解并同意接受本协议（以下简称“协议”）。职业技能提升平台PC端可随时自行全权决定更改“协议”。如用户不同意相关变更，则必须停止使用“我们的服务”；如果用户继续使用“我们的服务”，则表示已无条件接受经修订的“协议”。除另行明确声明外，任何使我们的“服务内容”范围扩大或功能增强的新内容均受本协议约束。。二、服务内容 1、除非另有明确规定，增强或强化职业技能提升平台PC端目前服务的任何新功能，包括新产品以及新增加的服务，均无条件地适用本协议。 2、职业技能提升平台PC端向广大用户提供免费和收费的网络服务产品，用户使用免费网络服务不必向国家职业技能提升行动公共服务平台PC端支付任何费用。对于收费的网络服务，职业技能提升平台PC端在用户使用之前给予用户明确的提示，只有用户根据提示确认其愿意支付相关费用后，用户才能使用该等收费网络服务。如用户拒绝支付相关费用，则职业技能提升平台PC端有权不向用户提供该等收费网络服务。。 3、用户自行负担使用国家职业技能提升行动公共服务平台PC端服务所需的相关设备（如个人电脑及其他与接入互联网或移动网有关的装置）及所需的费用（如为接入互联网而支付的上网费、为使用移动网而支付的手机费）。三、用户使用规则 1、用户有责任维持注册的账号和密码的安全，用户应对所有用本人的密码及帐号的活动负完全的责任。用户同意∶(a) 本人的密码或帐号遭到未获授权的使用，或者发生其它任何安全问题时，将立即通知职业技能提升平台PC端；且(b)每次上网完毕都会把本人的帐号关掉。如未能依前述规定行事，对于任何人利用该密码及帐号所进行的任何行为，用户应负完全的责任。对于因此而产生的任何损失或损害，职业技能提升平台PC端无法也不承担任何责任。根据有关法律法规，职业技能提升平台PC端在此郑重提请用户注意，任何经由我们的服务以上载、张贴、发送电子邮件或任何其它方式传送的资讯、资料、文字、软件、音乐、音讯、照片、图形、视讯、信息或其它资料（以下简称“内容”），无论系公开还是私下传送，均由内容提供者、上传者承担责任。职业技能提升行动平台PC端有权依法停止传输任何前述内容并采取相应行动，包括但不限于暂停用户使用我们的服务的全部或部分，保存有关记录，并向有关机关报告。 2、用户在国