用Html+Css+JavaScript中的事件和正则表达式做一个“个人信息登记表“

程序员文章站 2022-07-13 13:37:31

...

用Html+Css+JavaScript中的事件和正则表达式做一个“个人信息登记表”

页面效果要如下图所示，且要保证信息录入格式正确无遗漏（输入有误要给到对应提示~）
用Html+Css+JavaScript中的事件和正则表达式做一个“个人信息登记表“
使用HTML+CSS布局出如上图所示页面效果，嵌入JS代码，添加表单提交和表单项失去焦点等事件处理。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单正则验证校验</title>
</head>
<style>
   
    .bigbox{
            position: relative;
            width: 700px;
            height: 470px;
            margin: 50px auto;
            border: 1px solid black;
            background-color:#F0F7FF
            
        }

    .box{
        width:700px;
        height: 450px;
        margin-left: 50px;
        margin-bottom: 30px;
    }

    a{
        font-size: 2px;
        color:#B0B8BD;
    }
</style>
<body>
    <div class="bigbox">
        <div class="box">
        <h1>个人信息登记表</h1>
        <form action="js03.html" name="myform" onsubmit="return doSubmit()" method="post">
            登录账号：<input type="text" name="uname" onblur="checkUname()"/> <a>　　6-18位有效字符（字母、数字、下划线）</a><br><br>
            登录密码：<input type="text" name="code1" onblur="checkCode1()"/> <a>　　6-18位任意字符</a><br><br>
            重复密码：<input type="text" name="code2" onblur="checkCode2()"/> <a>　　重复密码与登录密码一致</a><br><br>
            性　　别：<input id = "man" type="radio"  name="1">男<input id ="woman" type="radio" name="1">女<a>　　　　　　　　　　必须选择一个</a><br><br>
            年　　龄：<input type="text" name="uyearsold" onblur="checkYearsOld()" /> <a>　　大于0的任意两位整数</a><br><br>
            邮　　箱：<input type="text" name="email" onblur="checkEmail()"/> <a>　　有效的Email地址</a><br><br>
            学　　历：<label for="education"></label>
            <select>
                <option value="">请选择</option>
                <option value="">研究生</option>
                <option value="">本科</option>
                <option value="">专科</option>
                <option value="">高中</option>
                <option value="">中专</option>
                <option value="">初中</option>
                <option value="">小学</option>
                
            </select> <a>　　　　　　　　　　必须选择一个学历选项</a><br><br>
            <input type="submit" value="提交"/> 　　<input type="reset" value="重置"/> 
        </form>   
        </div>
    </div>
</body>
<script>
     //验证账号函数
     function checkUname(){
        //获取账号信息
        var uname = document.myform.uname.value;
        //执行验证
        //if(uname.match(/^[0-9A-Za-z_]{6,18}$/) == null){
        if(uname.match(/^\w{6,18}$/) == null){
            alert("请输入6-18位有效字符（字母、数字、下划线）！");
            return false;
        }
        return true;
    }

    //验证登录密码函数
    function checkCode1(){
        var code1 = document.myform.code1.value;
        //执行验证
        if(code1.match(/[\s\S*]{6,18}$/) == null){
            alert("请输入6-18位任意字符！");
            return false;
        }
        return true;
    }

    //验证重复密码是否与登录密码一样
    function checkCode2(){
        var code1 = document.myform.code1.value;
        var code2 = document.myform.code2.value;
        if(code2 != code1){
            alert("重复密码要与登录密码一致！");
            return false;
        }
        return true     
    }

    //验证年龄函数
    function checkYearsOld (){
        //获取信息
        var uyearsold = document.myform.uyearsold.value;
        if(uyearsold.match(/^[1-9][0-9]$/ ) == null){
           alert("请输入大于零的两位整数！");
           return false; 
        }
        return true;
    }
    //验证邮箱函数
    function checkEmail(){
        //获取信息
        var email = document.myform.email.value;
        //执行验证
        if(email.match(/^\aaa@qq.com\w+(\.\w+){1,2}$/) == null){
            alert("请输入正确的Email信息！");
            return false;
        }
        return true;
    }
    //表单提交
    function doSubmit(){
        return checkUname() && checkCode1() && checkCode2() && checkYearsOld () && checkEmail();
    }
</script>
</html>

总结相关正则表达式：
6-18位有效字符（字母、数字、下划线）： ^\w{6,18}$
6-18位任意字符：[\s\S*]{6,18}
大于0的任意两位整数：^ [1-9][0-9]$
有效的Email地址: ^\aaa@qq.com\w+(.\w+){1,2}$

另外我为了达到页面效果加了很多全角的空格

下面是相应的框的输入内容不符合提示的要求的弹窗：用Html+Css+JavaScript中的事件和正则表达式做一个“个人信息登记表“

相关标签：曲鬼鬼的学习正则表达式 javascript

上一篇： SpringBoot实现单文件下载（直接复制就能用）

下一篇：土豆酱的个人笔记—正则表达式