javascript - 如何使用 Javascript 验证 HTML 表单

Question

大家好，我目前停留在使用 Javascript 的 HTML 表单验证上，我觉得这很困惑。任何帮助将不胜感激。本次任务的形式要求如下:

所有字段都是必填项(学生 ID 除外，如果用户未满 18 岁，则为识别类型和编号)

• 必须选择标题
• 大学电子邮件地址采用有效的电子邮件地址格式
• 必须输入有效的出生日期
• 必须使用输入的出生日期进行计算以确定用户是否年满 18 岁。如果确定为 18 岁或以上，用户必须选择身份证明类型并输入身份证号码。根据选择的标识类型将确定格式所需身份证号码:
  • 驾照:####XX
  • 年龄证明:#X###X
  • # 表示数字，X表示任意大写字母
• 必须选择 1 天或更多天的出勤

除非满足要求并且必填字段应显示相应的错误消息，否则不应提交表单。

我试图让 javascript 与一些相应的 css 一起工作，但还没有成功。这是我到目前为止所做的:

function validateForm(form) {

    var valid = true;
    if (!form.fname.value.length) {
        valid = false;
        document.getElementById('fnameRequired').style.display = "inline-block";
        form.fname.style.border = "1px solid #ff0000";
    } else {
        document.getElementById('fnameRequired').style.display = "none";
        form.fname.style.border = "1px solid #ccc";
    }

    if (!form.lname.value.length) {
        valid = false;
        document.getElementById('lnameRequired').style.display = "inline-block";
        form.lname.style.border = "1px solid #ff0000";
    } else {
        document.getElementById('lnameRequired').style.display = "none";
        form.lname.style.border = "1px solid #ccc";
    }
}

Answer 1

在使用 javascript 之前，你应该通过 CSS 验证 https://webdevtrick.com/html-css-form-validation/

检查输入的方法有很多种，尤其是像EMAIL URL NUMBER这样的标准类型就更简单了