JavaScript实时校验用户输入

JavaScript实时校验用户输入

前阵子写了个javaweb的小项目，恰好用到了JavaScript的实时检验功能，所以今天分享给各位，不足之处请指正。

这里只介绍实时检验功能，所以样式就不关心了。

要实现这个功能并不难，主要是用到了html的文本框失去焦点事件的onkeyup事件。

登录表单

<form>
<table>
<tr>
<td colspan="2">会员登录</td>
</tr>
<tr>
<td>名称：</td>
<td><input type="text" name="username" id="username"><span id="checkUsername"></span></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="password" id="password"><span id="checkPassword"></span></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="登录"></td>
</tr>
</table>
</form>

这样一个简单的表单就写好了。

实时检验函数

首先得先写一个总的函数，获取到用户名以及密码信息。

window.onload = function() {

var username = document.getElementById("username");
var password = document.getElementById("password");
username.onkeyup = function() {
inprove("username");
}
password.onkeyup = function() {
inprove("password");
}
}

接下来就是对用户输入的信息进行校对，然后把校对后的信息反馈给用户。

function inprove(attr) {
var flag = document.getElementById(attr);

if (attr == "username") {
var Regex = /^1[34578]\d{9}$/; // 匹配用户输入的正则
if (!(flag.value.match(mobileRegex))) {
document.getElementById("checkUsername").innerText = "格式不对";
document.getElementById("checkUsername").style.color = "red";
} else {
document.getElementById("checkUsername").innerText = "格式正确";
document.getElementById("checkUsername").style.color = "red";
}
} else {
var regex = /^[0-9a-zA-Z]{6,16}$/g; // 匹配用户输入的正则
if (!(flag.value.match(regex))) {
document.getElementById("checkPassword").innerText = "格式不对";
document.getElementById("checkPassword").style.color = "red";
} else {
document.getElementById("checkPassword").innerText = "格式正确";
document.getElementById("checkPassword").style.color = "red";
}
}
}

如果用户不按要求输入则会出现以下提示



全部输入正确则显示正确



这就是实时校验的一种很简单的方法，希望对大家有用，有什么错误欢迎大家指正，我会努力改进的。

欢迎大家转载，但请标明出处。