js_6 完整表单验证

作者: basicGeek | 来源:发表于2018-11-20 18:11 被阅读0次

js_6 完整表单验证
vue+element 表单验证问题
Vue 后台管理项目4-登录页表单验证
九、疯狂的表单
from 表单验证
HTML5表单新验证
day47-Django表单验证图片上传和分页技术
验证
3/5 iview表单中注册密码验证、发送表单请求问题
第二十五谈：验证表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style type="text/css">
    body {
        background: #ccc;
    }

    label {
        width: 40px;
        display: inline-block;
    }

    span {
        color: red;
    }

    .container {
        margin: 100px auto;
        width: 400px;
        padding: 50px;
        line-height: 40px;
        border: 1px solid #999;
        background: #efefef;
    }

    span {
        margin-left: 30px;
        font-size: 12px;
    }

    .wrong {
        color: red
    }

    .right {
        color: green;
    }

    .defau {
        width: 200px;
        height: 20px;
    }

    .de1 {
        background-position: 0 -20px;
    }
</style>
<body>
<div class="container">
    <label>Q Q</label><input type="text" id="inp1"><span></span><br>
    <label>手机</label><input type="text" id="inp2"><span></span><br>
    <label>邮箱</label><input type="text" id="inp3"><span></span><br>
    <label>座机</label><input type="text" id="inp4"><span></span><br>
    <label>姓名</label><input type="text" id="inp5"><span></span><br>
</div>
</body>
</html>
<script>
    function $(id) {
        return document.getElementById(id);
    }

    var inpQQ = $("inp1");
    var inpMobile = $("inp2");
    var inpEmail = $("inp3");
    var inpTel = $("inp4");
    var inpName = $("inp5");
    function check(inp, regEx) {
        inp.onblur = function () {
            if (regEx.test(this.value)) {
                this.nextSibling.innerHTML = "正确";
                this.nextSibling.style.color = "green";
            } else {
                this.nextSibling.innerHTML = "错误";
                this.nextSibling.style.color = "red";
            }
        }
    }
    
    var regQQ = /^[1-9]\d{4,10}$/;
    var regMobile = /^(13[0-9]|14[57]|15[0-9]|18[0-9])\d{8}$/;
    var regEmail = /^\w+([+-.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
    var regTel = /^0\d{2,3}-\d{7,8}$/;
    var regName = /^[\u4e00-\u9fa5]{2,}$/;

    check(inpQQ, regQQ);
    check(inpMobile, regMobile);
    check(inpEmail, regEmail);
    check(inpTel, regTel);
    check(inpName, regName);

</script>

表单验证