js文本框验证

<input type="text" id="username" required>
<span id="error-message"></span>

<script>
document.querySelector('form').addEventListener('submit', function(event) {
    var username = document.getElementById('username').value;
    var errorMessage = document.getElementById('error-message');
    if (!username) {
        errorMessage.textContent = '用户名不能为空';
        event.preventDefault(); // 阻止表单提交
    } else {
        errorMessage.textContent = '';
    }
});
</script>

<input type="email" id="email" required>
<span id="error-message"></span>

<script>
document.querySelector('form').addEventListener('submit', function(event) {
    var email = document.getElementById('email').value;
    var errorMessage = document.getElementById('error-message');
    var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailPattern.test(email)) {
        errorMessage.textContent = '请输入有效的邮箱地址';
        event.preventDefault();
    } else {
        errorMessage.textContent = '';
    }
});
</script>