کد HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
document.getElementById("txtUserName").onkeyup = function () {
var userName = document.getElementById("txtUserName").value
if (userName.length >= 3) {
jQuery.ajax(
{
url: 'RegisterationService.asmx/UserNameExists',
method: 'post',
data: { userName: userName },
dataType: 'json',
success: function (data) {
var divElement = document.getElementById('label')
if (data.UserNameInUse) {
document.getElementById('label').innerHTML = userName + ' is in Used'
document.getElementById('label').style.color = 'red'
document.getElementById("txtUserName").style.borderColor = "red"
}
else {
document.getElementById('label').innerHTML = userName + ' is available'
document.getElementById('label').style.color = 'green'
}
},
error: function (err) {
alert(err);
}
});
}
}
});
</script>
</head>
<body>
<input id="txtUserName" style="width:50%" type="text" />
<br />
<div style="height:30px; width:50%;">
<label id="label"></label>
</div>
</body>
</html>