表单验证代码

最新推荐文章于 2022-10-26 08:00:00 发布

HAI6545

最新推荐文章于 2022-10-26 08:00:00 发布

阅读量690

点赞数 1

分类专栏： JavaScript案例文章标签： elementui postman webview

本文链接：https://blog.csdn.net/HAI6545/article/details/122296545

版权

JavaScript案例专栏收录该内容

105 篇文章 3 订阅

订阅专栏


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
td:first-child{
    text-align: right;
}
td:last-child{
    font-size: 12px;
    padding-left: 20px;
}
td:last-child.success{
    color: #0f0;
}
td:last-child.error{
    color: #f00;
}
</style>
<body>
<form action="">
    <table>
        <tr>
            <td>用户名：</td>
            <td><input type="text" name="username"></td>
            <td></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input type="password" name="pass"></td>
            <td></td>
        </tr>
        <tr>
            <td>确认密码：</td>
            <td><input type="password" name="repass"></td>
            <td></td>
        </tr>
        <tr>
            <td>手机号：</td>
            <td><input type="number" name="tel"></td>
            <td></td>
        </tr>
        <tr>
            <td>邮箱：</td>
            <td><input type="email" name="email"></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="reset">
                <input type="submit" value="注册">
            </td>
        </tr>
    </table>
</form>
</body>
<script>
// 获取元素
var usernameInput = document.querySelector('[name="username"]')
var passInput = document.querySelector('[name="pass"]')
var repass = document.querySelector('[name="repass"]');
var tel = document.querySelector('[name="tel"]');
var email = document.querySelector('[name="email"]');
var userReg = /^[a-zA-Z][a-zA-Z0-9]{3,9}$/
var telReg = /^1[3-9]\d{9}$/
var emailReg = /(^[a-zA-Z]\w{5,17}@((126|163)\.com|yeah\.net)$)|(^[1-9]\d{4,10}@qq\.com$)/
// 封装用户名验证
function check(reg, ele, successMessage, errorMessage){
    if(!reg.test(ele.value)){
        // 提示
        ele.parentElement.nextElementSibling.innerText = '× ' + errorMessage
        ele.parentElement.nextElementSibling.className = 'error'
        return false
    }else{
        ele.parentElement.nextElementSibling.innerText = '√ ' + successMessage + '通过校验'
        ele.parentElement.nextElementSibling.className = 'success'
        return true
    }
}
// usernameInput.onfocus = function(){
//     // 让提示内容消失
//     this.parentElement.nextElementSibling.innerText = ''
// }
// usernameInput.onblur = function(){
//     check(userReg, usernameInput, '用户名', '用户名必须是字母开头，字母和数字组成，4~10位')
// }
// usernameInput.oninput = function(){
//     check(userReg, usernameInput, '用户名', '用户名必须是字母开头，字母和数字组成，4~10位')
// }

eleEvent(usernameInput, userReg, '用户名', '用户名必须是字母开头，字母和数字组成，4~10位')
eleEvent(passInput, /^.{6,12}$/, '密码', '密码是6~12位')
eleEvent(tel, telReg, '手机号', '手机号不符合规则')
eleEvent(email, emailReg, '邮箱', '邮箱不符合规则')

// passInput.onfocus = function(){
//     // 让提示内容消失
//     this.parentElement.nextElementSibling.innerText = ''
// }
// passInput.onblur = function(){
//     check(/^.{6,12}$/, passInput, '密码', '密码是6~12位的任意字符')
// }
// passInput.oninput = function(){
//     check(/^.{6,12}$/, passInput, '密码', '密码是6~12位的任意字符')
// }

repass.onfocus = function(){
    // 让提示内容消失
    this.parentElement.nextElementSibling.innerText = ''
}
repass.onblur = function(){
    if(repass.value != passInput.value){
        // 提示
        repass.parentElement.nextElementSibling.innerText = '× 两次密码输入不一致'
        repass.parentElement.nextElementSibling.className = 'error'
        return false
    }else{
        repass.parentElement.nextElementSibling.innerText = '√ 确认密码通过校验'
        repass.parentElement.nextElementSibling.className = 'success'
    }
}
repass.oninput = function(){
    if(repass.value != passInput.value){
        // 提示
        repass.parentElement.nextElementSibling.innerText = '× 两次密码输入不一致'
        repass.parentElement.nextElementSibling.className = 'error'
        return false
    }else{
        repass.parentElement.nextElementSibling.innerText = '√ 确认密码通过校验'
        repass.parentElement.nextElementSibling.className = 'success'
    }
}

// tel.onfocus = function(){
//     // 让提示内容消失
//     this.parentElement.nextElementSibling.innerText = ''
// }
// tel.onblur = function(){
//     check(telReg, tel, '手机号', '手机号不符合规则')
// }
// tel.oninput = function(){
//     check(telReg, tel, '手机号', '手机号不符合规则')
// }

// email.onfocus = function(){
//     // 让提示内容消失
//     this.parentElement.nextElementSibling.innerText = ''
// }
// email.onblur = function(){
//     check(emailReg, email, '邮箱', '邮箱不符合规则')
// }
// email.oninput = function(){
//     check(emailReg, email, '邮箱', '邮箱不符合规则')
// }

// 将输入框的焦点事件、input事件封装
function eleEvent(ele, reg, success, error){
    ele.onfocus = function(){
        // 让提示内容消失
        ele.parentElement.nextElementSibling.innerText = ''
    }
    ele.onblur = function(){
        check(reg, ele, success, error)
    }
    ele.oninput = function(){
        check(reg, ele, success, error)
    }
}
// 获取表单
var form = document.querySelector('form');
form.addEventListener('submit', onsubmit)
function onsubmit(){
    // 阻止默认行为
    window.event.returnValue = false
    // 验证用户名
    var bool = check(userReg, usernameInput, '用户名', '用户名必须是字母开头，字母和数字组成，4~10位')
    if(!bool){
        return false;
    }

    // 校验密码
    var bool = check(/^.{6,12}$/, passInput, '密码', '密码是6~12位的任意字符')
    if(!bool){
        return false
    }

    // 校验确认密码
    if(repass.value != passInput.value){
        // 提示
        repass.parentElement.nextElementSibling.innerText = '× 两次密码输入不一致'
        repass.parentElement.nextElementSibling.className = 'error'
        return false
    }else{
        repass.parentElement.nextElementSibling.innerText = '√ 确认密码通过校验'
        repass.parentElement.nextElementSibling.className = 'success'
    }
    
    // 手机号校验
    var bool = check(telReg, tel, '手机号', '手机号不符合规则')
    if(!bool){
        return false
    }

    var bool = check(emailReg, email, '邮箱', '邮箱不符合规则')
    if(!bool){
        return false
    }
}
</script>
</html>

HAI6545

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
表单验证代码

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style>td:first-child{ text-align: right;}td:last-child{ font-size: 12px; padding-left: ..
复制链接

扫一扫