【HTML】HTML实现简单表单验证（正则表达式、非空判断、输入框提示信息）

A Lucky Boy

已于 2022-04-06 13:41:49 修改

阅读量5.8k

点赞数 11

分类专栏： HTML 文章标签： html 正则表达式前端

于 2022-02-20 12:35:13 首次发布

本文链接：https://blog.csdn.net/weixin_43797577/article/details/123029296

版权

HTML 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习</title>
</head>
<body>

    <form action="../HTML/Day Four.html" method="get">

    <p>注册</p>
    <!-- placeholder 输入框提示信息 required 非空判断  pattern 正则表达式-->
    <!-- 必须为3-16位用户名 -->
    <p>用户名：
        <input type="text" name="username" placeholder="请输入3-16位用户名" pattern="^[a-z0-9_-]{3,16}$" required/>
    </p>
    <!-- 必须为正确手机号 -->
    <P>手机号：
        <input type="text" name="phone" placeholder="请输入手机号" pattern="^1(3[0-9]|5[0-3,5-9]|7[1-3,5-8]|8[0-9])\d{8}$" required/>
    </P>
   <!-- 密码格式包含大小写、数字、特殊符号 -->
    <p>密码：
        <input type="password" name="psd" placeholder="请输入密码" pattern="^(?=.*[0-9])(?=.*[a-zA-Z])[0-9A-Za-z~!@#$%^&*._?]{8,15}$" required/>
    </p>
    <!-- 确认密码没有写必须跟密码一致 -->
    <p>确认密码：
        <input type="password" name="psd" placeholder="请确认密码" pattern="^(?=.*[0-9])(?=.*[a-zA-Z])[0-9A-Za-z~!@#$%^&*._?]{8,15}$" required/>
    </p>
    <!-- 必须位正确邮箱格式 -->
    <p>邮箱：
        <input type="email" name="email" placeholder="请输入正确的邮箱" pattern="^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$" required/>
    </p>
    <p>性别：
        <!-- 单选框，性别默认选择男 -->
        <input type="radio" name="sex" value="boy" checked/>男
        <input type="radio" name="sex" value="girl"/>女
    </p>
    <p>兴趣爱好：
        <!-- 多选框，默认选择敲代码和跳绳 -->
        <input type="checkbox" checked/>敲代码
        <input type="checkbox"/>看电影
        <input type="checkbox" checked/>跳绳
        <input type="checkbox"/>吃喝玩乐
        <input type="checkbox"/>打游戏
    </p>
    <p>选择注册地：
         <!-- 下拉框  在option后加checked为默认选中-->
        <select name="注册地">
           
            <option value="guojia">---请选择---</option>
            <option value="CAN">加拿大</option>
            <option value="CN">中国</option>
            <option value="JP">日本</option>
            <option value="US">美国</option>
        </select>
    </p>
    <p>头像：
        <!-- 上传暂时点不了 -->
        <input type="file" required/>
        <input type="button" value="上传"/>
    </p>
    <p>
        <!-- 点击提交，跳转到../HTML/Day Four.html  
            点击重置，则重新输入    
        -->
        <input type="submit" value="确认提交"/>
        <input type="reset" value="重置"/>
    </p>
</form>
</body>
</html>

结果如下：

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAQSAgTHVja3kgIEJveQ==,size_16,color_FFFFFF,t_70,g_se,x_16

A Lucky Boy

关注

11
点赞
踩
77

收藏

觉得还不错? 一键收藏
打赏
0
评论
【HTML】HTML实现简单表单验证（正则表达式、非空判断、输入框提示信息）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>练习.
复制链接

扫一扫