javascript 使用JavaScript进行表单验证

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript 使用JavaScript进行表单验证相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <form method="POST" action="something.php" name="myForm" onsubmit="return validateForm()">
        <div class="form-group">
            <label for="fname">first name</label>
            <input type="text" name="first_name" id="fname">
        </div>
        <div class="form-group">
            <label for="lname">last name</label>
            <input type="text" name="last_name" id="lname">
        </div>
        <div class="form-group">
            <button type="submit" name="submit">Submit</button>
        </div>
    </form>

    <script src="form-validation.js"></script>
</body>
</html>



function validateForm() {
    var firstName = document.getElementById('fname').value;

    if( firstName == null || firstName == '' ) {
        alert("First name is required!");
        return false;
    } 

    // at least 3 characters 
    if( firstName.length < 3 ) {
        alert("First name must be at least 3 characters");
        return false;
    }
}

以上是关于javascript 使用JavaScript进行表单验证的主要内容，如果未能解决你的问题，请参考以下文章

javascript 使用Javascript进行URI解析

JavaScript 使用javascript进行sql查询

javascript 使用纯Javascript进行AJAX GET和POST

了解使用 JavaScript 进行电子邮件验证

使用 javascript 与 php 进行表单验证

如何使用按钮使用 JavaScript 对数组进行计数？