使用JavaScript进行验证

Validation with JavaScript

本文关键字：验证 JavaScript 使用      更新时间：2023-09-26

也有类似的问题，但我找不到检查表单提交数据的方法。

我想查看表格，提交电话号码和电子邮件的数据。我按如下方式检查，但不起作用。

我该如何纠正？

<script>
    function validateForm() {
        var x = document.forms["registerForm"]["Email"].value;
        if (x == null || x == "") {
            alert("Email number must be filled out.");
            return false;
        }
        else if(!/@./.test(x)) {
            alert("Email number must be in correct format.");
            return false;
        }
        x = document.forms["registerForm"]["Phone"].value;
        if (x == null || x == "" ) {
            alert("Phone number must be filled out.");
            return false;
        }
        else if(!/[0-9]+()-/.test(x)) {
          alert("Phone number must be in correct format.");
          return false;
        }
    }
</script>

对于电子邮件，我只想查看"@"answers"包含在电子邮件地址中。

对于电话号码，我想勾选（）-+[0-9]，并且只接受一个空格作为电话号码，例如+95 9023222、+95-1-9098098、（95）902321。我该如何检查？

服务器上会有另一次检查，所以不需要在表单提交时进行详细检查。

电子邮件验证

发件人http://www.w3resource.com/javascript/form/email-validation.php

function ValidateEmail(mail)
{
    if (/^'w+(['.-]?'w+)*@'w+(['.-]?'w+)*('.'w{2,3})+$/.test(myForm.emailAddr.value))
    {
        return (true)
    }
    alert("You have entered an invalid email address!")
    return (false)
}

电话号码验证

发件人http://www.w3resource.com/javascript/form/phone-no-validation.php.

function phonenumber(inputtxt)
{
    var phoneno = /^'d{10}$/;
    if ((inputtxt.value.match(phoneno))
    {
        return true;
    }
    else
    {
        alert("message");
        return false;
    }
}

您可以这样做：

HTML部分

<div class="form_box">
    <div class="input_box">
        <input maxlength="64" type="text" placeholder="Email*" name="email" id="email" />
        <div id="email-error" class="error-box"></div>
    </div>
    <div class="clear"></div>
</div>
<div class="form_box">
    <div class="input_box ">
        <input maxlength="10" type="text" placeholder="Phone*" name="phone" id="phone" />
        <div id="phone-error" class="error-box"></div>
    </div>
    <div class="clear"></div>
</div>

您的脚本

var email = $('#email').val();
var phone = $('#phone').val();
var email_re = /^(([^<>()[']''.,;:'s@'"]+('.[^<>()[']''.,;:'s@'"]+)*)|('".+'"))@(('[[0-9]{1,3}'.[0-9]{1,3}'.[0-9]{1,3}'.[0-9]{1,3}'])|(([a-zA-Z'-0-9]+'.)+[a-zA-Z]{2,3}))$/;
var mobile_re = /^[0-9]{10}$/g;
if ($.trim(email) == '') {
    $('#email').val('');
    $('#email-error').css('display', 'block');
    $('#email-error').html('Please enter your Email');
} else if (!email.match(email_re)) {
    $('#email-error').css('display', 'block');
    $('#email-error').html('Please enter valid Email');
}
if ($.trim(phone) == '') {
    $('#phone').val('');
    $('#phone-error').css('display', 'block');
    $('#phone-error').html('Please enter your Phone Number');
} else if (!phone.match(mobile_re)) {
    $('#phone-error').css('display', 'block');
    $('#phone-error').html('Please enter valid Phone Number');
} else {
    $('#phone-error').css('display', 'none');
    $('#phone-error').html('');
}

您当然可以自己编写验证部分，但也可以使用众多验证库中的一个。

一个广泛使用的是Parsley。它很容易使用。只需包括.js和.css，并向表单及其元素添加一些信息，如（fiddle）：

<script src="jquery.js"></script>
<script src="parsley.min.js"></script> 
<form data-parsley-validate>
    <input data-parsley-type="email" name="email"/>
</form>

HTML5具有电子邮件验证功能。您可以检查是否使用HTML5:

<form>
    <input type="email" placeholder="me@example.com">
    <input type="submit">
</form>

此外，对于另一个选项，您可以查看此示例。

相关文章：