이전 섹션에서 사용자 이름 길이 제어에 대해 이야기했습니다.
이제 js 정규식을 통해 비밀번호 형식과 이메일 주소를 제어하는 방법을 살펴보겠습니다.
방법을 모르더라도 상관 없습니다. 정규식 작성, 이제 온라인에서 할 수 있어요 이메일 주소에 대해 미리 만들어진 정규식을 많이 찾았습니다
비밀번호를 살펴보겠습니다. 예를 들어 숫자와 문자, 그리고 6~10자 사이여야 합니다
var rel = /^[a-zA-Z0-9 ]{6,10}$/ ;
메일함의 정규식을 살펴보겠습니다
var reg = / ^w+((-w+)|(.w+))*@[A-Za-z0-9] +((.|-)[A-Za-z0-9]+)*.[A-Za-z0 -9]+$/;
정규성을 완료했는데 양식을 어떻게 인증하나요?
텍스트 상자의 값을 가져와서 정규 표현식과 일치시켜야 합니다. 일치하면 사양을 준수하는 것입니다. 일치하지 않으면 프롬프트 메시지가 표시됩니다
여기서 test() 메소드를 사용합니다
test( ) 메소드는 문자열이 특정 패턴과 일치하는지 검색하는 데 사용됩니다
숫자와 문자의 조합인 비밀번호를 확인합시다
var rel = /^[A-Za -z0-9]{6,10}$/;
var val1 = document.getElementById ('pwd').value; .test (Val1)) {
document.GetelementByid ("SP1"). 사양을 충족하지 않습니다!";
}
위 코드와 같이 비밀번호 확인이 완료되었습니다. , 사실 비밀번호 확인 방법과 유사합니다
var val2 = document.getElementById('email').value; ("sp2").innerHTML = "이메일 주소를 입력하세요!";
}else if(!reg.test(val2)){document.getElementById( "sp2").innerHTML = "이메일 형식이 잘못되었습니다!";
}
위 코드로 이메일 주소 확인 기능을 완료했습니다
전체 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
#div{width:410px;height:400px;background:#46a3ff;padding-left:16px;
padding-top:20px;}
input{
outline:none;
box-sizing:border-box;padding-left:15px;}
textarea{
outline:none;resize : none;
box-sizing:border-box;padding-left:15px;padding-top:5px;}
.name{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;}
.pwd{width:200px;height:30px;
margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;}
.email{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;}
.txt{
width:280px;height:70px;margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;}
.sub{width:100px;height:30px;padding-left:0px;
border:none;
border-radius:5px;background:#ffd0ff;}
.sub:hover{background:#ffaad5;}
.div{
width:200px;height:30px;margin:0 auto;box-sizing:border-box;padding-left:45px;padding-top:5px;color:#8600ff;font-weight:bold;}
</style>
</head>
<body>
<div id="div">
<form>
<label>用户名:</label>
<input type="text" class="name" id="name">
<div id="sp" class="div"></div>
<label>密 码:</label>
<input type="password" class="pwd" id="pwd">
<div id="sp1" class="div"></div>
<label>邮 箱:</label>
<input type="text" class="email" id="email">
<div id="sp2" class="div"></div>
<label>爱 好:</label>
<textarea rows="5" cols="40" class="txt" id="txt"></textarea>
<div id="sp3" class="div"></div>
<input type="button" class="sub" value="注册" id="sub">
</form>
</div>
<script type="text/javascript">
var sub = document.getElementById('sub');
sub.onclick=function(){
//验证用户名是否为空,如果为空，给出提示信息
var val = document.getElementById('name').value;
var rel = document.getElementById('name').value.length;
//console.log(val.length);
if(val == ""){
document.getElementById("sp").innerHTML = "用户名不能为空！";
}else if( rel <= 5 || rel > 10){
document.getElementById("sp").innerHTML = "格式不正确！";
}
var rel = /^[A-Za-z0-9]{6,10}$/;
var val1 = document.getElementById('pwd').value;
if(val1 == ""){
document.getElementById("sp1").innerHTML = "请输入密码！";
}else if(!rel.test(val1)){
document.getElementById("sp1").innerHTML = "密码不符合规范！";
}
//验证邮箱是否为空和邮箱的格式是否正确
var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
var val2 = document.getElementById('email').value;
if(val2 == ""){
document.getElementById("sp2").innerHTML = "请输入邮箱！";
}else if(!reg.test(val2)){
document.getElementById("sp2").innerHTML = "邮箱格式不正确！";
}
//验证内容是否为空
var val3 = document.getElementById('txt').value;
if(val3 == ""){
document.getElementById("sp3").innerHTML = "请输入内容！";
}
}
//当用户名的文本框触发键盘事件，提示信息去除
document.getElementById('name').onkeyup=function(){
document.getElementById('sp').innerHTML = " ";
}
// //当密码框触发键盘事件，提示信息去除
document.getElementById('pwd').onkeyup=function(){
document.getElementById('sp1').innerHTML = " ";
}
// //当邮箱文本框触发键盘事件，提示信息去除
document.getElementById('email').onkeyup=function(){
document.getElementById('sp2').innerHTML = " ";
}
// //当文本域触发键盘事件，提示信息去除
document.getElementById('txt').onkeyup=function(){
document.getElementById('sp3').innerHTML = " ";
}
</script>
</body>
</html>