Logo

菜单

小熊奶糖(BearCandy)
小熊奶糖(BearCandy)
发布于 2024-04-12 / 20 阅读
0
0

Web前端 表单综合实训 正则表达式

#web前端

Web前端 表单综合实训

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>用户注册</title>
  </head>
<style>
  .nav{
    display: inline-block;
    height: auto;
    width: 100%;
    text-align: center;
  }
    .userinfo{
  
      padding: 20px;
      float: right;
  
    }
    .continar{
        width: 2048px;
        margin: 20px auto 20px auto;
  
    }
    h1{
        color:orange
    }
    input{
      border: 2px solid orange;
      border-radius: 10px;
      padding: 5px;
    }
    button{
        color: white;
        background-color: orange;
        border: 0px;
        padding: 5px;
        border-radius: 10px;
    }
    label{
        display: inline-block;
        border: 2px solid orange;
        border-radius: 50px;
        background:orange;
        color: azure;
        padding: 5px;
        width: 100px;
        text-align: right;
    }
    .inputform{
        margin: 20px;
    }
    #search{
  
        border: 2px solid orange;
        border-radius: 10px;
        background:orange;
        color: azure;
        padding: 5px;
   
    }
    .search{
     display: inline-block;
    }
    #uploadfile{
        border: 0px solid orange;
      border-radius: 10px;
      padding: 5px;
    }
    select{
        padding:5px 50px;
        border: 2px solid orange;
        border-radius: 10px;
    }
    textarea{
        display: block;
        margin: 20px auto 20px auto;
    }
    .body0{
      width: 720px;
      height: auto;
      margin: 50px auto 50px auto;
    }
    .continar{
      width: 720px;
      height: auto;
      margin: 50px auto 50px auto;
      border: 2px solid orange;
      border-radius: 30px;
      text-align: center;
    }
    .userinfo img{
      border-radius: 20px;
      width: 25px;
      padding: 0px;
    }
    input[type="submit"]{
      border-radius: 20px;
      background: orange;
      color: white;
    }
    input[type="submit"]:hover{
      border:0px;
      border-radius: 20px;
      background: rgb(238, 217, 179);
      color: white;
    }
    .readol{
      width: 200px;
      text-align: center;
    }
    .sex1{
      display: inline-block;
      border-radius: 20px;
      border:  2px solid orange;
      padding: 3px 50px 3px 50px;
    }
    .tel{
      padding:5px 10px 5px 10px;
    }
</style>
  <body>
    <div class="nav">
      <div class="logo">
        <img
          src="/img/ChMkJ1s05AOIUrRsAAEGwDrOzMYAApWvAEljvQAAQbY787.jpg"
          alt=""
          srcset=""
          width="120px"
          height="60px"
        />
        <img
          src="/img/u=2687935310,4273044505&fm=253&fmt=auto&app=138&f=JPEG.webp"
          alt=""
          srcset=""
          width="120"
          height="60px"
        />
        <div class="search">
          <label id="search" >搜索</label>
          <input type="search" />
          <button>点击搜索</button>
        </div>
        <div class="userinfo">
          <img src="/img/R-C.png"  alt="">
          <a href="">用户名:TEST123</a>
        </div>
      </div>
      <div class="line">
        <hr border="black" size="5px" color="orange" />
      </div>
  
    </div>   
    <div class="body0">

      <div class="continar">
        <div class="title">
          <h1>用户注册</h1>
          <hr border="black" size="2px" color="orange" /> 
        </div>
        <form action="" method="post">
  
      
            <div class="inputform">
              <!-- autofocus自动获取焦点 max定义最大输入内容，min定义最小输入内容  autocomplete 【off|on】自动填充 placeholder用于提示文字-->
              <label >会员账号：</label>
              <input type="text" name="username" pattern="^[A-Za-z]{1,2}" maxlength="16" minlength="4" autofocus autocomplete="off" placeholder="请输入用户名" required/>
            </div>
        <div class="inputform">
          <label for="">密码</label>
          <input type="password"  name="password" maxlength="16" minlength="8" placeholder="请输入密码" required/>
        </div>
        <div class="inputform">
          <label for="">确认密码</label>
          <input type="password" name="re_password" placeholder="请确认密码" required/>
        </div>
        <div class="inputform">
          <label for="">性别</label>
          <div class="sex1"> <input type="radio" name="sex" />男
            <!-- checked用于设置默认标签 -->
              <input type="radio" checked name="sex"/>女</div>
   
          </div>
          <div class="inputform">
            <label for="">爱好</label>
            <input type="checkbox" checked value="运动" name="hobby"/>运动
            <input type="checkbox" value="电脑" name="hobby"/>电脑
            <input type="checkbox" value="编程" name="hobby"/>编程
          </div>
          <div class="inputform">
            <label for="">身份证</label>
            <input type="text"  required/>
          </div>
          <div class="inputform">
            <label for="">出生日期</label>
            <input type="datetime-local" required/>
          </div>
          <div class="inputform">
            <label for="">出生地方</label>
            <!-- selected默认选中项 -->
            <select name="palce">
              <option value="山西省" selected>山西省</option>
              <option value="河北省">河北省</option>
            </select>
          </div>
          <div class="inputform">
            <label for="">居住地</label>
            <select name="both_palce">
              <optgroup label="省份">
                <option value="山西省" selected>山西省</option>
                <option value="河北省">河北省</option>
              </optgroup>
              <optgroup label="国家">
                <option value="美国">美国</option>
                <option value="泰国">泰国</option>
              </optgroup>
            </select>
          </div>
          <div class="inputform">
            <label for="">邮箱地址</label>
            <input type="email" pattern="^[a-z0-9A-Z]+[- | a-z0-9A-Z . _]+@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\\.)+[a-z]{2,}$" multiple required/>
          </div>
          <div class="inputform">
      
            <label for="">手机号码</label>
            <select class="tel"  name="area">
              <option value="+86">+86</option>
              <option value="+00">+00</option>
            </select>
            <input type="tell" patten="^(?:\+?86)?1(?:3\d{3}|5[^4\D]\d{2}|8\d{3}|7(?:[01356789]\d{2}|4(?:0\d|1[0-2]|9\d))|9[189]\d{2}|6[567]\d{2}|4(?:[14]0\d{3}|[68]\d{4}|[579]\d{2}))\d{6}$" maxlength="12"  required/>
          </div>
          <div class="inputform">
            <label for="">上传图片</label>
            <input  id="uploadfile" multiple type="file" />
            <!-- multiple多项上传 -->
          </div>
          <div class="inputform">
            <label class="readol" for="">阅读并同意协议</label>
            <br>
            <textarea rows="20" cols="60" readonly>
              八、通知
        
              8.1 有效联系方式
        
              您在注册成为淘宝平台用户，并接受淘宝平台服务时，您应该向淘宝提供真实有效的联系方式（包括您的电子邮件地址、联系电话、联系地址等），对于联系方式发生变更的，您有义务及时更新有关信息，并保持可被联系的状态。
        
              您在注册淘宝平台用户时生成的用于登陆淘宝平台接收站内信、系统消息和阿里旺旺即时信息的会员账号（包括子账号），也作为您的有效联系方式。
        
              淘宝将向您的上述联系方式的其中之一或其中若干向您送达各类通知，而此类通知的内容可能对您的权利义务产生重大的有利或不利影响，请您务必及时关注。
        
              您有权通过您注册时填写的手机号码或者电子邮箱获取您感兴趣的商品广告信息、促销优惠等商业性信息；您如果不愿意接收此类信息，您有权通过淘宝提供的相应的退订功能进行退订。
        
              8.2 通知的送达
        
              淘宝通过上述联系方式向您发出通知，其中以电子的方式发出的书面通知，包括但不限于在淘宝平台公告，向您提供的联系电话发送手机短信，向您提供的电子邮件地址发送电子邮件，向您的账号发送旺旺信息、系统消息以及站内信信息，在发送成功后即视为送达；以纸质载体发出的书面通知，按照提供联系地址交邮后的第五个自然日即视为送达。

              对于在淘宝平台上因交易活动引起的任何纠纷，您同意司法机关（包括但不限于人民法院）可以通过手机短信、电子邮件或阿里旺旺等现代通讯方式或邮寄方式向您送达法律文书（包括但不限于诉讼文书）。您指定接收法律文书的手机号码、电子邮箱或阿里旺旺账号等联系方式为您在淘宝平台注册、更新时提供的手机号码、电子邮箱联系方式以及在注册淘宝用户时生成阿里旺旺账号，司法机关向上述联系方式发出法律文书即视为送达。您指定的邮寄地址为您的法定联系地址或您提供的有效联系地址。
        
              您同意司法机关可采取以上一种或多种送达方式向您达法律文书，司法机关采取多种方式向您送达法律文书，送达时间以上述送达方式中最先送达的为准。
        
              您同意上述送达方式适用于各个司法程序阶段。如进入诉讼程序的，包括但不限于一审、二审、再审、执行以及督促程序等。
        
              你应当保证所提供的联系方式是准确、有效的，并进行实时更新。如果因提供的联系方式不确切，或不及时告知变更后的联系方式，使法律文书无法送达或未及时送达，由您自行承担由此可能产生的法律后果。
            </textarea>
   
            <input type="submit" value="同意协议并注册">
     
            <input type="image" width="20px" src="/img/R-C.png" alt="">
   
            <input type="reset" >
          </div>
        </form>
      </div>
    </div>
  </body>
</html>

<input> 标签在 HTML 中用于创建各种类型的输入字段，以供用户在网页表单中提供数据。当 type 属性被设置为 "email" 时，它指示浏览器渲染一个专门用于输入电子邮件地址的输入字段。这个字段通常会带有特定的 UI 指示（如键盘布局优化），并可能在用户输入时进行基本的格式验证，确保输入的内容符合电子邮件地址的基本结构。

multiple 是 <input> 标签的一个属性，它是一个布尔属性，意味着它不需要赋值，仅凭其存在与否来表示开启或关闭某个功能。当 multiple 属性应用于 type="email" 的 <input> 元素时，其作用如下：

  1. 允许多个值输入：启用 multiple 后，用户可以在同一输入字段中输入或选择多个电子邮件地址。这意味着他们无需分别创建多个独立的 type="email" 输入框来输入多个邮箱。
  2. 输入分隔方式：用户在提交表单时，多个电子邮件地址应以逗号（,）分隔。例如，用户可能会输入 user1@example.com, user2@example.net, user3@example.org。这种格式便于服务器端程序解析和处理多个邮箱地址。
  3. UI 改变：在支持的浏览器中，带有 multiple 属性的 type="email" 输入框可能会展现出不同的用户界面，比如显示一个特殊的提示或者允许用户通过某种方式（如按住 Ctrl 或 Shift 键）选择多个已输入的邮箱地址。
  4. 浏览器兼容性：所有主流现代浏览器均支持 multiple 属性与 type="email" 结合使用。不过，需要注意的是，较旧的浏览器（如 Internet Explorer 9 及更早版本，以及某些情况下 Safari 浏览器）可能不支持 type="email" 或对其支持有限，因此在这些浏览器中，此特性可能无法正常工作或表现不同。
  5. 表单提交和数据处理：在服务器端接收到表单数据时，包含多个电子邮件地址的 input[type=email] 字段的值将以逗号分隔的字符串形式传递。服务器端代码需要能够解析这个字符串，将其分割成单独的邮箱地址以便进一步处理（如验证、存储或发送邮件等）。

综上所述，<input type="email" multiple> 标签允许用户在一个输入字段中输入和提交多个电子邮件地址，这些地址以逗号分隔，并且这一特性得到了大多数现代浏览器的良好支持。开发人员在使用时应确保后端代码能够正确处理这种格式的多值输入，并考虑对不支持此特性的老旧浏览器提供适当的降级体验或提示。

要编写一个正则表达式来匹配满足以下条件的字符串：

  • 第一个字符为 "1"
  • 第二个字符为 "3" 到 "9" 之间的数字
  • 第三个字符为 "5"、"6"、"7"、"8"
  • 剩余的七个字符全部为数字
  • 总共长度为 11 位字符

基于这些要求，可以构造如下正则表达式：

^1[3-9][5-8]\d{7}$

解释：

  • ^ 表示字符串的开始。
  • 1 确保第一个字符为数字 "1"。
  • [3-9] 代表第二个字符是范围内的任何一位数字，即 "3" 到 "9"。
  • [5-8] 保证第三个字符是 "5"、"6"、"7" 或 "8"。
  • \d{7} 表示接下来连续的七位都是任意数字（\d 代表单个数字字符，{7} 表示重复七次）。
  • $ 表示字符串的结束，确保整个正则表达式匹配的是一个完整的、恰好11位的字符串。

综上，上述正则表达式将匹配如 1351234567、1860987654 等符合要求的11位字符串，而不会匹配不符合条件的字符串。

html表单正则表达式使用patten属性

Linux ubantu图形界面对...
Web前端文本，结构，列表，交互，...

评论