masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Tutorial borang pengesahan pembangunan JS - borang pengesahan (4)

Dalam bahagian sebelumnya kita bercakap tentang mengawal panjang nama pengguna

Sekarang mari kita lihat cara mengawal format kata laluan dan alamat e-mel melalui ungkapan biasa js

Walaupun anda tidak tahu cara menulis ungkapan biasa Ungkapan tidak penting Pada masa kini, anda boleh menemui banyak ungkapan biasa yang sedia dibuat untuk alamat e-mel di Internet

Mari kita lihat kata laluan hanya memerlukan kata laluan yang merupakan gabungan nombor dan huruf dan hendaklah antara 6 dan 10 aksara

var rel = /^[a-zA-Z0-9]{6,10}$/ ;

Mari kita lihat ungkapan biasa peti mel

var reg = /^w+((-w+)|(.w+))*@[A-Za-z0-9]+ ((.|-)[A-Za-z0-9]+)*.[A-Za -z0-9]+$/;

Kami telah melengkapkan ungkapan biasa, jadi bagaimana untuk mengesahkan kami bentuk?

Kami ingin mendapatkan nilai kotak teks, dan kemudian memadankannya dengan ungkapan biasa kami Jika ia sepadan, ia mematuhi spesifikasi Jika ia tidak sepadan, mesej segera akan diberikan

Di sini kita akan menggunakan kaedah test()

Kaedah test() digunakan untuk mendapatkan semula sama ada rentetan sepadan dengan corak tertentu

Mari sahkan kata laluan, iaitu gabungan nombor dan huruf

var rel = /^[A-Za-z0-9]{6,10}$/;
var val1 = document.getElementById('pwd').value;
if(val1 == ""){
document.getElementById("sp1").innerHTML = "Sila masukkan kata laluan anda!";
} else if(!rel.test(val1)){
document.getElementById("sp1").innerHTML = " Kata laluan tidak mematuhi spesifikasi! ";
          }

Dengan kod di atas, kami telah melengkapkan pengesahan kata laluan

Mari kita lihat kaedah pengesahan alamat e-mel, yang sebenarnya serupa dengan kaedah pengesahan kata laluan

var reg = /^w+((-w+)|(.w+)) *@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+) *.[A-Za-z0-9]+$/;
              var val2 = document.getElementById('email').value;                                             ("sp2").innerHTML = "Sila masukkan alamat e-mel anda!";
    }✍      document.getElementById ("sp2").innerHTML = "Format e-mel tidak betul ! “;

Meneruskan pembelajaran
||
<!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>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492837 permainan