输入两种和三种类型混合不会了，接下里的怎么写？能帮忙写下在给个注释？
来源：2-25 项目作业
wt涛
2021-02-05 20:56:53
<style>
#tishi01{
display: none;
color: red;
}
#jdt01,#jdt02,#jdt03{
width: 40px;
height: 10px;
background-color: rgb(211, 210, 210);display: inline-block;
}
div{
color: red;
display: none;
}
</style>
</head>
<body>
用户名：<input type="text" id="name01">
<span id="tishi01">6-30位字母、数字或’_’，字母开头</span>
<br><br>
登录密码：<input type="password" id="pwd" placeholder="请输入：6-20位字母或数字">
<span id="jdt01"></span>
<span id="jdt02"></span>
<span id="jdt03"></span>
<div id="psdts">6-20位字母或数字</div>
<script>
var name01=document.getElementById('name01');
var tishi01=document.getElementById('tishi01');
var pwd=document.getElementById('pwd');
var jdt01=document.getElementById('jdt01');
var jdt02=document.getElementById('jdt02');
var jdt03=document.getElementById('jdt03');
var psdts=document.getElementById('psdts');
name01.onblur=function(){
var tishi=name01.value;
if(/^[a-zA-Z]\w{5,29}$/.test(tishi)){
tishi01.innerText="用户名输入正确";
tishi01.style.display="inline";
tishi01.style.color="green";
} else {
tishi01.style.display="inline";
}
}
pwd.onblur=function(){
var jdt=pwd.value;
if(/^[0-9]{6,20}$/||/^[a-z]{6,20}$/||/^[A-Z]{6,20}$/){
jdt01.style.backgroundColor="red";
//两种混合
}else if( ){
}
}
</script>
1回答
-
樱桃小胖子
2021-02-06
同学你好，可参考如下：
<script> var name01 = document.getElementById('name01'); var tishi01 = document.getElementById('tishi01'); var pwd = document.getElementById('pwd'); var jdt01 = document.getElementById('jdt01'); var jdt02 = document.getElementById('jdt02'); var jdt03 = document.getElementById('jdt03'); var psdts = document.getElementById('psdts'); name01.onblur = function() { var tishi = name01.value; if (/^[a-zA-Z]\w{5,29}$/.test(tishi)) { tishi01.innerText = "用户名输入正确"; tishi01.style.display = "inline"; tishi01.style.color = "green"; } else { tishi01.style.display = "inline"; } } // pwd.onblur = function() { // var jdt = pwd.value; // if (/^[0-9]{6,20}$/ || /^[a-z]{6,20}$/ || /^[A-Z]{6,20}$/) { // jdt01.style.backgroundColor = "red"; // }else if(){ // } // } /* \d表示匹配一个数字字符，等价于[0-9] \W表示匹配任何非单词字符，等价于[^A-Za-z0-9_] test()方法是正则表达式的一个方法，用于检测一个字符串是否匹配某个模式 */ pwd.onblur = function() { var jdt = pwd.value; // 定义匹配任何可见字符的正则表达式，判断是否输入了内容，若未输入内容，则提示"请输入6-20位字母、数字或符号" if (!/^\S{6,20}$/.test(jdt)) { psdts.className += " block"; psdts.innerHTML = "请输入6-20位字母、数字或符号"; } // 验证密码 else { // 当输入密码时，先清空提示文字，便于后面让密码强度快显示 psdts.className = ""; psdts.innerHTML = ""; // 验证纯数字、纯字母、纯字符（即密码中包含一种字符） if (/^\d{6,20}$|^[a-zA-Z]{6,20}$|^(\W|_){6,20}$/.test(jdt)) { jdt01.style.backgroundColor = "red"; // 验证数字+字母（大写或小写）、字母+特殊字符、数字+特殊字符 } else if (/^[\d|a-zA-Z]{6,20}$|^[(\W|_)|a-zA-Z]{6,20}$|^[(\W|_)\d]{6,20}$/.test(jdt)) { jdt01.style.backgroundColor = "red"; jdt02.style.backgroundColor = "red"; // 验证特殊字符+数字+字母 } else if (/^[(\W|_)\d a-zA-Z]{6,20}$/.test(jdt)) { jdt01.style.backgroundColor = "red"; jdt02.style.backgroundColor = "red"; jdt03.style.backgroundColor = "red"; } } } </script>另外，本题属于开放式题目，可以在https://class.imooc.com/lesson/jobdetail?mid=44249#中参考或者与其他同学进行交流、探讨。
祝学习愉快！
0
相似问题
回答 1
回答 1