JS 登录验证在前端验证代码格式

最新推荐文章于 2024-02-19 16:04:08 发布

黄二马

最新推荐文章于 2024-02-19 16:04:08 发布

阅读量1.2k

点赞数 1

分类专栏： java web 文章标签： web js javascript

本文链接：https://blog.csdn.net/xiaoliang98/article/details/109659916

版权

java web 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

JS 登录验证在前端验证输入信息格式格式

下面是实例代码：
主要触发条件：
onblur失去焦点时触发方法。
正则判断输入格式是否合法。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><!-- ([\u4E00-\u9FA5]|[09]) -->
<html>
<head>
    <title>10-注册页面.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript">

    </script>
</head>
<body>
<fieldset>
    <legend>注册页面</legend>
    <!-- 在form标签中有个默认的事件 -->
    <form id="register" action="https://www.baidu.com/" method="get" >
        <table>
            <tr>
                <td>用户名称：<font color="red" id="red*">*</font>
                </td>
                <td><input id="user" type="text" name="user" value="请输入用户名" onclick="func()"
                           onblur="checkUser()"/> <span style="color: red" id="userSpan"></span></td>
            </tr>

            <tr>
                <td>用户密码：</td>
                <td><input id="pwd" type="password" name="pwd" onblur="checkPwd()"/> <span id="pwdSpan"></span>
                </td>
            </tr>

            <tr>
                <td>确认密码：</td>
                <td><input id="repwd" type="password" name="repwd" onblur="checkRepwd()"/> <span
                        id="repwdSpan"></span></td>
            </tr>

            <tr>
                <td>选择性别：</td>
                <td>
                    <input type="radio" name="sex" value="nan" onblur="checkSex()"/>男
                    <input type="radio" name="sex" value="nv" onblur="checkSex()"/>女
                    <span id="sexSpan"></span>
                </td>
            </tr>
            <tr>
                <td>选择爱好：</td>
                <td>
                    <input type="checkbox" name="hobby" value="C"/>C
                    <input type="checkbox" name="hobby" value="C++"/>C++
                    <input type="checkbox" name="hobby" value="Java"/>Java
                    <input type="checkbox" name="hobby" value="PHP"/>PHP
                    <input type="checkbox" name="hobby" value=".net"/>.net
                    <span id="hspan"></span></td>
            </tr>
            <tr>
                <td>选择国家：</td>
                <td>
                    <select name="country" id="country">
                        <option value="">---请选择国家----</option>
                        <option value="CN">中国</option>
                        <option value="US">美国</option>
                        <option value="EN">英国</option>
                    </select>
                </td>
            </tr>

            <tr>
                <td>自我评价：</td>
                <td><textarea rows="10" cols="40" name="desc">
						</textarea></td>
            </tr>
            <tr>
                <td><input type="submit" value="注册"/></td>
                <td><input type="reset" value="重置"/></td>
            </tr>
        </table>
    </form>
</fieldset>


<script type="text/javascript">
    var checkUserRegular = /^\w{6,15}$/;
    var errorUser = "用户名必须由字母、数字、下划线组成，并且长度为6-15长度";

    var checkPassRegular = /^\w{6,12}$/;
    var errorPass = "用户密码  必须由字母、数字、下划线组成，并且长度为6-12长度";
    var wpdNotSome = "密码不一致！";

    function func() {
        var username = document.getElementById("user");
        if (username.value == "请输入用户名") {
            username.value = "";
        }
    }

    function checkUser() {
        var username = document.getElementById("user").value;
        var userSpan = document.getElementById("userSpan");
        var errorRed = document.getElementById("red*");
        if (checkUserRegular.test(username)) {
            userSpan.innerHTML = "";
            errorRed.innerHTML = "&nbsp;";
            return true;
        } else {
            errorRed.innerHTML = "*";
            userSpan.innerHTML = errorUser;
            return false;
        }
    }

    var pwd = "";

    function checkPwd() {
        pwd = document.getElementById("pwd").value;
        var pwdSpan = document.getElementById("pwdSpan");
        if (checkPassRegular.test(pwd)) {
            pwdSpan.innerHTML = "";
            return true;
        } else {
            pwdSpan.innerHTML = errorPass;
            return false;
        }
    }

    function checkRepwd() {
        var repwd = document.getElementById("repwd").value;
        console.log(repwd);
        var repwdSpan = document.getElementById("repwdSpan");
        if (repwd == pwd) {
            repwdSpan.innerHTML = "";
            return true;
        } else {
            repwdSpan.innerHTML = wpdNotSome;
            return false;
        }
    }

    function checkSex() {
        var sex = document.getElementsByName("sex");
        var sexSpan = document.getElementById("sexSpan");
        var flag = false;
        for (var i = 0; i < sex.length; i++) {
            if (sex[i].checked) {
                flag = true;
            }
        }
        if (!flag) sexSpan.innerHTML = "性别未选";
        return flag;
    }

    function checkHobby() {
        var hobbys = "";
        var hobbies = document.getElementsByName("hobby");
        for (var i = 0; i < hobbies.length; i++) {
            if (hobbies[i].checked) {
                hobbys += hobbies[i].value + " ";
            }
        }
        if (hobbys == "") return false;
    }

    function checkCountry() {
		var country = document.getElementById("country");
		var countryValue = country.value;
		if (countryValue=="")return false;
	}


</script>
</body>
</html>

黄二马

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS 登录验证在前端验证代码格式

JS 登录验证在前端验证输入信息格式格式下面是实例代码：主要触发条件：onblur失去焦点时触发方法。正则判断输入格式是否合法。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head> <title>10-注册页面.html</title> <m
复制链接

扫一扫