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

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

---

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

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

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