我需要根据以下场景对TextArea进行验证：
- 如果在下拉列表中选择了Mobile，则在TextArea中只允许输入数字
- 如果在下拉列表中选择了电子邮件，我们可以在文本区域中输入任何字符
此处的图像片段
下面是我实现上述场景的代码。我已经根据Text Area的类名进行了验证。当我更改下拉列表值时，我正在更改Text Area的类名。
<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>
这是我的疑问
我可以通过inspect元素看到，当我更改下拉值时，文本Area的类名在运行时被更改。但是，验证仍然是基于文本Area的旧类名执行的。
您的<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;
}
});
});
代码被javascript和jQuery搞砸了。我提供的只是javascript的解决方案。类也不匹配(mobileValidation和numberValidation(。
这是运行代码。您可以运行代码段并进行检查。
<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>