“这里是云端源想IT，帮你轻松学IT”
嗨~ 今天的你过得还好吗？
如果你赶不上凌晨五点的日出
你不妨看看傍晚六点的夕阳
我的意思是
你可以选择后者
- 2023.06.30 -
说起正则表达式大家应该都不陌生，今天小编给大家找了一个JavaScript正则表达式的练习，利用正则表达式进行注册信息格式验证，快打开你的电脑一起来练习试试吧！
注册信息界面如下：
需求格式要求如下，开始练习前，大家要仔细阅读要求哦！
格式要求：
1、学号项不能为空，必须为纯数字，不能与数据库中的重复，正则表达式/^\d+$/g；
2、姓名项不能为空；
3、密码不能为空且无空格判断空格text.split(" ").length != 1，安全等级分为3个等级：
- 若全为字母或者数字为1级，正则表达式(text.search(/^[a-zA-Z]+$/g) != -1) || (text.search(/^[0-9]+$/g) != -1，
- 若只有标点符号或标点与字母或者数字同时出现则为2级，正则表达式text.search(/^[a-zA-Z0-9]+$/g) != -1，
- 若字母、数字和标点同时出现则为3级；
4、确认密码项要求与密码项填写的密码一致；
5、年级项不能为空，且格式必须为第20**级，正则表达式text.search(/^\u7B2C{1}20\d+\u7EA7{1}$/) != -1；
6、专业项不能为空，且只能以汉字开头，结尾可以为汉字或者字母正则表达式text.search(/^[\u4e00-\u9fa5]+[a-zA-Z]*$/g) != -1；
7、班级项不能为空且格式为专业+班级即类似电信1001格，正则表达式text.search(/^[\u4e00-\u9fa5]+\d{4}$/) != -1；
8、手机项可以为空，格式为(+86)1*********正则表达式text.search(/^(\+86)?1\d{10}$/) != -1。
运行效果：
正确格式输入后运行效果：
下面小编将参考代码奉上，听我的！先自己试着敲代码运行试试，实在不会了再看答案哦！
html代码：
<!--register-->
<div style="display:block">
<div>
<span style=" font-weight: bold;"><label>注册</label></span>
</div>
<div>
<span class="input_span"><label class="text_label">学号</label><label class="text_label" style="color:Red;">*</label></span>
<span class="input_span"><input type="text" id="studentNum_input" οnblur="checkRegisterInfo(1)"/></span>
<span><label id="studentNumCheck_label"></label></span>
</div>
<div>
<span class="input_span"><label class="text_label">姓名</label><label class="text_label" style="color:Red;">*</label></span>
<span class="input_span"><input type="text" id="name_input" οnblur="checkRegisterInfo(2)"/></span>
<span><label id="nameCheck_label"></label></span>
</div>
<div>
<span class="input_span"><label class="text_label">密码</label><label class="text_label" style="color:Red;">*</label></span>
<span class="input_span"><input type="password" id="passwd_rigester_input" οnblur="checkRegisterInfo(3)"/></span>
<span><label id="passwdCheck_label"></label></span>
</div>
<div>
<span class="input_span" id="confirmpasswd_span"><label>确认密码</label><label class="text_label" style="color:Red;"> *</label></span>
<span class="input_span"><input type="password" id="confirmPasswd_input" οnblur="checkRegisterInfo(4)"/></span>
<span><label id="confirmPasswdCheck_label"></label></span>
</div>
<div>
<span class="input_span"><label class="text_label">年级</label><label class="text_label" style="color:Red;">*</label></span>
<span class="input_span"><input type="text" id="grade_input" οnblur="checkRegisterInfo(5)"/></span>
<span><label id="gradeCheck_label">格式:第20**级</label></span>
</div>
<div>
<span class="input_span"><label class="text_label">专业</label><label class="text_label" style="color:Red;">*</label></span>
<span class="input_span"><input type="text" id="major_input" οnblur="checkRegisterInfo(6)"/></span>
<span><label id="majorCheck_label"></label></span>
</div>
<div>
<span class="input_span"><label class="text_label">班级</label><label class="text_label" style="color:Red;">*</label></span>
<span class="input_span"><input type="text" id="class_input" οnblur="checkRegisterInfo(7)"/></span>
<span><label id="classCheck_label">格式:电信1001</label></span>
</div>
<div>
<span class="input_span" id="phone_span"><label class="text_label">手机</label></span>
<span class="input_span"><input type="text" id="phone_input" οnblur="checkRegisterInfo(8)"/></span>
<span><label id="phoneCheck_label"></label></span>
</div>
<div class="button_div"><span><input id="register_button" type="button" οnclick="summitRegisterInfo()" value="用户注册"/></span></div>
</div>
<!--end register-->
</div>
就知道有的人会直接看答案~
代码比较长，大家有耐心一点，看了答案也要自己再敲一遍哦，这样你的体会将更深刻。
JS验证源代码：
/*
* 功能： 验证注册信息是否合法，在每次<input>控件失去聚焦时调用
* 参数： num 控件编号，指示是哪个控件触发了该函数
* 返回值： 如果全部合法返回true,否则给予响应的错误提示并返回false
*/
function checkRegisterInfo(num) {
var text;
switch (num) {
//当点击提交按钮时校验必填项是否为空,防止直接点击提交按钮
case 0:
if (document.getElementById("studentNum_input").value == ""
|| document.getElementById("name_input").value == ""
|| document.getElementById("passwd_rigester_input").value == ""
|| document.getElementById("confirmPasswd_input").value == ""
|| document.getElementById("grade_input").value == ""
|| document.getElementById("major_input").value == ""
|| document.getElementById("class_input").value == "") {
alert("注册失败,打*号的项不能为空!");
return false;
}
else
return true;
break;
//验证学号
case 1:
text = document.getElementById("studentNum_input").value;
var check = document.getElementById("studentNumCheck_label");
//验证是否为空
if (text == "") {
check.style.color = "red";
check.innerText = "学号项不能为空!";
}
//验证格式
else if (text.search(/^\d+$/g) == -1) {
check.style.color = "red";
check.innerText = "学号应为纯数字!";
}
else {
//验证学号的唯一性
var xmlHttp = createXmlHttp();
xmlHttp.open("get", "Ajax.aspx?met=rigesterInfo&data=" + escape(text), true);
xmlHttp.send(null);
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 & xmlHttp.status == 200) {
//服务器返回true表示该学号可用
if (xmlHttp.responseText) {
check.style.color = "yellow";
check.innerText = "恭喜您,该学号可用!";
}
else {
check.style.color = "red";
check.innerText = "您输入的学号已存在，请重新输入!";
}
}
}
}
break;
//验证姓名
case 2:
text = document.getElementById("name_input").value;
var check = document.getElementById("nameCheck_label");
if (text == "") {
check.style.color = "red";
check.innerText = "名字项不能为空!";
}
else {
check.style.color = "yellow";
check.innerText = "名字项填写正确!";
}
break;
//验证密码
case 3:
text = document.getElementById("passwd_rigester_input").value;
var check = document.getElementById("passwdCheck_label");
if (text == "") {
check.style.color = "red";
check.innerText = "密码项不能为空!";
}
//密码中只能有数字、字母和标点符号
else if (text.split(" ").length != 1) {
check.style.color = "red";
check.innerText = "密码中不能出现空格!";
}
else {
//验证密码的安全级数,纯数字或纯字母或纯标点为1级，字母+数字为2级，字母或数字任意一个+标点为3级
if ((text.search(/^[a-zA-Z]+$/g) != -1) || (text.search(/^[0-9]+$/g) != -1)) {
check.style.color = "yellow";
check.innerText = "密码安全级别为1级!";
}
else if (text.search(/^[a-zA-Z0-9]+$/g) != -1) {
check.style.color = "yellow";
check.innerText = "密码安全级别为2级!";
}
else {
check.style.color = "yellow";
check.innerText = "密码安全级别为3级!";
}
}
break;
//验证确认密码
case 4:
text = document.getElementById("confirmPasswd_input").value;
var check = document.getElementById("confirmPasswdCheck_label");
if (text != document.getElementById("passwd_rigester_input").value) {
check.style.color = "red";
check.innerText = "两次密码输入不一致!";
}
else {
check.style.color = "yellow";
check.innerText = "密码确认正确!";
}
break;
//验证年级
case 5:
text = document.getElementById("grade_input").value;
var check = document.getElementById("gradeCheck_label");
if (text == "") {
check.style.color = "red";
check.innerText = "年级项不能为空!";
}
else if (text.search(/^\u7B2C{1}20\d+\u7EA7{1}$/) != -1) {
check.style.color = "yellow";
check.innerText = "年级项填写正确!";
}
else {
check.style.color = "red";
check.innerText = "年级项格式为:第20**级!";
}
break;
//验证专业
case 6:
text = document.getElementById("major_input").value;
var check = document.getElementById("majorCheck_label");
if (text == "") {
check.style.color = "red";
check.innerText = "专业项不能为空!";
}
else if (text.search(/^[\u4e00-\u9fa5]+[a-zA-Z]*$/g) != -1) {
check.style.color = "yellow";
check.innerText = "专业项填写正确!";
}
else {
check.style.color = "red";
check.innerText = "专业项填写不正确!";
}
break;
//验证班级
case 7:
text = document.getElementById("class_input").value;
var check = document.getElementById("classCheck_label");
if (text == "") {
check.style.color = "red";
check.innerText = "班级项不能为空!";
}
else if (text.search(/^[\u4e00-\u9fa5]+\d{4}$/) != -1) {
check.style.color = "yellow";
check.innerText = "班级项填写正确!";
}
else {
check.style.color = "red";
check.innerText = "班级项格式为:电信1001!";
}
break;
//验证电话
case 8:
text = document.getElementById("phone_input").value;
var check = document.getElementById("phoneCheck_label");
if (text == "") {
break;
}
else if (text.search(/^(\+86)?1\d{10}$/) != -1) {
check.style.color = "yellow";
check.innerText = "手机项填写正确!";
}
else {
check.style.color = "red";
check.innerText = "手机项格式错误!";
}
break;
}
}
利用正则表达式进行注册信息格式验证是非常重要的一个知识点，希望这个小练习能够帮助你更快地掌握！
我们下期再见！
END
文案编辑|云端学长
文案配图|云端学长
内容由：云端源想分享