Tutoriel sur le formulaire de vérification du développement JS - formulaire de vérification (1)
Jetons d'abord un coup d'œil au code de la section précédente
<!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>
</body>
</html>Jetons d'abord un coup d'œil à la vérification du nom d'utilisateur :
var sub = document.getElementById('sub'); < C> Sub.Onclick = Function () {
// Vérifiez si le nom d'utilisateur est vide. S'il est vide, donnez les informations d'invite
var val = document.GetelementByid ('name').
if(val == ""){
document.getElementById("sp").innerHTML = "Veuillez saisir le nom d'utilisateur !"; Recevez l'objet bouton, puis créez un événement de clic
Obtenez la valeur de la zone de texte, puis jugez la valeur de la zone de texte. Si elle est égale à vide, nous donnerons un message d'invite, qui est stocké dans la balise div
var sub = document.getElementById('sub');
sub.onclick=function(){
//Vérifiez si le nom d'utilisateur est vide, s'il est vide, donnez une invite
var val = document.getElementById('name').value;
if(val == ""){
document.getElementById("sp").innerHTML = "Veuillez entrer votre nom d'utilisateur !";
} // Vérifiez si le mot de passe est vide, pour l'air, donnez les informations d'invite
var val1 = document.GetelementByid ('pwd'
if (value == ""). {
Document.getElementById("sp1").innerHTML = "Veuillez entrer votre mot de passe !";
}
email').value
if (value == "" ") {
Document.GetelementByid (" sp2 "). Innerhtml =" Veuillez entrer la boîte aux lettres ! "
🎜> // Vérifiez si le contenu est vide
var val3 = document.getElementById ('txt').value }
- Recommandations de cours
- Téléchargement du didacticiel
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~ 