表单验证警报

时间：2017-10-15 15:29:42

标签： javascript

我已经编写了表单验证，但如果我们填写所有字段错误，则警告不会针对所有字段。 请检查我的文件并告诉我该怎么做。 我的意思是，如果我们想在一次错误后看到错误，那么当我将错误填写错误时，我们应该在代码中执行什么操作，只是错误地填写错误的第一个字段。

＆＃13;
＆＃13; 
<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Form Validation</title>
	</head>

	<body>
		<script>
			function formvalid()
			{
				var a=document.forms["myform"]["firstname"].value;
				if (a.length<3)
					{
						alert("Write your name correctly");
						return false;
					}
				var a=document.forms["myform"]["firstname"].value;
				if(a==null||a=="")
					{
						alert("please fill the feald");
						return false;
					}
				
				var b=document.forms["myform"]["lastname"].value;
				if (b.length<2)
					{
						alert("Write your last name correctly");
						return false;
					}
				var b=document.forms["myform"]["lastname"].value;
				if(b==null||b=="")
					{
						alert("please fill the feald");
						return false;
					}
				var c=document.forms["myform"]["email"].value;
				if(c==null||c=="")
					{
						alert("please fill the feald");
						return false;
					}
				var c=document.forms["myform"]["email"].value;
				var at= c.indexOf("@");
				var dot=c.lastIndexOf(".");
				var dot2=c.indexOf(".");
				if(at<1||dot<2||dot+2>=c.length||at+2>=dot2||at+3>=dot2)
					{
						alert("Write your email correctly");
						return false;
					}
				var d=document.forms["myform"]["phone"].value;
				if(d==null||d=="")
					{
						alert("please fill the feald");
						return false;
					}
				var d=document.forms["myform"]["phone"].value;
				if(d.length>11)
					{
						alert("Write your phone number correctly");
						return false;
					}
			}
		</script>
		
		<form method="post" action="" onSubmit="formvalid()" name="myform">
			<input type="text" name="firstname" id="firstname" placeholder="name">
			<br>
			<input type="text" name="lastname" id="lastname" placeholder="lastname">
			<br>
			<input type="text" name="email" id="email" placeholder="email">
			<br>
			<input type="text" name="phone" id="phone" placeholder="mobile">
			<br>
			<input type="submit" name="btn" id="btn" value="click">
		</form>
	</body>
</html>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：1)

如果您希望显示所有警报，则不应return if块内的任何内容，return停止执行，之后的代码将不会执行。这是没有return的代码，它工作正常：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Form Validation</title>
	</head>

	<body>
		<script>
			function formvalid()
			{
				var a=document.forms["myform"]["firstname"].value;
				if (a.length<3)
					{
						alert("Write your name correctly");
					}
				var a=document.forms["myform"]["firstname"].value;
				if(a==null||a=="")
					{
						alert("please fill the feald");
					}
				
				var b=document.forms["myform"]["lastname"].value;
				if (b.length<2)
					{
						alert("Write your last name correctly");
					}
				var b=document.forms["myform"]["lastname"].value;
				if(b==null||b=="")
					{
						alert("please fill the feald");
					}
				var c=document.forms["myform"]["email"].value;
				if(c==null||c=="")
					{
						alert("please fill the feald");
					}
				var c=document.forms["myform"]["email"].value;
				var at= c.indexOf("@");
				var dot=c.lastIndexOf(".");
				var dot2=c.indexOf(".");
				if(at<1||dot<2||dot+2>=c.length||at+2>=dot2||at+3>=dot2)
					{
						alert("Write your email correctly");
					}
				var d=document.forms["myform"]["phone"].value;
				if(d==null||d=="")
					{
						alert("please fill the feald");
					}
				var d=document.forms["myform"]["phone"].value;
				if(d.length>11)
					{
						alert("Write your phone number correctly");
					}
			}
		</script>
		
		<form method="post" action="" onSubmit="formvalid()" name="myform">
			<input type="text" name="firstname" id="firstname" placeholder="name">
			<br>
			<input type="text" name="lastname" id="lastname" placeholder="lastname">
			<br>
			<input type="text" name="email" id="email" placeholder="email">
			<br>
			<input type="text" name="phone" id="phone" placeholder="mobile">
			<br>
			<input type="submit" name="btn" id="btn" value="click">
		</form>
	</body>
</html>

答案 1 :(得分：0)

嗯，你的功能几乎没问题，但你没有正确使用条件。

我已对其进行了修改和测试，它可以完美地满足您的要求。

只需将您的功能替换为如下所示：

function formvalid()
{
    var a=document.getElementById("firstname").value;
    var b=document.getElementById("lastname").value;
    var c=document.getElementById("email").value;
    var at= c.indexOf("@");
    var dot=c.lastIndexOf(".");
    var dot2=c.indexOf(".");
    var d=document.getElementById("phone").value;

    if (a.length > 0 && a.length < 3)
    {
        alert("Write your name correctly");
        return false;
    }

    else if(a==null||a=="")
    {
        alert("please fill the field");
        return false;
    }

    else if (b.length > 0 && b.length<2)
    {
        alert("Write your last name correctly");
        return false;
    }

    else if(b==null||b=="")
    {
        alert("please fill the field");
        return false;
    }

    else if(c==null||c=="")
    {
        alert("please fill the field");
        return false;
    }


    else if(at<1||dot<2||dot+2>=c.length||at+2>=dot2||at+3>=dot2)
    {
        alert("Write your email correctly");
        return false;
    }

    else if(d==null||d=="")
    {
        alert("please fill the field");
        return false;
    }

    else if(d.length>11)
    {
        alert("Write your phone number correctly");
        return false;
    }
}

答案 2 :(得分：0)

首先，从每个条件中删除返回，以便其余条件也可以执行。 其次，改变条件的结构，使每个字段只能交叉检查一次。

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Form Validation</title>
    </head>

    <body>
        <script>
            function formvalid()
            {
                var a=document.forms["myform"]["firstname"].value;
                if (a.length<3){
                    if(a==null||a==""){  
                        alert("please fill the feald");
                    }
                    else
                        alert("Write your name correctly");     
                }

                var b=document.forms["myform"]["lastname"].value;
                if (b.length<2){
                    if(b==null||b==""){
                        alert("please fill the feald");
                    }
                    else
                        alert("Write your last name correctly");
                }
                var c=document.forms["myform"]["email"].value;
                var at= c.indexOf("@");
                var dot=c.lastIndexOf(".");
                var dot2=c.indexOf(".");
                if(at<1||dot<2||dot+2>=c.length||at+2>=dot2||at+3>=dot2){
                    if(c==null||c==""){
                        alert("please fill the feald");
                    }
                    else
                        alert("Write your email correctly");
                }
                var d=document.forms["myform"]["phone"].value;
                if(d.length>11){
                    if(d==null||d==""){
                        alert("please fill the feald");
                    }
                    else
                        alert("Write your phone number correctly");
                }
            }
        </script>

        <form method="post" action="" onSubmit="formvalid()" name="myform">
            <input type="text" name="firstname" id="firstname" placeholder="name">
            <br>
            <input type="text" name="lastname" id="lastname" placeholder="lastname">
            <br>
            <input type="text" name="email" id="email" placeholder="email">
            <br>
            <input type="text" name="phone" id="phone" placeholder="mobile">
            <br>
            <input type="submit" name="btn" id="btn" value="click">
        </form>
    </body>
</html>
相关问题
最新问题