How does javascript use regular expressions to validate a form? (code example)

What this article brings to you is to introduce how JavaScript uses regular expressions to validate forms (code examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

In the previous article [How to perform simple password verification on the form in js? 】In this article, we introduce a more comprehensive method of validating forms through examples. It will check everything we want to check, but it uses a lot of code to test each requirement individually and display different error messages.

How to achieve the effect with a small amount of code? I believe many people will have such questions. In fact, it is also simple. You can solve this problem by using regular expressions.

Let's take a look at the method of javascript regular expression verification of the form through the password verification of the form.

HTML code:

<form method="POST" action="" onsubmit="return checkForm(this);">

<p>密  码: <input type="password" name="pwd1"><span> </p>
<p>确认密码: <input type="password" name="pwd2"></p>
<p><input type="submit"></p>
</form>

The checkForm() function of js verifies the password and calls the regular expression:

  function checkForm(form)
  {
    if(form.pwd1.value != "" && form.pwd1.value == form.pwd2.value) {
      if(!checkPassword(form.pwd1.value)) {
        alert("您输入的密码无效！");
        form.pwd1.focus();
        return false;
      }
    } else {
      alert("错误：请检查您输入并确认您的密码！");
      form.pwd1.focus();
      return false;
    }
    return true;
  }

js regular expression:

function checkPassword(str)
  {
    var re = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}/;
    return re.test(str);
  }

Effect, enter password (123456):

The expression type used here is called "look -ahead", which attempts to match the included regular expression against the "future" part of the string.

Translate (the function implemented by the above regular expression):

1. Match a string of six or more characters;

2. Contain at least one number ( \d is the abbreviation of [0-9]);

3. At least one lowercase character

4. At least one uppercase character

Test it:

If you want to limit your password to only letters and numbers (no spaces or other characters), you only need to change it slightly. We use the wildcard \w, and we can complete:

Improved regular expression:

function checkPassword(str)
  {   
    var re = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])\w{6,}$/;
    return re.test(str);
  }

The \W is the abbreviation of "any letter, number or underscore".

It's actually not a good practice to limit which characters are used, since punctuation and other symbols provide extra security.

Example of regular expression validation form:

html code:

<form method="POST" action="" onsubmit="return checkForm(this);">
<p>  用 户 名: <input type="text" name="username"><span>  （输入必须只包含字母、数字和下划线）</span></p>
<p>  密     码: <input type="password" name="pwd1"><span>  （输入必须包含至少一个数字/小写/大写字母，并且长度至少为六个字符）</span></p>
<p>确认密码: <input type="password" name="pwd2"></p>
<p><input type="submit"></p>
</form>

js code:

  function checkPassword(str)
  {
    var re = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}/;
    return re.test(str);
  }
  function checkForm(form)
  {
    if(form.username.value == "") {
      alert("Error: Username cannot be blank!");
      form.username.focus();
      return false;
    }
    re = /^\w+$/;
    if(!re.test(form.username.value)) {
      alert("错误：用户名必须只包含字母、数字和下划线！");
      form.username.focus();
      return false;
    }
    if(form.pwd1.value != "" && form.pwd1.value == form.pwd2.value) {
      if(!checkPassword(form.pwd1.value)) {
        alert("您输入的密码无效！");
        form.pwd1.focus();
        return false;
      }
    } else {
      alert("错误：请检查您输入并确认您的密码！");
      form.pwd1.focus();
      return false;
    }
    return true;
  }

You’re done!

Rendering:

Summary: As you can see, regular expressions are very worth learning. They can be used not only in JavaScript, but also in PHP, Perl, Java and many other languages. Some text editors (not just vi) also allow them when searching or replacing text.

The above is the detailed content of How does javascript use regular expressions to validate a form? (code example). For more information, please follow other related articles on the PHP Chinese website!