0

我相信这非常容易，但由于某种原因，我无法弄清楚这一点。

我需要在页面上创建一个包含以下字段和规则的表单。如果用户提交了表单但任何字段的规则都被破坏，则必须执行列出的行为以告知用户。我不允许使用 jQuery。Field01 & Field02 是一个盒子。Field03 & Field04 是一个盒子。

  • Field01：“用户名”- Rule01：不能为空，Behavior01：使用 focus() 将焦点放在它上面。
  • Field02：“用户名”- Rule02：不能为空，Behavior02：提醒用户“需要用户名”。
  • Field03：“Birthyear” - Rule03：必须是数字，Behavior03：使用 select() 选择值。
  • Field04：“Birthyear” - Rule04：必须在 1900 - 2012 之间，Behaviour04：将 Birthyear 文本框背景颜色变为黄色。

到目前为止，这就是我所拥有的……在 Field03 和 Field04 中挣扎。

有谁知道如何解决这个问题？

HTML：

<!DOCTYPE html>

<html>
    <head>
        <script defer="defer" type="text/javascript" src="dawid_spamer_Assign01.js"></script>

    </head>
    <body>

        <div id="div1">
            <form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post">
            Username: <input type="text" id="username" name="username"><br>       
            Birth Year: <input type="select" id="birthYear" name="birthYear"><br><br>
             <input type="submit"  value="Submit">

            </form></div>

        <div id="div2">
            <img src="cat.jpg"    id="im1" name="image1"/>
            <img src="dog.jpg"    id="im2" name="image2"/>
            <img src="fish.jpg"   id="im3" name="image3" class='double'/>
        </div></body></html>

JS 在单独的文件中：

document.getElementById("username").focus(); // focus on text box 

function validateForm(){
var x=document.forms["myForm"]["username"].value;
if (x==""){
    alert("Username Required!");
            // focus on text box
    document.getElementById("username").focus();  
    return false; // validation failed
}else{
    return true; // validation success  
    }
}
4

2 回答 2

0

如果提供的值不是数字，我假设必须突出显示 BirthYear 字段。这可以使用JavaScript 提供的select() 方法来完成。

使用isNaN() 方法检查提供的值是否为数字。

于 2013-03-21T05:54:09.153 回答
0

尝试

document.getElementById("username").focus(); // focus on text box

function validateForm() {
    var x = document.forms["myForm"]["username"].value;
    if (x == "") {
        alert("Username Required!");
        // focus on text box
        document.getElementById("username").focus();
        return false; // validation failed
    }

    var dob = document.forms["myForm"]["birthYear"];
    var y = dob.value;
    if(!(/^\d+$/.test(y))){
        alert('must be numert');
        dob.select();
        return false;
    }

    return true;
}

演示：小提琴

于 2013-03-21T05:58:31.873 回答