Fatal编程技术网
  • javascript/
  • Javascript 字段值无效时提交表单

Javascript 字段值无效时提交表单

javascript jquery html css

Javascript 字段值无效时提交表单,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我编写了一个表单，只需输入一个用户的手机号码，然后验证以0开头的表单。验证工作正常，但问题是，当我提交表单时，它不会检查输入框的值，即使字段无效也会提交表单。我想检查字段的验证，当字段有效时，就可以提交 这是我的密码： $（'#mobili'）.focusout（函数（）{ $（'#mobili'）.filter（函数（）{ var mobi=$（'#mobili'）.val（）； var mobiback=$（'mobili'）； var mobilReg=/^（[0][0-9]{10}）$

我编写了一个表单，只需输入一个用户的手机号码，然后验证以0开头的表单。验证工作正常，但问题是，当我提交表单时，它不会检查输入框的值，即使字段无效也会提交表单。我想检查字段的验证，当字段有效时，就可以提交

这是我的密码：

$（'#mobili'）.focusout（函数（）{
$（'#mobili'）.filter（函数（）{
var mobi=$（'#mobili'）.val（）；
var mobiback=$（'mobili'）；
var mobilReg=/^（[0][0-9]{10}）$/；
如果（！移动注册测试（mobi））{
$（“#error nwl”）.css（'color'，'#ff6666'）；
$（“#error nwl”）.text（“输入有效的手机号码（以0开头）”；
}否则{
$（“#error nwl”）.css（'color'，'#66cc66'）；
$（“#错误nwl”）.text（“确定”）；
}
})
});
$（“.newslide”）.submit（函数（e）{
var url=“page2.html”；
警报（“已提交”）；
$.ajax({
类型：“POST”，
url:url，
数据：$（“.newslide”）.serialize（），
成功：功能（数据）{
$（“.errori”）.html（数据），
警报（“已提交”）；
}
});
e、 预防默认值（）；
});




发送

希望这能奏效


$('#mobili').focusout(function() {
   $('#mobili').filter(function() {
   var mobi = $('#mobili').val();
   var mobiback = $('#mobili');
   var mobilReg = /^([0][0-9]{10})$/;
   if (!mobilReg.test(mobi)) {
      $("#error-nwl").css('color', '#ff6666');
      $("#error-nwl").text("Enter valid mobile number (begin with 0)");
   } else {
      $("#error-nwl").css('color', '#66cc66');
      $("#error-nwl").text("ok");
   }
 })
});

$(".newslside").submit(function(e) {

     var mobi = $('#mobili').val();
     var mobiback = $('#mobili');
     var mobilReg = /^([0][0-9]{10})$/;
     if (!mobilReg.test(mobi)) {
         $("#error-nwl").css('color', '#ff6666');
         $("#error-nwl").text("Enter valid mobile number (begin with 0)");
         return false;
     }else{
         var url = "page2.html";
         alert("Submitted");
         $.ajax({
            type: "POST",
            url: url,
            data: $(".newslside").serialize(),
            success: function(data) {
               $(".errori").html(data),
               alert("Submitted");
            }
         });
    }
       e.preventDefault();
 });


希望这能奏效


$('#mobili').focusout(function() {
   $('#mobili').filter(function() {
   var mobi = $('#mobili').val();
   var mobiback = $('#mobili');
   var mobilReg = /^([0][0-9]{10})$/;
   if (!mobilReg.test(mobi)) {
      $("#error-nwl").css('color', '#ff6666');
      $("#error-nwl").text("Enter valid mobile number (begin with 0)");
   } else {
      $("#error-nwl").css('color', '#66cc66');
      $("#error-nwl").text("ok");
   }
 })
});

$(".newslside").submit(function(e) {

     var mobi = $('#mobili').val();
     var mobiback = $('#mobili');
     var mobilReg = /^([0][0-9]{10})$/;
     if (!mobilReg.test(mobi)) {
         $("#error-nwl").css('color', '#ff6666');
         $("#error-nwl").text("Enter valid mobile number (begin with 0)");
         return false;
     }else{
         var url = "page2.html";
         alert("Submitted");
         $.ajax({
            type: "POST",
            url: url,
            data: $(".newslside").serialize(),
            success: function(data) {
               $(".errori").html(data),
               alert("Submitted");
            }
         });
    }
       e.preventDefault();
 });


试试这个-



$（文档）.ready（函数（）{
$（“.newslide”）.submit（函数（e）{var url=“page2.html”；
警报（“已提交”）；
$.ajax（{type:“POST”，url:url，数据：$（“.newslide”）.serialize（），
成功：函数（数据）{$（“.errori”）.html（数据），
警报（“已提交”）；
}}）；e.preventDefault（）；
}); 
$（'#mobili'）.filter（函数（）{
var mobi=$（'#mobili'）.val（）；
var mobiback=$（'mobili'）；
var mobilReg=/^（[0][0-9]{10}）$/；
如果（！移动注册测试（mobi））{
$（“#error nwl”）.css（'color'，'#ff6666'）；
$（“#error nwl”）.text（“输入有效的手机号码（以0开头）”；
}否则{
$（“#error nwl”）.css（'color'，'#66cc66'）；
$（“#错误nwl”）.text（“确定”）；
}
})
});





试试这个-



$（文档）.ready（函数（）{
$（“.newslide”）.submit（函数（e）{var url=“page2.html”；
警报（“已提交”）；
$.ajax（{type:“POST”，url:url，数据：$（“.newslide”）.serialize（），
成功：函数（数据）{$（“.errori”）.html（数据），
警报（“已提交”）；
}}）；e.preventDefault（）；
}); 
$（'#mobili'）.filter（函数（）{
var mobi=$（'#mobili'）.val（）；
var mobiback=$（'mobili'）；
var mobilReg=/^（[0][0-9]{10}）$/；
如果（！移动注册测试（mobi））{
$（“#error nwl”）.css（'color'，'#ff6666'）；
$（“#error nwl”）.text（“输入有效的手机号码（以0开头）”；
}否则{
$（“#error nwl”）.css（'color'，'#66cc66'）；
$（“#错误nwl”）.text（“确定”）；
}
})
});





我使用了HTML的
onsubmit
属性，这很有效，希望它适合您


<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script type="text/javascript">
    function validate() {
        var mobi = $('#mobili').val();
        var mobilReg = /^([0][0-9]{10})$/;
        if (!mobilReg.test(mobi)) {
            $("#error-nwl").css('color', '#ff6666');
            $("#error-nwl").text("Enter valid mobile number (begin with 0)");
            return false;
        } else {
            $("#error-nwl").css('color', '#66cc66');
            $("#error-nwl").text("ok");
            var url = "page2.html";
            alert("Submitted");
            $.ajax({
                type: "POST",
                url: url,
                data: $(".newslside").serialize(),
                success: function(data) {
                    $(".errori").html(data),
                    alert("Submitted");
                }
            });
            e.preventDefault();
        }
    }
    </script>
</head>
<body>
    <div id="error-nwl"></div>
    <form action="" method="post" name="myForm" class="newslside"  onsubmit="return(validate());">
        <input type="text" placeholder="Mobile" name="mobile" id="mobili" maxlength="11" required />
        <br/>
        <button class="submitnews" type="submit">send</button>
    </form>
</body>
</html>




函数验证（）{
var mobi=$（'#mobili'）.val（）；
var mobilReg=/^（[0][0-9]{10}）$/；
如果（！移动注册测试（mobi））{
$（“#error nwl”）.css（'color'，'#ff6666'）；
$（“#error nwl”）.text（“输入有效的手机号码（以0开头）”；
返回false；
}否则{
$（“#error nwl”）.css（'color'，'#66cc66'）；
$（“#错误nwl”）.text（“确定”）；
var url=“page2.html”；
警报（“已提交”）；
$.ajax({
类型：“POST”，
url:url，
数据：$（“.newslide”）.serialize（），
成功：功能（数据）{
$（“.errori”）.html（数据），
警报（“已提交”）；
}
});
e、 预防默认值（）；
}
}


发送

我使用了HTML的
onsubmit
属性，这很有效，希望它适合您


<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script type="text/javascript">
    function validate() {
        var mobi = $('#mobili').val();
        var mobilReg = /^([0][0-9]{10})$/;
        if (!mobilReg.test(mobi)) {
            $("#error-nwl").css('color', '#ff6666');
            $("#error-nwl").text("Enter valid mobile number (begin with 0)");
            return false;
        } else {
            $("#error-nwl").css('color', '#66cc66');
            $("#error-nwl").text("ok");
            var url = "page2.html";
            alert("Submitted");
            $.ajax({
                type: "POST",
                url: url,
                data: $(".newslside").serialize(),
                success: function(data) {
                    $(".errori").html(data),
                    alert("Submitted");
                }
            });
            e.preventDefault();
        }
    }
    </script>
</head>
<body>
    <div id="error-nwl"></div>
    <form action="" method="post" name="myForm" class="newslside"  onsubmit="return(validate());">
        <input type="text" placeholder="Mobile" name="mobile" id="mobili" maxlength="11" required />
        <br/>
        <button class="submitnews" type="submit">send</button>
    </form>
</body>
</html>




函数验证（）{
var mobi=$（'#mobili'）.val（）；
var mobilReg=/^（[0][0-9]{10}）$/；
如果（！移动注册测试（mobi））{
$（“#error nwl”）.css（'color'，'#ff6666'）；
$（“#error nwl”）.text（“输入有效的手机号码（以0开头）”；
返回false；
}否则{
$（“#error nwl”）.css（'color'，'#66cc66'）；
$（“#错误nwl”）.text（“确定”）；
var url=“page2.html”；
警报（“已提交”）；
$.ajax({
类型：“POST”，
url:url，
数据：$（“.newslide”）.serialize（），
成功：功能（数据）{
$（“.errori”）.html（数据），
警报（“已提交”）；
}
});
e、 预防默认值（）；
}
}


发送




发送
var-valid=false；
函数focusout（）
{
$（'#mobili'）.focusout（函数（）{
$（'#mobili'）.filter（函数（）{
var mobi=$（'#mobili'）.val（）；
var mobiback=$（'mobili'）；
var mobilReg=/^（[0][0-9]{10}）$/；
如果（！移动注册测试（mobi））{
$（“#error nwl”）.css（'color'，'#ff6666'）；
$（“#error nwl”）.text（“输入有效的手机号码（以0开头）”；
有效=错误；
}否则{
$（“#error nwl”）.css（'color'，'#66cc66'）；
$（“#错误nwl”）.text（“确定”）；
有效=真；
}
})
});
}
focusout（）；
$（“.newslide”）.submit（函数（e）{
focusout（）；
如果（！有效）
{
返回false；
}
var url=“page2.html”；
警报（“已提交”）；