Question

我有下一个输入字段：

<form action="admin" method="POST" commandName="adminForm" onsubmit="return validateEmail(this.email)">
    <table>
        <tr>
            <td>
                <label for="email">Email</label>
            </td>
            <td>
                <input id="email" name="email" type="text" path="email" oninvalid="this.setCustomValidity('Please fill this field - it is mandatory')" oninput="setCustomValidity('')">
            </td>
        </tr>
    </table>
</form>

function validateEmail(email) {
    var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
    if (!re.test(email.value)) {
        email.setAttribute("oninvalid", "this.setCustomValidity('Wrong email format')");
        email.setAttribute("oninput", "setCustomValidity('')");
        return false;
    }
    return re.test(email.value);
}

这里我想在添加错误的电子邮件时显示错误消息。现在，当我不在电子邮件字段下添加内容时，它会显示错误Please fill this field - it is mandatory。如果电子邮件错误，我想更改此消息。

它目前不起作用，任何想法为什么？

Answer 1

请参阅我的示例来源。

HTML

<form id="myForm" action="admin" method="POST">
    <table>
        <tr>
            <td>
                <label for="email">Email</label>
            </td>
            <td>
                <input id="email" name="email" type="text">
            </td>
        </tr>
    </table>
    <div id="msg"></div>
    <button type="submit">submit</button>
</form>

和javascript

var form = document.getElementById('myForm');
var msg = document.getElementById('msg');
form.addEventListener('submit', function( e ) {


    var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
    var email = document.getElementById('email').value;

    if (!re.test(email)) {

        console.log('invalid');
        msg.innerText = 'invalid email';
        e.preventDefault();
    } else {
        msg.innerText = '';
    }
});

和live demo

javascript / jquery添加错误消息

1 个答案: