20220710_JavaScript_事件监听案例_注册表单验证

CSS代码

* {
    margin: 0;
    padding: 0;
    list-style-image: none;
}
.reg_content{
    padding: 30px;
    margin: 3px;
}
a,img {
    border: 0;
}

body {
    background-image: url("../Files/redemption001.jpg");
    background-size: cover;
    text-align: center;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

td, th {
    padding: 0;
    height: 90px;
}
.inputs {
    vertical-align: top;
}

.clear {
    clear: both;
}
.clear:before, .clear:after {
    contain: "";
    display: table;
}
.clear:after {
    clear: both;
}

.form_div {
    background-color: rgba(255,255,255, 0.27);
    border-radius: 10px;
    border: 1px solid #aaa;
    width: 424px;
    margin-top: 150px;
    margin-left: 1050px;
    padding: 30px 0 20px 0px;
    font-size: 16px;
    box-shadow: inset 0px 0px 10px rgba(255,255,255,0.5),0px 0px 15px rgba(75,75,75,0.3);
    text-align: left;
}

.form_div input[type="text"], .form_div input[type="password"], .form_div input[type="email"] {
    width: 268px;
    margin: 10px;
    line-height: 20px;
    font-size: 16px;
}

.form_div input[type="checkbox"] {
    margin: 20px 0 20px 10px;
}

.form_div input[type="button"], .form_div input[type="submit"] {
    margin: 10px 20px 0 0;
}

.form_div table {
    margin: 0 auto;
    text-align: right;
    color: rgba(64,64,64,1.00);
}

.form_div table img {
    vertical-align: middle;
    margin: 0 0 5px 0;
}

.footer {
    color: rgba(64,64,64,1.00);
    font-size: 12px;
    margin-top: 30px;
}

.form_div .buttons {
    float: right;
}

input[type="text"], input[type="password"], input[type="email"] {
    border-radius: 8px;
    box-shadow: inset 0 2px 5px #eee;
    padding: 10px;
    border: 1px solid #D4D4D4;
    color: #333333;
    margin-top: 5px;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus {
    border: 1px solid #50afeb;
    outline: none;
}

input[type="button"], input[type="submit"] {
    padding: 7px 15px;
    background-color: #3c6db0;
    text-align: center;
    border-radius: 5px;
    overflow: hidden;
    min-width: 80px;
    border: none;
    color: #FFF;
    box-shadow: 1px 1px 1px rgba(75, 75, 75, 0.3);
}

input[type="button"]:hover, input[type="submit"]:hover {
    background-color: #5a88c8;
}

input[type="button"]:active, input[type="submit"]:active {
    background-color: #5a88c8;
}

.err_msg {
    color: red;
    padding-right: 170px;
}
#password_err ,#phone_num_err {
    padding-right: 195px;
}

#reg_btn {
    margin-right: 25px; width: 288px; height: 45px; margin-top: 20px;
}

html和js代码

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome Your Registrationtitle>
    <link href="../CSSFiles/Appearance_For_Register_Demo.css" rel="stylesheet">
head>
<body>
<div class="form_div">
    <div class="reg_content">
        <h1>Welcome Registerh1>
        <span>Already have an Account ?span><a href="#">Logina>
    div>
    <div>
        <form id="form_reg" action="#" method="get">
            <table>

                <tr>
                    <td>Usernametd>
                    <td class="input">
                        <input name="username" type="text" id="username">
                        <br>
                        <span id="username_err" class="err_msg" style="display: none">Wrong formatspan>
                    td>
                tr>

                <tr>
                    <td>Passwordtd>
                    <td class="input">
                        <input name="password" type="text" id="password">
                        <br>
                        <span id="password_err" class="err_msg" style="display: none">Wrong formatspan>
                    td>
                tr>

                <tr>
                    <td>PhoneNumtd>
                    <td class="input">
                        <input name="phone_num" type="text" id="phone_num">
                        <br>
                        <span id="phone_num_err" class="err_msg" style="display: none">Wrong formatspan>
                    td>
                tr>

            table>

            <div class="buttons">
                <input value="Register" type="submit" id="reg_btn">
            div>
            <br class="clear"/>
        form>
    div>
div>

<script>
    //首先验证用户名是否合规,先获取输入框
    var usernameInput = document.getElementById("username")
    //元素绑定失去焦点的事件,鼠標移出輸入框時會驗證格式
    usernameInput.onblur = checkUsername

        function checkUsername () {
        var username = usernameInput.value.trim()
        //格式检查
        // var flag = username.length >= 6 && username.length <= 12
        //用正则进行验证
        var reg = /^\w{6,12}$/
        var flag = reg.test(username)
        if (flag){
            //格式正确不提示
            document.getElementById("username_err").style.display = 'none'
        }else {
            //格式不对,把none撤销,提示错误
            document.getElementById("username_err").style.display = ''
        }
        return flag
    }

    //密码的验证跟用户名就一样了
    var passwordInput = document.getElementById("password")
    //元素绑定失去焦点的事件
    passwordInput.onblur = checkPassword

        function checkPassword() {
        var password = passwordInput.value.trim()
        //格式检查
        // var flag = password.length >= 6 && password.length <= 12
        var reg = /^\w{6,12}$/
        var flag = reg.test(password)
        if (flag){
            //格式正确不提示
            document.getElementById("password_err").style.display = 'none'
        }else {
            //格式不对,把none撤销,提示错误
            document.getElementById("password_err").style.display = ''
        }
        return flag
    }

    var phone_numInput = document.getElementById("phone_num")
    //元素绑定失去焦点的事件
    phone_numInput.onblur = checkPhoneNum
        function checkPhoneNum() {
        var phone_num = phone_numInput.value.trim()
        //格式检查
        // var flag = phone_num.length == 11
        var reg = /^\d{11}$/
        var flag = reg.test(phone_num)
        if (flag){
            //格式正确不提示
            document.getElementById("phone_num_err").style.display = 'none'
        }else {
            //格式不对,把none撤销,提示错误
            document.getElementById("phone_num_err").style.display = ''
        }
        return flag
    }

    //最後檢查整個表單,先獲取對象
    var reg_form = document.getElementById("form_reg")
    //綁定onsubmit事件
    reg_form.onsubmit = function () {
        var flag = checkUsername() && checkPassword() && checkPhoneNum()

        return flag//之前的demo已經測試過,return的boolean值能決定該提交按鈕能否正常提交
    }

script>
body>
html>

网页效果图,图片背景自由选择

你可能感兴趣的:(JavaWeb,javascript,前端,css)