【html】用户注册验证功能

最新推荐文章于 2024-05-08 09:58:48 发布

拾光御行

最新推荐文章于 2024-05-08 09:58:48 发布

阅读量1.2k

点赞数

文章标签： js html

本文链接：https://blog.csdn.net/qq_42010290/article/details/111824419

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        form span{
            color:#f00;
        }
    </style>
</head>
<body>
<form>
    Username:<input type="text" name="username" onblur="checkName()"><span id="vname"></span><br>
    Password:<input type="password" name="password" maxlength="16" onblur="checkpwd()"><span id="vpwd"></span><br>
    Email:<input type="email" name="email" onblur="checkEmail()"><span id="vemail"></span><br>
    Phone:<input type="text" name="phone" maxlength="11" onblur="checkPhone()"><span id="vtel"></span><br>
    Company:<input type="text" name="company"><span id="vcom"></span><br>
    Address:<input type="text" name="address"><span id="vaddr"></span><br>
    <input type="checkbox" name="checkbox" onblur="checkChoose()">I agree to the terms & conditions<br>
    <span id="vbox"></span><br>
    <button type="button" id="sumbitBtn" onclick="check()">register</button>
</form>
<script>
    function $id(id){
        return document.getElementById(id);
    }
    var f = document.forms[0];

    function checkName(){
        let uname = f.username.value;
        console.log(uname);
        if(uname.length==0){
            $id('vname').innerText = "请输入用户名";
            return false;
        }else{
            $id('vname').innerText = "";
            return true;
        }
    }
    function checkpwd() {
        var pwd = f.password.value;
        if(pwd.length==0){
            $id('vpwd').innerText = "请输入密码";
            return false;
        }else if(pwd.length <16 && pwd.length > 8){
            $id('vpwd').innerText = "";
            return true;
        }else{
            $id('vpwd').innerText = "密码长度8-16之间";
            return false;
        }
    }
    function checkEmail(){
        var regex = /^\w+@[a-z0-9]+\.[a-z]{2,4}$/g;
        let email = f.email.value;
        if(email.length==0){
            $id('vemail').innerText = "请输入邮箱地址";
            return false;
        }else if(regex.test(email)){
            $id('vemail').innerText = "";
            return true;
        }else {
            $id('vemail').innerText = "邮箱输入不正确";
            return false;
        }
    }
    function checkPhone(){
        var regex = /1[3578]\d{9}/g;
        let phone = f.phone.value;
        if(phone.length==0){
            $id('vtel').innerText = "请输入手机号";
            return false;
        }else if(regex.test(phone)){
            $id('vtel').innerText = "";
            return true;
        }else {
            $id('vtel').innerText = "请输入正确的手机号";
            return false;
        }
    }
    function checkChoose(){
        if(f.checkbox.checked){
            $id('vbox').innerHTML="";
            return true;
        }else{
            $id('vbox').innerHTML="您未同意协议";
            return false;
        }
    }
    function check() {
        var n1 = checkName();
        var n2 = checkEmail();
        var n3 = checkPhone();
        var n4 = checkChoose();
        var n5 = checkpwd()
        if(n1&n2&n3&n4&n5){
            window.alert("注册成功！");
        }
    }
</script>
</body>
</html>

拾光御行

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
【html】用户注册验证功能

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> form span{ color:#f00; } </style></head><body><form&gt
复制链接

扫一扫