Question

如何用Javascript编写脚本，该脚本将测量表单上输入文本字段中的字符数，如果小于2，则在您尝试发送表单时显示警报，如果更多则显示警报等于或等于2，将通过单击“发送”来发送表格吗？

Answer 1

有很多方法可以做到这一点，包括：

1-向您的pattern元素添加input属性：

<form>
  <input type="text" pattern=".{2,}">
  <input type="submit" value="Submit">
</form>

在这种情况下，如果输入无效，则表单将不会提交并显示浏览器的默认错误消息。

正则表达式.{2,}匹配所有长度2以上的字符串。

2-通过Javascript检查输入值的长度，并采取相应措施：

function validate() {
  var text = document.getElementById("input").value;
  if(text.length < 2) {
    //display an alert or whatever
    console.log("invalid");
    return false; //form will not submit
  }
  return true; //form will submit
}

<form onsubmit = "return validate();">
  <input type="text" id="input">
  <input type="submit" value="Submit">
</form>

使用此方法，一旦单击表单的submit按钮，函数validate()将执行。如果函数返回true，则将提交表单。如果返回false，则不会提交表单。

方法1更快，而方法2更可定制/灵活。

Answer 2

在表单内的提交按钮中，考虑执行以下操作：

<button onclick="checkValidity()">Submit</button>

并在html正文内的<script>标签内添加以下代码：

function checkValidity(){
     var val = document.getElementById('inputfield').value; //I'm assuming the id of the input text field to be inputfield
    if(val.length<2) window.alert('too short');

}

Answer 3

另一种简单方法：
HTML：

    <form id="form1">
        <input id="input2" type="text" placeholder="your text here"></input>
        <button type="submit">submit</button>
    </form>

JS：

 $('#form1').submit(function(event){
        if($('#input2').val().length < 2){
            event.preventDefault();
            alert('ur input text will be more than 1 character');
        }
    });

别忘了在代码之前导入jQuery库：

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>

JS量词并采取行动

3 个答案: