Use JavaScript to implement custom styles and prompts for forms

With the popularity of web applications, forms have become an indispensable part of our daily work. When we use a form, we usually need to enter some basic information to submit to the backend for processing. However, traditional forms have some shortcomings, whether in terms of aesthetics or operational friendliness. Therefore, in this article, we will focus on how to use JavaScript to implement custom styles and prompts for forms.

1. Implement style customization of the form

To achieve style customization of the form, we first need to understand the basic structure and attributes of HTML form elements. In web pages, we usually use the form tag to define a form, and then add various form elements in the form tag, such as input, select, textarea, etc. Then, for these form elements, we can use CSS to style them. However, if we want to implement more complex custom styles, we need to use JavaScript to operate it.

1. Add a class name to the form element

Before implementing the form element style customization, we need to add a class name to the form element first. In HTML, we can use the class attribute to add one or more class names to an element, for example:

<input type="text" class="my-input">

In CSS, we can use the class selector to select a certain class name, for example:

.my-input {
  width: 200px;
  height: 30px;
  border: 1px solid #ccc;
}

In this way, we can set some basic styles for the form elements.

2. Add status to form elements

In addition to basic styles, form elements also have some special states that need to be processed, such as: focus, out of focus, mouse passing, etc. . In order to implement these styles, we need to use JavaScript to manipulate the state of form elements.

const myInput = document.querySelector('.my-input');

myInput.addEventListener('focus', function() {
  // 当元素聚焦时需要执行的操作
  myInput.style.border = "1px solid blue";
});

myInput.addEventListener('blur', function() {
  // 当元素失焦时需要执行的操作
  myInput.style.border = "1px solid #ccc";
});

myInput.addEventListener('mouseenter', function() {
  // 当鼠标经过元素时需要执行的操作
  myInput.style.backgroundColor = "#f5f5f5";
});

myInput.addEventListener('mouseleave', function() {
  // 当鼠标离开元素时需要执行的操作
  myInput.style.backgroundColor = "#fff";
});

In this way, we can add styles in various states to the form elements.

3. Realize linkage effects of form elements

In the form, there are linkage effects between some form elements, for example: the options of the drop-down selection box depend on the previous level drop-down Select box options and more. To achieve this linkage effect, we also need to use JavaScript.

<select class="province">
  <option value="0">请选择省份</option>
  <option value="1">河北省</option>
  <option value="2">山东省</option>
  <option value="3">广东省</option>
</select>

<select class="city">
  <option value="0">请选择城市</option>
</select>

const provinceSelect = document.querySelector('.province');
const citySelect = document.querySelector('.city');

provinceSelect.addEventListener('change', function() {
  const provinceId = provinceSelect.value;
  // 根据省份获取对应的城市列表
  const cityList = getCityList(provinceId);
  // 清空城市下拉列表的选项
  citySelect.innerHTML = '<option value="0">请选择城市</option>';
  // 动态添加城市选项
  cityList.forEach(function(city) {
    const option = document.createElement('option');
    option.value = city.id;
    option.textContent = city.name;
    citySelect.appendChild(option);
  });
});

function getCityList(provinceId) {
  // 根据省份id获取对应的城市列表
  // ...
  return cityList;
}

In this way, we can achieve the linkage effect between form elements.

2. Implement data verification and prompts on the form

In addition to style customization, the form also needs data verification and prompts. When we fill in a form, we often need to provide different prompts based on different scenarios. For example: when the input box is empty, we need to prompt that it cannot be empty, the input content in the input box is in the wrong format, etc. Therefore, we need to add corresponding data verification and prompt functions to the form during the development process.

1. Use regular expressions for data verification

When verifying form data, we usually need to use regular expressions for matching and verification. For example: to verify whether the mobile phone number format is correct, you can use the following code:

const phoneInput = document.querySelector('.phone-input');

phoneInput.addEventListener('blur', function() {
  const phone = phoneInput.value;
  if (!/^1d{10}$/.test(phone)) {
    alert('手机号码格式不正确');
  }
});

In this example, we use a regular expression to match 11 digits starting with 1. If the mobile phone number format is incorrect, a popup will appear. Prompt box prompts.

2. Implement real-time verification and display prompts

In addition to regular expression verification, we can also implement real-time verification and display prompts. For example: to set the password box must contain uppercase and lowercase letters and numbers, you can use the following code:

<input type="password" class="password-input" placeholder="请输入密码">

<div class="password-tip">密码需要包含大小写字母和数字</div>

.password-tip {
  color: red;
  display: none;
}

const passwordInput = document.querySelector('.password-input');
const passwordTip = document.querySelector('.password-tip');

passwordInput.addEventListener('input', function() {
  const value = passwordInput.value;
  if (/d/.test(value) && /[a-z]/.test(value) && /[A-Z]/.test(value)) {
    passwordTip.style.display = 'none';
  } else {
    passwordTip.style.display = 'block';
  }
});

In this example, we need to verify that the content entered in the input box must contain uppercase and lowercase letters and numbers. In order to realize this function, we added an input event listener to the input box. When the user enters content in the input box, it will be verified in real time and a prompt will be displayed.

3. Summary

Through the introduction of this article, we have learned how to use JavaScript to implement custom styles and prompts for forms. In terms of form customization, using JavaScript can give us more flexible operating space and can realize various complex business needs. Therefore, having an in-depth understanding of JavaScript form customization and proficient use of it is of great significance to our web development work.

The above is the detailed content of Use JavaScript to implement custom styles and prompts for forms. For more information, please follow other related articles on the PHP Chinese website!