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";        }    }}

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

---

• 全部输入正确则显示正确
  

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

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