• JavaScript_表单校验用户名和密码

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>注册页面title>
    6.     <style>
    7.         *{
    8.             margin: 0px;
    9.             padding: 0px;
    10.             box-sizing: border-box;
    11.         }
    12.         body{
    13.             background: url("img/register_bg.png") no-repeat center;
    14.             padding-top: 25px;
    15.         }
    16.         .rg_layout{
    17.             width: 900px;
    18.             height: 500px;
    19.             border: 8px solid #EEEEEE;
    20.             background-color: white;
    21.             /*让div水平居中*/
    22.             margin: auto;
    23.         }
    24.         .rg_left{
    25.             /*border: 1px solid red;*/
    26.             float: left;
    27.             margin: 15px;
    28.         }
    29.         .rg_left > p:first-child{
    30.             color:#FFD026;
    31.             font-size: 20px;
    32.         }
    33.         .rg_left > p:last-child{
    34.             color:#A6A6A6;
    35.             font-size: 20px;
    36.         }
    37.         .rg_center{
    38.             float: left;
    39.             /* border: 1px solid red;*/
    40.  
    41.         }
    42.         .rg_right{
    43.             /*border: 1px solid red;*/
    44.             float: right;
    45.             margin: 15px;
    46.         }
    47.         .rg_right > p:first-child{
    48.             font-size: 15px;
    49.         }
    50.         .rg_right p a {
    51.             color:pink;
    52.         }
    53.         .td_left{
    54.             width: 100px;
    55.             text-align: right;
    56.             height: 45px;
    57.         }
    58.         .td_right{
    59.             padding-left: 50px ;
    60.         }
    61.         #username,#password,#email,#name,#tel,#birthday,#checkcode{
    62.             width: 251px;
    63.             height: 32px;
    64.             border: 1px solid #A6A6A6 ;
    65.             /*设置边框圆角*/
    66.             border-radius: 5px;
    67.             padding-left: 10px;
    68.         }
    69.         #checkcode{
    70.             width: 110px;
    71.         }
    72.         #img_check{
    73.             height: 32px;
    74.             vertical-align: middle;
    75.         }
    76.         #btn_sub{
    77.             width: 150px;
    78.             height: 40px;
    79.             background-color: #FFD026;
    80.             border: 1px solid #FFD026 ;
    81.         }
    82.         .error{
    83.             color:red;
    84.         }
    85.         #td_sub{
    86.             padding-left: 150px;
    87.         }
    88.     style>
    89.     <script>
    90.  
    91.         /**
    92.          * 分析：
    93.          *      1、给表单绑定onsubmit事件。监听器中判断每一个方法校验的结果。
    94.          *              如果都为true，则监听器方法返回true
    95.          *              如果有一个为false，则监听器方法返回false
    96.          *      2、定义一些方法分别校验各个表单项
    97.          *      3、给各个表单项绑定onblur事件
    98.          */
    99.         window.onload = function () {
    100.             //1、给表单绑定onsubmit事件
    101.             document.getElementById("form").onsubmit = function () {
    102.                 //调用用户名校验方法     checkUsername();
    103.                 //调用密码校验方法       checkPassword();
    104.                 return checkUsername()&&checkPassword();
    105.             };
    106.             //给用户名和密码框分别绑定离焦事件
    107.             document.getElementById("username").onblur = checkUsername;
    108.             document.getElementById("username").onblur = checkPassword;
    109.         };
    110.         //校验用户名
    111.         function checkUsername() {
    112.             //1、获取用户名的值
    113.             let username = document.getElementById("username").value;
    114.             //2、定义正则表达式
    115.             let reg_username = /^\w{6,12}$/;
    116.             //3、判断值是否符合正则的规则
    117.             let flag = reg_username.test(username);
    118.             //4、提示信息
    119.             let s_username = document.getElementById("s_username");
    120.             if (flag) {
    121.                 //提示绿色对勾
    122.                 s_username.innerHTML = "";
    123.             } else {
    124.                 //提示红色用户名有误
    125.                 s_username.innerHTML = "用户名格式有误";
    126.             }
    127.             return flag;
    128.         }
    129.         //校验密码
    130.         function checkPassword() {
    131.             //1、获取用户名的值
    132.             let password = document.getElementById("password").value;
    133.             //2、定义正则表达式
    134.             let reg_password = /^\w{6,12}$/;
    135.             //3、判断值是否符合正则的规则
    136.             let flag = reg_password.test(password);
    137.             //4、提示信息
    138.             let s_password = document.getElementById("s_password");
    139.             if (flag) {
    140.                 //提示绿色对勾
    141.                 s_password.innerHTML = "";
    142.             } else {
    143.                 //提示红色用户名有误
    144.                 s_password.innerHTML = "密码格式有误";
    145.             }
    146.             return flag;
    147.         }
    148.     script>
    149. head>
    150. <body>
    151.  
    152. <div class="rg_layout">
    153.     <div class="rg_left">
    154.         <p>新用户注册p>
    155.         <p>USER REGISTERp>
    156.  
    157.     div>
    158.  
    159.     <div class="rg_center">
    160.         <div class="rg_form">
    161.             
    162.             <form action="#" id="form" method="get">
    163.                 <table>
    164.                     <tr>
    165.                         <td class="td_left"><label for="username">用户名label>td>
    166.                         <td class="td_right">
    167.                             <input type="text" name="username" id="username" placeholder="请输入用户名">
    168.                             <span id="s_username" class="error">span>
    169.                         td>
    170.                     tr>
    171.                     <tr>
    172.                         <td class="td_left"><label for="password">密码label>td>
    173.                         <td class="td_right">
    174.                             <input type="password" name="password" id="password" placeholder="请输入密码">
    175.                             <span id="s_password" class="error">span>
    176.                         td>
    177.                     tr>
    178.                     <tr>
    179.                         <td class="td_left"><label for="email">Emaillabel>td>
    180.                         <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱">td>
    181.                     tr>
    182.                     <tr>
    183.                         <td class="td_left"><label for="name">姓名label>td>
    184.                         <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名">td>
    185.                     tr>
    186.                     <tr>
    187.                         <td class="td_left"><label for="tel">手机号label>td>
    188.                         <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号">td>
    189.                     tr>
    190.                     <tr>
    191.                         <td class="td_left"><label>性别label>td>
    192.                         <td class="td_right">
    193.                             <input type="radio" name="gender" value="male" checked> 男
    194.                             <input type="radio" name="gender" value="female"> 女
    195.                         td>
    196.                     tr>
    197.                     <tr>
    198.                         <td class="td_left"><label for="birthday">出生日期label>td>
    199.                         <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期">td>
    200.                     tr>
    201.                     <tr>
    202.                         <td class="td_left"><label for="checkcode" >验证码label>td>
    203.                         <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
    204.                             <img id="img_check" src="img/verify_code.jpg">
    205.                         td>
    206.                     tr>
    207.                     <tr>
    208.                         <td colspan="2" id="td_sub"><input type="submit" id="btn_sub" value="注册">td>
    209.                     tr>
    210.                 table>
    211.             form>
    212.         div>
    213.     div>
    214.     <div class="rg_right">
    215.         <p>已有账号?<a href="#">立即登录a>p>
    216.     div>
    217. div>
    218. body>
    219. html>
    1. let reg_username = /^\w{6,12}$/;
    2. 当您在浏览器的控制台中输入代码示例时，它将定义一个名为reg_username的变量，并将其设置为一个正则表达式。
    3. 该正则表达式由以下几个部分组成：
    4. - ^：匹配字符串的开头 
    5. - \w：匹配一个字母、数字或下划线 
    6. - {6,12}：指认由6到12个\w字符组成的重复次数 
    7. - $：匹配字符串的结尾  因此，该正则表达式用于匹配由6到12个字符、数字和下划线组成的字符串。
    8. 例如，reg_username.test("abcdefg1234567890)”将返回true，
    9. 而reg_username.test("12345")将返回false。

     

  • 相关阅读:
    Java 工程师面试题汇总，全会月薪至少 3W
    Hystrix原理
    计算机毕业设计Java教师管理系统(源码+系统+mysql数据库+lw文档)
    Dockerfile（3） - WORKDIR 指令详解
    【方法】PDF不能转换成其它格式如何解决？
    Java-类和对象
    Linxu 【vim】
    springboot项目nacos作为配置中心
    SpringMVC 写个 HelloWorld
    深度探讨react-hooks实现原理
  • 原文地址：https://blog.csdn.net/m0_65152767/article/details/134406874