JS開發(fā)驗證表單教程之驗證表單（四）
上一節(jié)我們講到了控制用戶名的長度
下面我們來看一下通過js的正則表達式來控制密碼的格式與郵箱
即使你不會寫正則表達式也沒有關系，現(xiàn)在在網(wǎng)上能找到很多現(xiàn)成寫好的郵箱的正則表達式
我們來看下密碼，比如我只要個數(shù)字和字母組合的密碼控制在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]+$/;
正則我們就已經(jīng)完成了，那么如何驗證我們的表單？
我們要獲取文本框的值，然后跟我們的正則表達式進行匹配，如果匹配，則是符合規(guī)范的，不匹配，給出提示信息
這里我們將要使用 test() 方法
test() 方法用于檢索字符串是否匹配某個模式
我們來驗證密碼，是數(shù)字與字母的組合
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 = "密碼不符合規(guī)范！";
?? ??? ??? ?}
如上代碼，我們就已經(jīng)完成了驗證密碼了
下面我們來看驗證郵箱，其實和驗證密碼的方法差不多
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 = "郵箱格式不正確！";
?? ??? ??? ?}
如上代碼，我們就完成了驗證郵箱的功能
完整代碼如下：
<!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 = "密碼不符合規(guī)范！";
}
//驗證郵箱是否為空和郵箱的格式是否正確
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 = "郵箱格式不正確！";
}
//驗證內(nèi)容是否為空
var val3 = document.getElementById('txt').value;
if(val3 == ""){
document.getElementById("sp3").innerHTML = "請輸入內(nèi)容！";
}
}
//當用戶名的文本框觸發(fā)鍵盤事件，提示信息去除
document.getElementById('name').onkeyup=function(){
document.getElementById('sp').innerHTML = " ";
}
// //當密碼框觸發(fā)鍵盤事件，提示信息去除
document.getElementById('pwd').onkeyup=function(){
document.getElementById('sp1').innerHTML = " ";
}
// //當郵箱文本框觸發(fā)鍵盤事件，提示信息去除
document.getElementById('email').onkeyup=function(){
document.getElementById('sp2').innerHTML = " ";
}
// //當文本域觸發(fā)鍵盤事件，提示信息去除
document.getElementById('txt').onkeyup=function(){
document.getElementById('sp3').innerHTML = " ";
}
</script>
</body>
</html>
