Use JavaScript functions to autofill and validate forms

JavaScript function implementation for form automatic filling and validation

In web development, forms are a very common element, and we often need to fill and validate them. . Using JavaScript functions can easily realize the automatic filling and verification functions of the form, improving user experience and data accuracy. In this article, I will introduce how to use JavaScript functions to implement form autofill and validation, and provide specific code examples.

1. Auto-fill form

Auto-fill form can reduce the tedious manual input and improve efficiency when users fill in the form. Usually, we can store the user's information in advance, such as name, email, phone number, etc., and then automatically fill this information into the corresponding form when the user visits the web page.

The sample code is as follows:

// 假设用户信息存储在一个对象中
var userInfo = {
  name: "张三",
  email: "zhangsan@example.com",
  phone: "123456789"
};

// 自动填充表单
function autoFillForm() {
  document.getElementById("name").value = userInfo.name;
  document.getElementById("email").value = userInfo.email;
  document.getElementById("phone").value = userInfo.phone;
}

// 在页面加载完成后调用自动填充函数
window.onload = function() {
  autoFillForm();
};

In the above code, we first define an object userInfo to store user information, which contains the values ​​​​of name, email and phone number. Then through the autofill form function autoFillForm, we can assign these values ​​​​to the value attribute of the corresponding form element to achieve the automatic filling effect. Finally, just call the autoFillForm function after the page is loaded.

2. Form verification

Form verification is to ensure that the information filled in by users conforms to certain rules or formats to prevent malicious submissions or data errors. Common form verification includes: required field verification, email format verification, mobile phone number format verification, etc.

The sample code is as follows:

// 表单验证
function formValidation() {
  var name = document.getElementById("name").value;
  var email = document.getElementById("email").value;
  var phone = document.getElementById("phone").value;

  // 验证姓名是否为空
  if (name === "") {
    alert("请输入姓名！");
    return false;
  }

  // 验证邮箱格式
  var emailPattern = /^w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$/;
  if (!emailPattern.test(email)) {
    alert("请输入有效的邮箱地址！");
    return false;
  }

  // 验证手机号格式
  var phonePattern = /^1[3456789]d{9}$/;
  if (!phonePattern.test(phone)) {
    alert("请输入有效的手机号码！");
    return false;
  }

  // 验证通过，可提交表单
  alert("提交成功！");
  return true;
}

In the above code, we obtain the value of each input box in the form and apply regular expressions for corresponding verification. If the verification fails, a prompt message will pop up and false will be returned, preventing form submission; if the verification passes, a prompt message indicating successful submission will pop up and return true, allowing the form to be submitted.

To use the form validation function, you can add an onclick event on the submit button of the form, as follows:

<form>
  <label for="name">姓名：</label>
  <input type="text" id="name" required>

  <label for="email">邮箱：</label>
  <input type="email" id="email" required>

  <label for="phone">电话：</label>
  <input type="tel" id="phone" required>

  <input type="submit" value="提交" onclick="return formValidation()">
</form>

In the above code, we called the formValidation function in the onclick event of the submit button , and use the return keyword to receive the return value of the function. If true is returned, form submission is allowed; if false is returned, form submission is prevented.

Summary:

By using JavaScript functions to realize automatic filling and verification of forms, we can make it more convenient and accurate for users to fill in forms. The above code provides a specific implementation of automatic form filling and form validation, which can be modified and expanded according to actual needs. Hope this article helps you!

The above is the detailed content of Use JavaScript functions to autofill and validate forms. For more information, please follow other related articles on the PHP Chinese website!