How to verify using JavaScript

In web development, forms are a very common element. However, the data entered by the user in the form is often not guaranteed to be correct, so we need to perform some verification to ensure the validity of the data. As an important part of Web front-end development, JavaScript has a very powerful verification function. This article will introduce how to use JavaScript to verify form data.

1. Obtain form data

To verify the form data, you first need to obtain the input data. In JavaScript, you can use the document object to obtain form elements, as shown below:

let username = document.getElementById('username').value; // 获取用户名的值
let password = document.getElementById('password').value; // 获取密码的值

Among them, the getElementById() method can obtain the corresponding element based on the id attribute of the element. After obtaining the values ​​of the form elements, we can then verify these values.

2. Verify user name

When verifying user name, we can use regular expressions. The following is a simple regular expression that can match uppercase and lowercase letters, numbers and underscores, with a length of 6 to 20 characters:

let usernamePattern = /^[a-zA-Z0-9_]{6,20}$/;

Then we can match the obtained user name with the regular expression to determine Whether it meets the requirements:

if (!usernamePattern.test(username)) {
  // 满足条件
} else {
  // 不满足条件
}

In the above code, the test() method can test whether a string matches a certain regular expression. If it matches, it returns true, if it does not match, it returns false.

3. Verify password

We can also use regular expressions when verifying passwords. The following is a simple regular expression that can match uppercase and lowercase letters, numbers and special characters, with a length of 6 to 20 characters:

let passwordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*d)(?=.*[@$!%*?&])[A-Za-zd@$!%*?&]{6,20}$/;

Then we can match the obtained password with the regular expression to determine Whether it meets the requirements:

if (!passwordPattern.test(password)) {
  // 满足条件
} else {
  // 不满足条件
}

Similarly, in the above code, the test() method can test whether a string matches a certain regular expression. If it matches, it returns true, if it does not match, it returns false.

4. Verify email address

Email address is a very common form element, so it is also very necessary to verify the email address. Similarly, we can use regular expressions for verification. The following is a simple regular expression that can match legal email addresses:

let emailPattern = /^[a-zA-Z0-9]+([._]?[a-zA-Z0-9]+)*@[a-zA-Z0-9]+([.][a-zA-Z0-9]+)+$/;

Then we can match the obtained email address with the regular expression to determine whether it meets the requirements:

if (!emailPattern.test(email)) {
  // 满足条件
} else {
  // 不满足条件
}

Similarly, in the above code, the test() method can test whether a string matches a certain regular expression. If it matches, it returns true, if it does not match, it returns false.

5. Verification of mobile phone numbers

When verifying mobile phone numbers, we can also use regular expressions. The following is a simple regular expression that can match legal mobile phone numbers:

let phonePattern = /^1[34578]d{9}$/;

Then we can match the obtained mobile phone number with the regular expression to determine whether it meets the requirements:

if (!phonePattern.test(phone)) {
  // 满足条件
} else {
  // 不满足条件
}

Similarly, in the above code, the test() method can test whether a string matches a certain regular expression. If it matches, it returns true, if it does not match, it returns false.

6. Implement the verification function

By integrating the above verification rules, we can implement a complete form verification function. The following is a simple sample code:

let usernamePattern = /^[a-zA-Z0-9_]{6,20}$/; // 校验用户名
let passwordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*d)(?=.*[@$!%*?&])[A-Za-zd@$!%*?&]{6,20}$/; // 校验密码
let emailPattern = /^[a-zA-Z0-9]+([._]?[a-zA-Z0-9]+)*@[a-zA-Z0-9]+([.][a-zA-Z0-9]+)+$/; // 校验邮箱地址
let phonePattern = /^1[34578]d{9}$/; // 校验手机号码

function validateForm() { // 表单校验函数
  let username = document.getElementById('username').value; // 获取用户名
  let password = document.getElementById('password').value; // 获取密码
  let email = document.getElementById('email').value; // 获取邮箱地址
  let phone = document.getElementById('phone').value; // 获取手机号码

  if (!usernamePattern.test(username)) { // 校验用户名
    alert('请填写6到20位大小写字母、数字和下划线');
    return false;
  } else if (!passwordPattern.test(password)) { // 校验密码
    alert('请填写6到20位大小写字母、数字、特殊字符');
    return false;
  } else if (!emailPattern.test(email)) { // 校验邮箱地址
    alert('请填写正确的邮箱地址');
    return false;
  } else if (!phonePattern.test(phone)) { // 校验手机号码
    alert('请填写正确的手机号码');
    return false;
  } else {
    return true;
  }
}

In the above code, the validateForm() function will be automatically called when the form is submitted to verify the data in the form. If the verification fails, the function will return false to prevent the form from being submitted; if the verification passes, the function will return true and the form will be submitted. At the same time, when the verification fails, the corresponding prompt message will pop up to facilitate users to make corrections.

7. Summary

As a very important Web front-end development language, JavaScript provides a very powerful verification function. In form development, using JavaScript for data verification can greatly ensure the validity and correctness of data, and improve user experience and data security. The above introduces some commonly used verification rules and code implementations, which can be used for your reference.

The above is the detailed content of How to verify using JavaScript. For more information, please follow other related articles on the PHP Chinese website!