HTML+JS+正则表达式实现个人信息录入

**题目:**程序猿小明需要为公司员工的个人信息录入编写前端代码,效果如下图 需求:要保证信息录入格式正确无遗漏(输入有误要给到对应提示)
最终效果图:
HTML+JS+正则表达式实现个人信息录入_第1张图片
HTML+JS+正则表达式实现个人信息录入_第2张图片代码如下:


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<style>
    div {
        background-color: lightgreen;
        height: 800px;
        width: 100%;
        border: 1px;
        overflow: hidden;
        position: relative;
        /* margin-left: 100px; */
    }

    form {
        position: absolute;
        margin-left: 100px;
        margin-top: 100px;
    }

    h1 {
        margin-left: 100px;
        position: absolute;
    }

    #information {
        width: 300px;
        height: 500px;
        position: absolute;
        margin-top: 80px;
        margin-left: 380px;
        font-size: small;
        color: grey;
        line-height: 31px;


    }
style>

<body>
    <div id="did">
        <h1>个人信息登记表h1>
        <form name="myform" method="POST" >
            登录账号:<input type="text" name="uname" onblur="checkUname()" /> <br /><br />
            登录密码:<input type="password" name="psword" onblur="checkPsword()" /> <br /><br />
            重复密码:<input type="password" name="repsword" onblur="checkRepsword()" /> <br /><br />      别: <input type="radio" checked name="Sex" value="male" />    <input type="radio" name="Sex" value="female" /><br /><br />      龄:<input type="text" name="age" onblur="checkAge()" /><br /><br />   
            手机号码:<input type="text" name="tel" onblur="checkTel()" /><br /><br />      箱:<input type="text" name="email" onblur="checkEmail()" /><br /><br />      历:<select name="level" id="ss" onsubmit=" return checkLevel()">
                <option value="v1">请选择option>
                <option value="v2">专科option>
                <option value="v3">本科option>
                <option value="v4">硕士option>
                <option value="v5">博士option>
            select><br /><br />
            <button type="submit" onclick="doSubmit()">提交button>      
            <button type="reset">重置button>
        form>
        <div id="information">
            <p>6-18为有效字符(字母、数字、下划线)p>
            <p>6-18位任意字符p>
            <p>重复密码与登录密码一致p>
            <p>必须选择一个p>
            <p>大于0的任意两位整数p>
            <p>由1开头的11位整数p>
            <p>有效的Email地址p>
            <p>必须选择一个学历选项p>

        div>

    div>

body>
<script>
    //账号验证函数
    function checkUname() {
        //取值
        var uname = document.myform.uname.value;
        // console.log(uname)
        //判断
        if (uname.match(/^\w{6,18}$/) == null)) {
            alert("6-18为有效字符(字母、数字、下划线)");
            return false;
        }
        return true;
    }
    //登录密码验证函数
    function checkPsword() {
        //取值
        var pd = document.myform.psword.value;
        //判断
        if (pd.length>=6 &&  pd.length <= 18) {
            alert("6-18为有效字符(字母、数字、下划线)");
            return false;
        }
        return true;
    }
    //重复密码验证函数
    function checkRepsword() {
        //取值
        var pd = document.myform.psword.value;  //登录密码
        var rpd = document.myform.repsword.value; //重复密码
        if (rpd != pd) {
            alert("重复密码与登录密码一致");
            return false;
        }
        return true;
    }
    //年龄验证函数
    function checkAge() {
        //取值
        var age = document.myform.age.value;
        // console.log(age);
        // console.log(age.length)
        //判断
        // if(age.length >2  || age <= 0 ){
        if (age.match(/^\d{2}$/) == null || age <= 0) {
            alert("大于0的任意两位整数");
            return false;
        }
        return true;
    }
    //手机号码验证函数
    function checkTel() {
        //取值
        var tel = document.myform.tel.value;
        console.log(tel);
        console.log(tel.length)
        //判断
        if (tel.match(/1\d{10}$/) == null) {
            alert("由1开头的11位整数");
            return false;
        }
        return true;
    }
    //验证Email
    function checkEmail() {
        var email = document.myform.email.value;
        if (email.match(/\w+@[a-zA-Z0-9]+\.([a-zA-Z]{3,})/) == null) {
            alert("有效的Email地址");
            return false;
        }
        return true;
    }

    //验证学历函数
    function checkLevel() {
        var level = document.getElementById("ss");
        console.log(level);
        if (level.value == "请选择") {
            alert("必须选择一个学历");
            return false;
        }
        return true;
    }

    function doSubmit() {
        if( checkEmail() && checkPsword() && checkRepsword() && checkTel() && checkUname() && checkAge()){
            alert("提交成功");
        }else{
            alert("提交失败");
        }
    }
script>

html>

之中遇到的几个难点:
1、文本框前的文字不整齐:
使用“ ”进行空格调整。
2、长度限制
采用.length去判断。
3、样式
边找资料边自己调。

你可能感兴趣的:(日常练习,javascript,html,正则表达式,js)