Kuhakikisha: Uharibifu wa nifasi

Kuikuaa kusoma kuhusiana na CSS na JavaScript kuunda forma ya uharibifu wa nifasi.

Mwongozo wa Kuchukua Namba

亲自试一试

Kuundua forma ya uharibifu wa nifasi

Kilele cha kwanza - Ongeza HTML:

<div class="container">
  <form action="/action_page.php">
    <label for="usrname">Username</label>
    <input type="text" id="usrname" name="usrname" required>

Password must contain the following:

A lowercase letter

A capital (uppercase) letter

A number

Minimum 8 characters

注意：我们在密码字段中使用 pattern 属性（带有正则表达式）来设置提交表单的限制：必须包含 8 个或更多字符，其中至少有一个数字，一个大写字母和一个小写字母。

第二步 - 添加 CSS：

设置输入字段和消息框的样式：

/* 设置所有输入字段的样式 */
input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
}
/* 设置提交按钮的样式 */
input[type=submit] {
  background-color: #04AA6D;
  color: white;
}
/* Kufanya stili kwa kikaa cha kichwaa cha ingia */
.container {
  background-color: #f1f1f1;
  padding: 20px;
}
/* Kama mtu amekadiri eneo la nifaa zima, kufichwa kikaa chakula cha ujumbe */
#message {
  display:none;
  background: #f1f1f1;
  color: #000;
  position: relative;
  padding: 20px;
  margin-top: 10px;
}
#message p {
  padding: 10px 35px;
  font-size: 18px;
}
/* Kama ujumbe unaonesha kina, ongeza rangi ya kichwa cha kichwa kichwa na hii ya kichwa cha kichwa. */
.valid {
  color: green;
}
.valid:before {
  position: relative;
  left: -35px;
  content: "✔";
}
/* Kama ujumbe unaonesha kina, ongeza rangi ya kichwa cha kichwa kichwa na ikoni ya "x". */
.invalid {
  color: red;
}
.invalid:before {
  position: relative;
  left: -35px;
  content: "✖";
}

Tukio tatu - Ongeza JavaScript:

<script>
var myInput = document.getElementById("psw");
var letter = document.getElementById("letter");
var capital = document.getElementById("capital");
var number = document.getElementById("number");
var length = document.getElementById("length");
// ingawa mtu amekadiri eneo la nifaa zima, kufichwa kikaa chakula cha ujumbe
myInput.onfocus = function() {
  document.getElementById("message").style.display = "block";
}
// ingawa kama mtu amekadiri eneo la nifaa zima, kufichwa kikaa chakula cha ujumbe
myInput.onblur = function() {
  document.getElementById("message").style.display = "none";
}
// 当用户开始在密码字段中输入内容时
myInput.onkeyup = function() {
  // Validate lowercase letters
  var lowerCaseLetters = /[a-z]/g;
  if(myInput.value.match(lowerCaseLetters)) {
    letter.classList.remove("invalid");
    letter.classList.add("valid");
  } else {
    letter.classList.remove("valid");
    letter.classList.add("invalid");
}
  // 验证大写字母
  var upperCaseLetters = /[A-Z]/g;
  if(myInput.value.match(upperCaseLetters)) {
    capital.classList.remove("invalid");
    capital.classList.add("valid");
  } else {
    capital.classList.remove("valid");
    capital.classList.add("invalid");
  }
  // 验证数字
  var numbers = /[0-9]/g;
  if(myInput.value.match(numbers)) {
    number.classList.remove("invalid");
    number.classList.add("valid");
  } else {
    number.classList.remove("valid");
    number.classList.add("invalid");
  }
  // 验证长度
  if(myInput.value.length >= 8) {
    length.classList.remove("invalid");
    length.classList.add("valid");
  } else {
    length.classList.remove("valid");
    length.classList.add("invalid");
  }
}
</script>

亲自试一试

相关页面

教程：HTML 表单