如何根据下拉更改 TextArea 验证答案

【问题标题】：How to change TextArea validation based on dropdown如何根据下拉更改 TextArea 验证
【发布时间】：2020-12-18 00:13:09
【问题描述】：

我需要根据以下场景对 TextArea 进行验证：

如果在下拉列表中选择了 Mobile，则只能在 TextArea 中输入数字。
如果在下拉列表中选择了电子邮件，我们可以在 TextArea 中输入任何字符。

image snippet here

下面是我实现上述场景的代码。我已经根据文本区域的类名进行了验证。当我更改下拉值时，我正在更改文本区域的类名。

<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script>
      function changeNotifyTypeValue(textboxControl)
      {
          textboxControl.value="";
          if (textboxControl.className=="mobileValidation")
            textboxControl.className="emailValidation";
          else
           textboxControl.className="mobileValidation";
      }
      
      $(function() {
          $('.numberValidation').keyup(function() {
          this.value = this.value.replace(/[^0-9,][.]?/g, '');
          });
          $('.emailValidation').keyup(function() {
          //email validation
          });
      });
      </script>
   </head>
   <body>
      <table border="1" class="display"
         id="NotificationTable">
         <thead>
            <tr style="background: #0086cd; color: #fff;">
               <th>Update NotifyType</th>
               <th>Update Address</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>
                  <select
                     id="notifyTypeID0"
                     class="form-control" name="notifyType0" onchange="changeNotifyTypeValue(updateAddress0)" >
                     <option selected value=EMAIL>EMAIL</option>
                     <option value="mobile">Mobile</option>
                  </select>
               </td>
               <td>
                  <textarea name="address0" id="updateAddress0"
                     class="emailValidation">abc@gmail.com</textarea>
               </td>
            </tr>
            <tr>
               <td>
                  <select id="notifyTypeID1" class="form-control" name="notifyType1" onchange="changeNotifyTypeValue(updateAddress1)" >
                     <option value="EMAIL">EMAIL</option>
                     <option selected value="mobile">Mobile</option>
                  </select>
               </td>
               <td> <textarea name="address1" id="updateAddress1" class="numberValidation">9999999999</textarea> </td>
            </tr>
         </tbody>
      </table>
   </body>
</html>

这是我的疑问

我可以通过检查元素看到，当我更改下拉值时，文本区域的类名正在运行时更改。但是，仍然基于文本区域的旧类名执行验证。

【问题讨论】：

标签： javascript html jquery validation

【解决方案1】：

您的<script> 存在一些问题，您正尝试在 jquery 中使用纯 javascript。一旦尝试这个脚本并检查

$(document).ready(function(){
        $('textarea').keyup(function(){
            if($(this).hasClass("mobileValidation")){
                var cv = $(this).val();
                $(this).val(cv.replace(/[^0-9,][.]?/g, ''));
            } else if($(this).hasClass("emailValidation")){
                //your email validation code;
            }
        });
    });

【讨论】：

【解决方案2】：

代码被 javascript 和 jQuery 弄乱了。我只提供 javascript 解决方案。而且类也不匹配（mobileValidation 和 numberValidation）。

这是运行代码。您可以运行代码 sn -p 并检查。

<html>

  <head>
    <script>
      function changeNotifyTypeValue(textboxControl) {
        textboxControl.value = '';
        if (textboxControl.className == "mobileValidation")
          textboxControl.className = "emailValidation";
        else
          textboxControl.className = "mobileValidation";
      }

      function validate(textboxControl) {
        console.log(textboxControl.className);
        if (textboxControl.className == "emailValidation") {
          console.log('email');
        } else {
          console.log('number');
          textboxControl.value = textboxControl.value.replace(/[^0-9,][.]?/g, '');
        }
      }
    </script>
  </head>

  <body>
    <table border="1" class="display" id="NotificationTable">
      <thead>
        <tr style="background: #0086cd; color: #fff;">
          <th>Update NotifyType</th>
          <th>Update Address</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <select id="notifyTypeID0" class="form-control" name="notifyType0" onchange="changeNotifyTypeValue(updateAddress0)">
              <option selected value=EMAIL>EMAIL</option>
              <option value="mobile">Mobile</option>
            </select>
          </td>
          <td>
            <textarea name="address0" id="updateAddress0" class="emailValidation" onkeyup="validate(updateAddress0)">abc@gmail.com</textarea>
          </td>
        </tr>
        <tr>
          <td>
            <select id=" notifyTypeID1" class="form-control" name="notifyType1" onchange="changeNotifyTypeValue(updateAddress1)">
              <option value="EMAIL">EMAIL</option>
              <option selected value="mobile">Mobile</option>
            </select>
          </td>
          <td> <textarea name="address1" id="updateAddress1" class="mobileValidation" onkeyup="validate(updateAddress1)">9999999999</textarea> </td>
        </tr>
      </tbody>
    </table>
  </body>

</html>

【讨论】：