前端数据校验

最新推荐文章于 2022-08-02 11:15:57 发布

与或

最新推荐文章于 2022-08-02 11:15:57 发布

阅读量2.8k

点赞数 4

分类专栏：前端笔记文章标签： html javascript

本文链接：https://blog.csdn.net/qq_37774399/article/details/117570056

版权

笔记同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

数据校验

当前端做一些表单时，通常涉及到一些数据校验，比如字符长度，是否非空，两次输入数据是否一致。
这些功能完全可以通过脚本实现。

效果图

在这里插入图片描述

废话不多说，直接上代码。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据校验</title>
    <!--    数据校验部分-->
    <script language="JavaScript" type="text/javascript">
        function checkUserName() {    //验证用户名
            var fname = document.myform.username.value;
            var reg = /^[0-9a-zA-Z]/;
            if (fname.length != 0) {
                for (i = 0; i < fname.length; i++) {
                    if (!reg.test(fname)) {
                        alert("只能输入字母或数字");
                        return false;
                    }
                }

            }
            else {
                alert("请输入用户名");
                document.myform.username.focus();
                return false;
            }
            return true;
        }

        function passCheck() { //验证密码
            var userpass = document.myform.password.value;
            if (userpass == "") {
                alert("未输入密码 \n" + "请输入密码");
                document.myform.password.focus();
                return false;
            }
            if (userpass.length < 6 || userpass.length > 12) {
                alert("密码必须在 6-12 个字符。\n");
                return false;
            }
            return true;
        }

        function passCheck2() {
            var p1 = document.myform.password.value;
            var p2 = document.myform.password2.value;
            if (p1 != p2) {
                alert("确认密码与密码输入不一致");
                return false;
            } else {
                return true;
            }
        }

        function checkEmail() {
            var Email = document.getElementById("email").value;
            var e = Email.indexOf("@" && ".");
            if (Email.length != 0) {
                if (e > 0) {
                    if (Email.charAt(0) == "@" && ".") {
                        alert("符号@和符号.不能再邮件地址第一位");
                        return false;
                    }
                    else {
                        return true;
                    }
                }
                else {
                    alert("电子邮件格式不正确\n" + "必须包含@符号和.符号！");
                    return false;
                }
            }
            else {
                alert("请输入电子邮件！");
                return false;
            }
        }

        function checkbirthday() {    //验证用户名
            var year = document.myform.birthday.value;
            if (year < 1949 || year > 2007) {
                alert("年份范围从1949-2007年");
                return false;
            }
            return true;
        }

        function validateform() {
            if (checkUserName() && passCheck() && passCheck2() && checkEmail() && checkbirthday())
                return true;
            else
                return false;
        }

        function clearText() {
            document.myform.user.value = "";
            document.myform.password.value = "";
        }

        //显示隐藏对应的switchPwd()方法:
        $(function () {
            // 通过jqurey修改
            $("#passwordeye").click(function () {
                let type = $("#password").attr('type')
                if (type === "password") {
                    $("#password").attr("type", "text");
                } else {
                    $("#password").attr("type", "password");
                }
            });
        });
    </script>
</head>
<body>

<form  name="myform" onsubmit="return validateform( )"  method="post">

        <h3>
            用户名：
        </h3>
        &nbsp;
        <input  id="username" name="adminId" type="text"style="height:40px" placeholder="只能输入字母或数字，4-16个字符" autocomplete="off">


        <h3>
            密&nbsp;&nbsp;&nbsp;码：
        </h3>
        &nbsp;
        <input  id="password" name="password" type="password" style="height:40px" placeholder="密码长度6-12位" autocomplete="off">

    <h3>
        确认密码：
    </h3>
    &nbsp;
    <input  id="password2" name="password2" type="password" style="height:40px" value="" placeholder="密码长度6-12位" autocomplete="off">


    <div id="btn">
        <input class="btn btn-primary"   type="submit" id="login"  value="登录">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </div>
</form>

</body>
</html>

代码很简单，一看就能看懂。

注意事项

各个数据命名要对应上。
form要记得命名，与脚本中写的要对应上，
各个输入框的id要对应好
触发条件要记得写，新加的校验条件【比如checkbirthday（）】要加进去，否则不会生效。

常用的数据校验基本上就这些，都写在里面了，觉得用不上的，可以自行删除。
如果您觉得本文对您有所帮助，请动动您写不出bug的小手，点个赞呗~