js表单验证

表单验证

HTML结构

<form action="" id="form">
    用户名：<input type="text" id="username"><span id="s_username"></span><br>
    密码： <input type="text" id="password"><span id="s_password"></span><br>
    邮箱： <input type="text" id="email"><span id="s_email"></span><br>
    姓名： <input type="text" id="rename"><span id="s_rename"></span><br>
    手机号：<input type="text" id="telphone"><span id="s_telphone"></span><br>
    <input type="submit" value="提交">
</form>

主函数体

// 网页加载之后立刻执行该函数
window.onload = function () {
    // 事件委托
    document.getElementById('form').onsubmit = function () {
        if (checkUsername && checkPassword && checkEmail && checkRename && checkTelphone) {
             alert('信息匹配正确，表单成功提交');
        } else { 
             alert('信息不完全匹配，请重新输入');
        }
    }

    // 给用户名、密码、Email、姓名、手机号绑定失去焦点事件
    document.getElementById('username').onblur = checkUsername;
    document.getElementById('password').onblur = checkPassword;
    document.getElementById('email').onblur = checkEmail;
    document.getElementById('rename').onblur = checkRename;
    document.getElementById('telphone').onblur =checkTelphone;
}

校验用户名

function checkUsername() {
    // 获取用户名的值
    var username = document.getElementById('username').value;
    // 定义正则表达式
    var reg_username = /^([a-zA-Z0-9_-])/;//^匹配输入字符串的开始位置、
    // 判断值是否符合正则表达式规则，test()方法用于检测一个字符串是否匹配某个模式，匹配则返回true，否则返回false
    var flag = reg_username.test(username);
    // 提示信息
    var s_username = document.getElementById('s_username')
    if (flag) {
        // 如果匹配成功，提示输入正确文字
        s_username.innerHTML = "<span color='green'>用户名符合格式</span>"
    } else {
        s_username.innerHTML = "<span color='red'>用户名不符合格式</span>"
    }
    return flag;
}

校验密码

function checkPassword() {
    // 获取密码的值
    var password = document.getElementById('password').value;
    // 定义正则表达式 \w表示匹配包括下划线的任何单词字符，等价于“[A-Za-z0-9_]”，密码6-18位
    var reg_password = /^([a-zA-Z0-9]{6,18}$)/
    // 判断值是否符合正则表达式的规则
    var flag = reg_password.test(password);
    // 提示信息
    var s_password = document.getElementById('s_password');
    if (flag) {
        // 提示绿色对钩
        s_password.innerHTML = "<span color='green'>密码输入正确</span>";
    } else {
        // 提示红色错误信息
        s_password.innerHTML = "<span color='red'>密码输入错误</span>";
    }
    return flag;
}

校验Email

function checkEmail() {
    // 获取邮箱的值
    var email = document.getElementById('email').value;
    // 定义正则表达式 \w表示匹配包括下划线的任何单词字符，等价于“[A-Za-z0-9_]”；[\u4E00-\u9FFF]表示中文字符编码区
    var reg_email = /^([a-z0-9_\.-])+@([\da-z\.-])+(\.[a-z\.]{2,10})$/
    // 判断值是否符合正则表达式的规则
    var flag = reg_email.test(email);
    // 提示信息
    var s_email = document.getElementById('s_email');
    if (flag) {
        // 提示绿色对钩
        s_email.innerHTML = "<span color='green'>Email格式正确</span>";
    } else {
        // 提示红色错误信息
        s_email.innerHTML = "<span color='red'>Email格式错误！</span>";
    }
    return flag;
}

校验姓名

function checkRename() {
    // 获取姓名的值
    var rename = document.getElementById('rename').value;
    // 定义正则表达式 \w表示匹配包括下划线的任何单词字符，等价于“[A-Za-z0-9_]”
    var reg_rename = /^[\u4e00-\u9fa5]{2,4}$/;
    // 判断值是否符合正则表达式的规则
    var flag = reg_rename.test(rename);
    // 提示信息
    var s_rename = document.getElementById('s_rename');
    if (flag) {
        // 提示绿色对钩
        s_rename.innerHTML = "<span color='green'>输入正确</span>";
    } else {
        // 提示红色错误信息
        s_rename.innerHTML ="<span color='red'>用户名错误错误！</span>";
    }
    return flag;
}

校验电话号码

function checkTelphone() {
    // 获取电话号码的值
    var telphone = document.getElementById('telphone').value;
    // 定义正则表达式 \w表示匹配包括下划线的任何单词字符，等价于“[A-Za-z0-9_]”
    var reg_telphone = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
    // 判断值是否符合正则表达式的规则
    var flag = reg_telphone.test(telphone);
    // 提示信息
    var s_telphone = document.getElementById('s_telphone');
    if (flag) {
        // 提示绿色对钩
        s_telphone.innerHTML = "<span color='green'>电话号码正确</span>";
    } else {
        // 提示红色错误信息
        s_telphone.innerHTML = "<span color='red'>电话号码错误！</span>";
    }
    return flag;
}

效果图