3.6 用正则表达式验证注册表单页面

article/2025/9/23 20:14:47

用正则表达式验证注册表单页面

制作一张注册页，页面自行设计，页面元素命名自行设置，需要验证如下信息：

用户名：（允许2-4个汉字）
电话：（开头3或4位,”-”号隔开，后面7或8位）
手机号码：开头3位必须合法，后面8位数字
邮箱：有效邮箱格式
身份证号码：有效身份证号码
学号验证：分析你自己的学号规律
index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>登录页面</title><style>* {margin: 0;padding: 0;}.container {width: 800px;margin: 30px auto;font-size:18px;background:url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202001%2F19%2F20200119150117_gyple.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623329824&t=b7a00576876cd180758c1a57956a47d8) no-repeat 5px 5px;}h1{margin: 50px;}p {margin-top: 20px;margin-left: 38px;}input {margin-right: 20px;}.title {text-align: center;}.submit {text-align: center;}#submit {background-color: rgb(216, 53, 53);width: 200px;font-size:20px;}.red {color: red;}</style>
</head><body><div class="container"><div class="title"><h1>正则表达式注册登录页面</h1></div><div class="content"><form action="" onsubmit="return false"><p><label for="name">用户名：</label><input type="text" id="name" onblur="nameCheck()"><span class="name">2-4位中文组成</span></p><p><label for="sex">性别：</label><!-- <input id="man" type="radio" checked="checked" name="1" />男<input id="woman" type="radio"  name="1"/>女 --><input type="text" id="sex" onblur="sexCheck()"><span class="sex">请输入男或女</span></p><p><label class="left">电话：</label><input id="telephone" type="text" class="in" onblur="telephoneBtn();" /><span id="telephoneText">开头3或4位,”-”号隔开，后面7或8位</span></p><p><label for="tel">手机号码：</label><input type="text" id="tel" onblur="telCheck()"><span class="tel">开头3位必须合法，后面8位数字</span></p><p><label for="email">邮箱：</label><input type="email" id="email" onblur="emailCheck()"><span class="email">ex:123456@qq.com</span></p><p><label for="card">身份证号码：</label><input type="card" id="card" onblur="isCardNo()"><span class="card">请输入正确的身份证号码</span></p><p><label class="left">学号验证：</label><input id="sn" type="text" class="in" onblur="snBtn();" /><span id="snText">分析你自己的学号规律 </span></p><p><label for="pwd">密码：</label><input type="password" id="pwd" onblur="pwdCheck()"><span class="pwd">请输入6-12位密码</span></p><p><label for="pwd1">密码确认：</label><input type="password" id="pwd1" onblur="pwdSure()"><span class="pwd1">请再次输入密码</span></p><p class="submit"><input type="button" onclick="sub()" id="submit" value="提交"></p></form></div></div><script src="https://code.jquery.com/jquery-3.3.1.js"></script><script>function sub() {//如果全部输入正确返回成功  输入错误则输出提示if(nameCheck() && sexCheck() && telCheck() && emailCheck() && pwdCheck() && pwdSure()){alert('提交成功');}else{alert('你的输入有误，请按要求输入后再提交');}}//验证姓名字段function nameCheck(str) {let reg = /^[\u4e00-\u9fa5]{2,4}$/;let name = $("#name").val();if (!reg.test(name) || name=='') {$(".name").html("<span class='red'>请输入3~4位中文</span>");return false;}else{$(".name").text('√');return true;}}//验证性别字段function sexCheck(str) {let reg = /[/^男$|女&/]/;// let reg = /^男$|^女&/;let sex = $("#sex").val();if(!reg.test(sex) || sex==''){$(".sex").html("<span class='red'>从男或女中选择输入</span>")return false;}else{$(".sex").text('√');return true;}}//电话验证function telephoneBtn(){var telephone=document.getElementById("telephone").value;var telephoneReg=/^(\d{3,4}-\d{7,8})$/;//alert(telephoneReg.test(telephone));var telephoneText=document.getElementById("telephoneText");if(telephoneReg.test(telephone)){telephoneText.innerHTML="输入正确!";return true;}else{telephoneText.innerHTML="输入不正确，请重新输入";}return false;}//验证手机号码function telCheck(str) {let reg = /^\d{11}$/;let tel = $("#tel").val();if(!reg.test(tel) || tel==''){$(".tel").html("<span class='red'>请输入11位手机号码</span>")return false;}else{$(".tel").text('√');return true;}}//验证邮箱字段function emailCheck(str) {let reg = /^\w{3,12}@\w{1,5}\.[a-z]{2,3}$/;let email = $("#email").val();if(!reg.test(email) || email==''){$(".email").html("<span class='red'>请输入正确的邮箱</span>")return false;}else{$(".email").text('√');return true;}}// 验证身份证号码function isCardNo(str){// 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符Xlet reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;let card = $("#card").val();if(!reg.test(card) || card==''){$(".card").html("<span class='red'>身份证输入不合法</span>")return false;}else{$(".card").text('√');return true;}}// 学号验证function snBtn(){var sn=document.getElementById("sn").value;var snReg=/^2019\d{4}[1-9]{1}[0-9]{2}$/;// var snReg=/^[0-9]{11}$/;// alert(cidReg.test(ecid));var snText=document.getElementById("snText");if(snReg.test(sn)){snText.innerHTML="输入正确!";return true;}else{$(".pwd").text('√');return true;snText.innerHTML="输入不正确!";}return false;}//验证密码字段function pwdCheck(str) {let reg = /^[\s\S]{6,12}/;let pwd = $("#pwd").val();if(!reg.test(pwd) || pwd==''){$(".pwd").html("<span class='red'>请输入6-12位密码</span>")return false;}else{$(".pwd").text('√');return true;}}//确认密码function pwdSure() {if ($("#pwd").val() === $("#pwd1").val()) {return true;} else {$(".pwd1").html("<span class='red'>两次密码输入不一致</span>")return false;}}</script>
</body></html>