如何根据下拉更改 TextArea 验证
Posted
技术标签:
【中文标题】如何根据下拉更改 TextArea 验证【英文标题】：How to change TextArea validation based on dropdown 【发布时间】：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>
这是我的疑问
我可以通过检查元素看到，当我更改下拉值时，文本区域的类名正在运行时更改。但是，仍然基于文本区域的旧类名执行验证。
【问题讨论】：
【参考方案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>【讨论】：
以上是关于如何根据下拉更改 TextArea 验证的主要内容，如果未能解决你的问题，请参考以下文章
如何根据它是不是是占位符来更改 textarea 文本的颜色？
如何在下拉列表更改时使用 jQuery 清除 TextBox