javascript - 强制文本框或变量的长度

Question

我有一些 JavaScript 代码。我想进行一些错误检查，但不知道从哪里开始。我希望，如果 val1 的内容长度不完全是 21 个字符，则停止脚本，或者更好地给出一个消息框来说明这一事实。或者也许可以强制输入框包含 21 个字符？抱歉，如果这是一个愚蠢的问题，但我对此很陌生并且仍在学习。

我将输入框的大小设置为 21，但这只会增加尺寸，因此仍然可以输入比这更多或更少的字符。我想也许某种 if 语句可以做到这一点，但不知道如何做到这一点，而且我的尝试没有成功。

<script type='text/javascript'>
function screenshot(){
  html2canvas(document.body).then(function(canvas) {

    // Get base64URL
    var base64URL = canvas.toDataURL('image/jpeg').replace('image/jpeg', 'image/octet-stream');
    var val1 = $('#datepicker').val();

    // AJAX request
    $.ajax({
       url: 'ajaxfile.php',
       type: 'post',
       //data: {image: base64URL, name: datepicker},
       data: {image: base64URL, datepicker: val1},
       success: function(data){
       console.log('Upload successfully');
       }
    });
  });
}
</script>

无论我尝试什么，它都会使脚本完全停止工作，即使 val1 是 21 个字符。

这是我在获得一些额外代码后尝试的方法(谢谢)。但不幸的是它对我不起作用(没有消息并且脚本不会将图像保存到服务器)。

<script type='text/javascript'>
function screenshot(){
  html2canvas(document.body).then(function(canvas) {

    // Get base64URL
    var base64URL = canvas.toDataURL('image/jpeg').replace('image/jpeg', 'image/octet-stream');
    var val1 = $('#datepicker').val();
    var val1_length = val1.length;    

    if(val1_length != 21)
        {
            alert("please enter 21 character ....");
        }
    else
    {

    // AJAX request
    $.ajax({
       url: 'ajaxfile.php',
       type: 'post',
       //data: {image: base64URL, name: datepicker},
       data: {image: base64URL, datepicker: val1},
       success: function(data){
       console.log('Upload successfully');
       }
    });
  });
}
}
</script>

我已经解决了这个问题。最后我决定在 JavaScript 中使用一个函数，而不是在 ajax 代码之外。在我看来，这是一个更加优雅的解决方案，并将确保用户知道需要输入哪些数据(以及使用日期选择器日历)。

function ValidateDate()
{
var datepicker = document.getElementById('datepicker');
var datepicker = document.getElementById('datepicker').value;
var FullDate = 21;   

  if (datepicker.length !== FullDate) {
  {
    alert("The Date Must Have a Start *and* End Date. Use the Calendar to Ensure this. Do Not enter any other text in the Box!");
    document.getElementById("datepicker").focus();
    return false;
  }
  } else {
    screenshot();      
  }
}

Answer 1

<小时/>

您缺少的是对 val1 值的简单检查，因此脚本会完全执行。这就是您在 JS 中寻找的内容:

var val1 = $('#datepicker').val();

if (val1.length !== 21) {
  // AJAX request
  $.ajax({
   url: 'ajaxfile.php',
   type: 'post',
   //data: {image: base64URL, name: datepicker},
   data: {image: base64URL, datepicker: val1},
   success: function(data){
   console.log('Upload successfully');
   }
})}

另一种方法是，如果#datepicker输入的类型为text，您可以在此元素上设置maxlength属性，所以这是不可能的输入比设置更多的字符。