强制文本框或变量的长度答案

【问题标题】：Forcing length of txt box or variable强制文本框或变量的长度
【发布时间】：2019-07-31 12:42:15
【问题描述】：

我有一些 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>

我已经解决了这个问题。最后，我决定在 ajax 代码之外使用 JavaScript 内部的函数。这是一个更优雅的解决方案，imo，将确保用户知道需要输入哪些数据（并使用日期选择器日历）。

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();      
  }
}

【问题讨论】：

然后请在 devtools 中检查是否发送了 post 请求，如果是，响应是什么，可能是 BE 相关问题。另外，尝试debugging/console.log 来检查val1_lenght的值
你把我弄丢了。是相关的？
与 BE（后端）相关我的意思是，如果对 ,axajfile.php 进行 ajax 调用并且您在 DB 中看不到预期结果，那么您处理发送的数据的方式有问题
好的，谢谢。不要以为是这样。在我尝试添加代码来测试字符串长度之前，它完美无缺。稍后我会做一些实验。
我查看了 devtools 并没有发送帖子。错误始终是：ReferenceError: val1_length 未定义。如果我在 html2canvas(document.body).then(function(canvas) { ( ut 在这里它首先执行画布代码。或者如果我把它放在 function screenshot(){ 之后它停止死而不执行任何代码。

标签： javascript if-statement msgbox

【解决方案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 属性，因此输入的字符数不会超过设置的字符数。

【讨论】：

感谢 Adam，我将 maxlenght 和 minlength 设置为 21，但它们仍然可以输入更少的字符（但框会变成红色，所以会保持原位）。所以他们仍然可以将格式不正确（字符太少）的图像上传到服务器。

【解决方案2】：

这很简单。首先找到 val1 变量的长度

>> var val1_length = val1.value.length;

然后使用 if 条件检查长度是否为 21

 if(val1_length != 21)
        {
            alert("please enter 21 character ....");
        }
    else
    {
        // Your code if value contain 21 charcter
    }

【讨论】：

谢谢纳雷什。我尝试过并更新了我的原始帖子，但对我不起作用。可能是我的错，把东西放错了地方。

【解决方案3】：

function ValidateDate()
{
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();      
  }
}

【讨论】：