Question

我想要创建一个表单并想要验证用户输入，如果用户填写两个文本框我想显示一个警告框，如果用户填写一个并留空另一个我想显示一个警告框让他们知道他们错过了一个盒子。我如何使用JavaScript，请帮助。

我想要两个文本框，如果用户填写两个文本框并单击输入我想显示一个警告框告诉他们＆＃34;正确＆＃34;，如果用户填写一个而另一个空，我想显示一个警告框告诉他们这是＆＃34;不正确＆＃34;。我怎么做，帮助。

 <form action="" method="post">
  <input type="text" name="text1" placeholder="Text 1">
</br>
  <input type="text" name="text2" placeholder="Text 2">
</br>
  <input type="submit" value="Enter">
</form>

Answer 1

您对哪种验证感兴趣？你可以用我的朋友javascript做一切:)。

这是纯粹的javascript。为简单起见，我将html和js保存在一个文件中。如下所示，我还为表单添加了一个名称，以防您有多个表单。

<html>
    <body>

    <form name="LovelyForm" action="" method="post"> 
      <input type="text" name="text1" placeholder="Text 1"> </br> 
      <input type="text" name="text2" placeholder="Text 2"> </br> 
      <input type="submit" onclick="validateForm()" value="Enter">
    </form>

    <script type="text/javascript">
        function validateForm() {

            var x = document.forms["LovelyForm"]["text1"].value;
            var y = document.forms["LovelyForm"]["text2"].value;
            if (x == null || x == "" || y == null || y == "") {
                alert("Fill me in");
                return false;
            }else{
                alert("Good");
                return true;
            }
        }

    </script>
    </body>
</html>

Answer 2

这是一个应该与IE一起工作的JSFiddle＆lt; 9：http://jsfiddle.net/ayr7yov7/1/

如果输入不是form.elements['one'].value类型，则

text可能会导致问题。

代码：

<script>
    function trim(str) {
      if(!str) return '';

      return str.replace(/\s{2,}/g, '');
    }

    function valid(form) {
        var v1 = trim(form.elements['one'].value),
            v2 = trim(form.elements['two'].value);

        if (v1 === '') {
            alert('one');
            return false;
        }

        if (v2 === '') {
            alert('two');
            return false;
        }

        alert('full!')
        return true;
    }

</script>
<form action="/echo/json/" onsubmit="return valid(this)">
    <input name="one" type="text" />
    <input name="two" type="text" />
    <input type="submit" />
</form>

Answer 3

使用javascript进行验证是最灵活的方式，适用于所有浏览器，如果您学习JQuery，您将能够更少地改善用户体验限制。

如果你不想使用javascript然后在Html 5中使用新改进的输入验证选项，它们将适用于大多数浏览器而不会破坏没有Html5支持的浏览器。

这里：我看到的最佳实践：）

仅在客户端验证最必要的内容。
除非确实是强制性的，否则请避免强制性输入。
如果你绝对不需要，请不要拒绝空格，连字符，逗号，圆点等。人们喜欢剪贴。您可以随时在服务器端清理。
如果不需要，请不要限制输入长度/尺寸。再次，人们喜欢剪切和粘贴，很多时候输入只是因为它包含空格而很长。
最重要的是。您必须始终在服务器端验证，以确保您的数据不会被破坏。客户端验证只是为了改善用户体验而不是替代。

Answer 4

第一步是给JavaScript一个简单的方法来引用DOM中的元素。通常，最简单的方法是为每个元素提供引用唯一ID。

<input id="num1" />
<input id="num2" />

然后，JavaScript可以使用文档对象的getElementById()方法访问输入（＆＃34; D＆＃34;来自DOM）。

var i1 = document.getElementById("num1");
var i2 = document.getElementById("num1");

现在，i1和i2包含对各自输入对象的引用（＆＃34; O＆＃34;来自DOM）。每个表单元素对象都有一个value属性，该属性包含它输入的当前值。

var val1 = i1.value;
var val2 = i2.value;

现在var1和var2包含输入的值。您所要做的就是检查并查看它们是否都具有不为空的值。

if(
    // if the first value does not equal an empty string ""..
    val1 != ""
    // and the second value does not equal an empty string ""..
    && val1 != ""
)
// then alert 'correct'
alert("correct");
// or else, alert 'incorrect'
else alert('incorrect');

现在，您可以将其放入函数中，并在将表单附加到event handler时提交表单。如果您刚开始使用onsubmit属性最简单，该属性将获取函数的名称，并在提交表单时调用该函数。

<form action="#" onsubmit="validate()">
    <input id="num1" />
    <input id="num2" />
    <input type="submit" />
</form>

<script>
    function validate(){
        var i1 = document.getElementById("num1");
        var i2 = document.getElementById("num1");
        var val1 = i1.value;
        var val2 = i2.value;
        if(val1 != "" && val2 != "") alert("correct");
        else alert("incorrect");
    }
</script>

如何使用JavaScript验证表单

4 个答案: