前端之表单验证

最新推荐文章于 2022-05-10 17:31:04 发布

Chemlez

最新推荐文章于 2022-05-10 17:31:04 发布

阅读量3.7k

点赞数

分类专栏：前端文章标签： html css js

本文链接：https://blog.csdn.net/weixin_44782094/article/details/115397219

版权

本文探讨前端如何进行表单验证，包括单个标签的离焦事件验证，如用户名、邮箱和出生日期的非空检查，以及整体表单提交时的验证策略。通过设置离焦事件和正则表达式，确保数据合法性和完整性。

摘要由CSDN通过智能技术生成

一、简概

因为，前端经常涉及到表单验证，故此篇博客用于记录前端JS对表单验证的方法。

通过表单验证，当对form表单提交时，可以防止不合法的数据传递至后台(以及判空操作)。这里我们先定义一个表单，作为示例，其它的情况都可以此类推。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jyEraTeJ-1617343528917)(https://s1.ax1x.com/2020/08/30/dqw44H.png)]

前端表单代码

<div>
    <form method="get" action="https://www.baidu.com" id="form">
        <table align="center" style="margin: 0 auto;">
            <tr>
                <td><label>用户名</label></td>
                <td><input type="text" name="username" placeholder="请输入用户名" style="width: 150px" id="username"></td>
            </tr>
            <tr>
                <td><label>邮箱</label></td>
                <td><input type="email" name="email" placeholder="请输入邮箱" style="width: 150px" id="email"></td>
            </tr>
            <tr>
                <td><label>性别</label></td>
                <td align="left">
                    <input type="radio" name="male" value="male" checked>男
                    <input type="radio" name

最低0.47元/天解锁文章