注册表单JS/CSS未生效且无法输入问题求助

我有三个文件：FormValidation.html、FormValidation.js和style.css，在HTML的head标签中引入了JS和CSS：

<script src="FormValidation.js"></script>
<link rel="stylesheet" href="Style.css">

预期能正常关联文件，但实际运行时：表单能显示但无法输入，JS验证弹窗不触发，CSS对齐样式也没生效，调试没报错，求排查建议。

原完整代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="en"
<head>
    <title>
        Registration Form
    </title>
    <script src="FormValidation.js"></script>
    <link rel="stylesheet" href="Style.css">
</head>
<body>
    <h1 style="text-align: center;">
        REGISTRATION FORM
    </h1>


    <form name="RegForm" onsubmit="return ValidForm()"
        method=""post>
    <p>
        Name:
            <input type="text" size="65" name="Name: "/>
    </p>
    <br />
    <p>
        Address:
        <input type="text" size="65" name="Address: "/>
    </p>
    <br />
    <p>
        Email:
        <input type="text" size="65" name="Email: "/>
    </p>
    <br />
    <p>
        Password:
        <input type="text" size="65" name="Password: "/>
    </p>
    <br />
    <p>
        Telephone:
        <input type="text" size="65" name="Telephone: "/>
    </p>
    <br />

    <p>
        SELECT YOUR COURSE
        <select type="text" value="" nam="Subject">
            <option>BTECH</option>
            <option>BBA</option>
            <option>BCA</option>
            <option>B.com</option>
            <option>GEEKFORGEEKS</option>
        </select>
    </p>
    <p>
        Comments:
        <textarea cols="55" name="Comment: "> </textarea>
    </p>
    <p>
        <input type="submit" value="send" name ="Submit"/>
        <input type="reset" value="reset" name="Reset"/>
    </p>
    </form>
</body>
</html>

JS代码 #

function ValidForm(){
    var name =
        document.forms.RegForm.Name.Value;
    var email =
        document.forms.RegForm.EMail.value;
    var phone =
        document.forms.RegForm.Telephone.value;
    var subject = 
        document.forms.RegForm.Subject.Value;
    var password =
        document.forms.RegForm.Password.value;
    var address = 
        document.forms.RegForm.Address.value;
    /*Javascript reGex(regular expression= check to find sequence 
    of characters that match pattern in text.) for email validation.

    /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/g 
    .The // at the begining and end indicate the regex
    .The ^$ indicate the entire input string should match the regex
    */
    var regEmail= /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/g;
    /*javascript reGex for phone number validation.
    \d{10} means that it should have 10 characters 
    matching any decimal digit including 0-9. */
    var regPhone=/^\d{10}$/;
    /*javascript reGex for name validation.
    /\d+$/g is a global search for non-digit characters*/
    var regName= /\d+$/g;

    //focus() method is the element that will receive keyboard and similar events by default.
    if (name == "" || regName.text(name)){
        window.alert("Please use A-Z or a-z");
        name.focus()
        return false;
    }
    if (address ==""){
        window.alert("Please enter your address.");
        address.focus();
        return false;
    }
    if (email==""){
        window.alert("Please enter a valid e-mail address.");
        email.focus();
        return false;
    }
    if (password==""){
        window.alert("Please enter your passowrd.");
        password.focus();
        return false;
    }
//setting password REQUIREMENTS.
    if (password.length <8){
        alert("ALERT: Password should be atleast 8 characters long.");
        console.log("CONSOLE LOG Error: Password must be atleast 8 Characters.")
        password.focus();
        return false;
    }else if(password.search([/[a-z]/])<0){
        alert("Alert: Password must contain atleast one lowercase letter.")
        console.log("Console Log Error: Password must contain atleast one lowercase letter.")
        password.focus();
        return false;
    }else if(password.search([/[A-Z]/])<0){
        alert("Alert: Password must contain atleast one uppercase letter.")
        console.log("Console Log Error: Password must contain atleast one uppercase letter.")
        password.focus();
        return false;
    }else if(password.search([/[0-9]/])<0){
        alert("Alert: Password must contain at least one number.")
        console.log("Console Log Error: Password must contain atleast one number.")
        password.focus();
        return false;
/*
\w =any word character(regardless of case)
^$ =a match must start at beginning of a string and end at the end of the string
[] =character class- match any character contained in the character class.
*/
    }else if(password.search(/^(.*\w){3.*}$/)){
        alert("Alert: Password must contain atlest 3 of the folloing: Uppercase, Lowercase, Numbers, Symbols. ")
        password.focus();
        return false;
    }
    
    else{
        console.log("Console log: Success!")
        password.focus();
    }

    if (phone ==""|| !regPhone.test(phone)){
        alert("Please enter valid phone number.");
    }
    if (subject.selectedIndex == -1){
        alert("Please select the Course.")
        subject.focus();
        return false;
    }
    return true;
}

CSS代码 #

div{
    box-sizing: border-box;
    width: 100%;
    border: 100px solid black;
    float: left;
    align-content: center;
    align-items: center;
}
form{
    margin: 0 auto;
    width: 600px;
}

问题排查与修复 #

一、HTML核心错误 #

1. 标签语法错误：
   • <html lang="en" 未闭合，改为 <html lang="en">
   • <form> 的method属性写法错误：method=""post> 改为 method="post"
   • <select> 属性写错：nam="Subject" 改为 name="Subject"
   • 所有表单元素的name属性带了冒号/空格（比如name="Name: "），改为纯标识名（如name="Name"），否则JS无法正确获取元素
2. 脚本加载时机错误：JS放在head会先执行，但DOM还没渲染，获取不到表单元素，把<script>标签移到</body>闭合前

二、JS核心错误 #

1. 大小写错误：Value改为小写value（如document.forms.RegForm.Name.Value → document.forms.RegForm.Name.value）
2. 方法调用错误：regName.text(name) 改为regName.test(name)
3. 正则表达式错误：
   • password.search([/[a-z]/]) 去掉数组包裹，改为password.search(/[a-z]/)
   • 密码复杂度验证正则/^(.*\w){3.*}$/语法错误，替换为可正常验证多条件的正则
4. 变量匹配错误：document.forms.RegForm.EMail 对应HTML的name="Email"，改为document.forms.RegForm.Email
5. 逻辑漏洞：电话验证后未加return false，会继续提交；subject.selectedIndex默认是0（第一个选项），改为判断是否选中有效选项

三、CSS问题 #

原CSS中div样式无对应DOM元素，不会生效；可给表单补充基础样式提升排版效果

修复后完整代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Registration Form</title>
    <link rel="stylesheet" href="Style.css">
</head>
<body>
    <h1 style="text-align: center;">REGISTRATION FORM</h1>

    <form name="RegForm" onsubmit="return ValidForm()" method="post">
        <p>
            Name:
            <input type="text" size="65" name="Name"/>
        </p>
        <br />
        <p>
            Address:
            <input type="text" size="65" name="Address"/>
        </p>
        <br />
        <p>
            Email:
            <input type="text" size="65" name="Email"/>
        </p>
        <br />
        <p>
            Password:
            <input type="password" size="65" name="Password"/>
        </p>
        <br />
        <p>
            Telephone:
            <input type="text" size="65" name="Telephone"/>
        </p>
        <br />

        <p>
            SELECT YOUR COURSE
            <select name="Subject">
                <option value="">请选择课程</option>
                <option value="BTECH">BTECH</option>
                <option value="BBA">BBA</option>
                <option value="BCA">BCA</option>
                <option value="B.com">B.com</option>
                <option value="GEEKFORGEEKS">GEEKFORGEEKS</option>
            </select>
        </p>
        <p>
            Comments:
            <textarea cols="55" name="Comment"></textarea>
        </p>
        <p>
            <input type="submit" value="send" name="Submit"/>
            <input type="reset" value="reset" name="Reset"/>
        </p>
    </form>
    <script src="FormValidation.js"></script>
</body>
</html>

JS代码 #

function ValidForm(){
    const form = document.forms.RegForm;
    const name = form.Name.value.trim();
    const email = form.Email.value.trim();
    const phone = form.Telephone.value.trim();
    const subject = form.Subject.value;
    const password = form.Password.value;
    const address = form.Address.value.trim();

    // 正则表达式
    const regEmail = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    const regPhone = /^\d{10}$/;
    const regName = /\d+/; // 检查是否包含数字

    // 验证姓名
    if (!name || regName.test(name)) {
        alert("姓名只能包含字母，不能为空");
        form.Name.focus();
        return false;
    }

    // 验证地址
    if (!address) {
        alert("请输入地址");
        form.Address.focus();
        return false;
    }

    // 验证邮箱
    if (!email || !regEmail.test(email)) {
        alert("请输入有效的邮箱地址");
        form.Email.focus();
        return false;
    }

    // 验证密码
    if (!password) {
        alert("请输入密码");
        form.Password.focus();
        return false;
    }
    if (password.length < 8) {
        alert("密码长度至少8位");
        console.log("错误：密码长度不足8位");
        form.Password.focus();
        return false;
    } else if (!/[a-z]/.test(password)) {
        alert("密码必须包含至少一个小写字母");
        console.log("错误：密码缺少小写字母");
        form.Password.focus();
        return false;
    } else if (!/[A-Z]/.test(password)) {
        alert("密码必须包含至少一个大写字母");
        console.log("错误：密码缺少大写字母");
        form.Password.focus();
        return false;
    } else if (!/[0-9]/.test(password)) {
        alert("密码必须包含至少一个数字");
        console.log("错误：密码缺少数字");
        form.Password.focus();
        return false;
    }

    // 验证电话
    if (!phone || !regPhone.test(phone)) {
        alert("请输入有效的10位电话号码");
        form.Telephone.focus();
        return false;
    }

    // 验证课程选择
    if (!subject) {
        alert("请选择课程");
        form.Subject.focus();
        return false;
    }

    console.log("验证通过！");
    return true;
}

CSS代码 #

form{
    margin: 0 auto;
    width: 600px;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
}
p {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
}
input[type="text"], input[type="password"], select, textarea {
    flex: 1;
    padding: 8px;
    box-sizing: border-box;
}

内容的提问来源于stack exchange，提问作者NAVI