Question

我想以这样一种方式验证文本框：如果它是null或包含Characters，则单击SUBMIT按钮时不会调用php。等待有用的答案...这是我的代码：

<html>
    <head>
    <script>

        function myfunction(val)
        {
                var x=document.getElementById('ops');
                var y=document.getElementById('text');
                var z=document.getElementById('lb');
                //if(val='pepsi')
                {   
                    z.style.display = "block";
                    y.style.display = "Inline";
                }
    }
    function myfun2()
                {
                var c=document.getElementById("lb1");
                var b=document.getElementById("btn1");
                b.style.display="block";
                c.style.display="block"
                }
        </script>


    </head>
    <body>
    <form name='mform' >
    <select id="ops" onChange="myfunction(this.value);">
    <option>PIck item </option>
    <option value="pepsi">pepsi</option>
    <option value="coke">coke</option>
    <option value="fanta">Fanta</option>
    </select><br><br>
    <label id="lb" style="display:none" >Qty</label>
    <input type="text" name='qtytext' id="text" style="display:none" onFocus="myfun2()"/ >

    <label id="lb1" style="display:none" >.....Before proceeding, Make sure that form is properly filled.....</label>
    <input type="submit" name'btn' id='btn1' value="Submit" style='display:none' /> <br>

    </form>
    </body>
    </html>

Answer 1

喜欢这个？ https://jsfiddle.net/DIRTY_SMITH/rmgo51dd/1/

对于数字验证部分，我只是在文本字段中输入除了数字之外的任何内容。

<强>的javascript

 function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
    }
    function validate(){
    var text1 = document.getElementById('text').value;

    if (text1.length > 0){
        alert("working");
        return true;
    }

    alert("please enter something");
    return false;
    }
           function myfunction(val)
        {
                var x=document.getElementById('ops');
                var y=document.getElementById('text');
                var z=document.getElementById('lb');
                //if(val='pepsi')
                {   
                    z.style.display = "block";
                    y.style.display = "Inline";
                }
                }
                function myfun2()
                {
                var c=document.getElementById("lb1");
                var b=document.getElementById("btn1");
                b.style.display="block";
                c.style.display="block"
                }

<强> HTML

<input type="text" name='qtytext' id="text" style="display:none" onFocus="myfun2()"/ >

<label id="lb1" style="display:none" >.....Before proceeding, Make sure that form is properly filled.....</label>
<input type="submit" onClick="return validate()" name='btn' id='btn1' value="Submit" style='display:none' /> <br>

Answer 2

使用空检查和简单的正则表达式以及表单验证，您可以非常快速地完成此操作。

<script>  
function validator()
{
  var x = document.forms["mform"]["qtytext"].value;
  if (x == null || x == "") {
      alert("Please enter a valid number");
      return false;
  }
  var n = x.search(/\D/);
  if (n >= 0){
      alert("Please enter a valid number");
      return false;
  }
}                            
</script>

<form name='mform' onsubmit="return validator()">....</form>

http://embed.plnkr.co/oDVTxywRRAvHDjpUkxWL/preview

Answer 3

要验证表单以阻止提交（在您的情况下向PHP发送信息），需要在表单onsubmit事件上进行JavaScript回调。例如HTML：

<form name="myform" onsubmit="checkDirty();">

    <!-- Your form elements -->

   <button type="submit">Submit Form</button>
</form>

并在您的JavaScript中

function checkDirty(){
     //check your validation
     if(/* some condition */){
         return true; // submit the form
     }
     return false; // prevent submitting the form
}

如果您使用纯JavaScript，应该是这种方式，但我建议如果您可以使用jQuery解决方案很容易，因为有许多验证脚本可用，您可以使用其中一个{{ 3}} jQueryvalidation jQuery Validation Engine

一切顺利！

通过JavaScript验证文本框

3 个答案: