Question

我有一个表单，我希望它通过try-catch块和另外两个函数进行验证和验证。这是我有的：的 HTML：

<h5>Please enter your name below</h5>

<form name="textForm">
    <label for="name">First name:</label>
    <input type="text" name="fname" id="name">
</form>

<h5>Please enter your e-mail below</h5>

<form name="mailForm">
    <label for="email">Email:</label>
    <input type="email" name="email" id="email">
</form>
    <form action="">
<label for="height">Your height:</label>
<input type="text" placeholder="in centimetres" name="personHeight" id="height" />
<br></br>
<input formaction="mailto:test@gmail.com" onclick="heightCheck();validateTextForm();validateMailForm();" type="submit" value="Submit all" id="submit" method="post" formtarget="_blank" />
<br></br>
<p id="mess"></p>
    </form>

JS ：

function validateTextForm() {
    var x = document.forms["textForm"]["fname"].value;
    if (x == null || x == "") {
        alert("First name must be filled out");
        return false;
    }
}

function validateMailForm() {
    var z = document.forms["mailForm"]["email"].value;
    var atpos = z.indexOf("@");
    var dotpos = z.lastIndexOf(".");
    if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= z.length) {
        alert("Not a valid e-mail address");
        return false;
    }
}

function heightCheck() {
    try {
        var x = document.getElementById("height").value; 
        if (x == "")   
        throw "enter your height"; 
        if (isNaN(x)) throw "not a number";
        if (x > 250)    
        throw "height is too high";
        if (x < 80)     
        throw "height is too low"; 
    } catch (err) {
        var y = document.getElementById("mess");
        y.innerHTML = "Error: " + err + "."; 
    }
}

我希望它发生的事情如下：首先，它进行表单验证，但之后如果正确，则提交。我试图在实际提交之前首先验证表单但没有任何成功。浏览时我发现它可以通过stopPropaganation，preventDefault或return false方法完成，但仍然不知道如何实现。我会代表那些帮助我的人。提前致谢！小提琴：然而在小提琴中它不能正常运行：http://jsfiddle.net/5T9sJ/

Answer 1

您需要根据我的版本更改代码：

...
<input formaction="mailto:test@gmail.com" type="submit" value="Submit all" id="submit" method="post" formtarget="_blank" />
...

然后使processValidate方法将所有其他验证包装到其中：

$(document).ready(function () {
    $('input#submit').click(function (e) {
        e.preventDefault();
        validateTextForm();
        validateMailForm();
        heightCheck();
    });

    function validateTextForm() {
        var x = document.forms["textForm"]["fname"].value;
        if (x === null || x === "") {
            alert("First name must be filled out");
            return false;
        }
    }

    function validateMailForm() {
        var z = document.forms["mailForm"]["email"].value;
        var atpos = z.indexOf("@");
        var dotpos = z.lastIndexOf(".");
        if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= z.length) {
            alert("Not a valid e-mail address");
            return false;
        }
    }

    function heightCheck() {
        try {
            var x = document.getElementById("height").value;
            if (x === "") throw "enter your height";
            if (isNaN(x)) throw "not a number";
            if (x > 250) throw "height is too high";
            if (x < 80) throw "height is too low";
        } catch (err) {
            var y = document.getElementById("mess");
            y.innerHTML = "Error: " + err + ".";
        }
    }

});

说明：

您在提交输入类型上绑定了多个方法，因此点击它会始终调用表单提交。

我为此操作添加了jQuery click处理程序，以防止提交按钮的默认操作。

我认为e.preventDefault()最适合这里。

工作演示： http://jsfiddle.net/rbegf/

在提交之前首先检查错误

1 个答案: