• JavaScript的综合案例

    案例要求：

    实现一个表单验证

    1.当输入框失去焦点时，验证输入的内容是否符合要求

    2.当点击注册按钮时，判断所有输入框的内容是否都符合要求，如果不符合要求阻止表单提交

    简单的页面实现

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>欢迎注册title>
    7. head>
    8. <body>
    9.     <h1>欢迎注册h1>
    10.     <form action="#" id="register">
    11.         <table>
    12.             <tr>
    13.                 <td>用户名td>
    14.                 <td>
    15.                    
    16.                     <input type="text" name="username" id="username" >
    17.                     
    18.                     <span id="uwername_err" style="display: none;" >用户名不符合规则span>
    19.                 td>
    20.             tr>
    21.             <tr>
    22.                 <td>密码td>
    23.                 <td>
    24.                     <input type="password"  name="password" id="password">
    25.                     <span id="password_err" style="display: none;" >密码不符合规则span>
    26.                 td>
    27.             tr>
    28.             <tr>
    29.                 <td>电话td>
    30.                 <td>
    31.                     <input type="text" name="tel" id="tel">
    32.                     <span id="tel_err" style="display: none;" >电话不符合规则span>
    33.                 td>
    34.             tr>
    35.         table>
    36.         <input type="button" value="提交">
    37.     form>
    38.  
    39.  
    40. body>
    41. html>

     

    1.当输入框失去焦点时，验证输入的内容是否符合要求

    我们先设置用户名的事件，当鼠标离焦该元素时，触发函数

    1. <tr>
    2.                 <td>用户名td>
    3.                 <td>
    4.                     
    5.                     <input type="text" name="username" id="username" onblur="checkUsername()">
    6.                     
    7.                     <span id="uwername_err" style="display: none;" >用户名不符合规则span>
    8.                 td>
    9.             tr>

     checkUsername函数的实现

    1.  <script>
    2.         function checkUsername()
    3.         {
    4.             //获取用户框输入的值
    5.            let usernameValue= document.getElementById("username").value;
    6.            //创建正则对象
    7.           // let regex=new RegExp("^\\w{6,10}$");
    8.           let regex=/^\w{6,10}$/;
    9.           //判断输入的值是否符合正则
    10.           if(regex.test(usernameValue)){
    11. //重现设置为隐藏
    12.             document.getElementById("uwername_err").style.display="none";
    13.             return true;
    14.           }else{
    15.             //不满足，把用户名的span标签显示出来
    16.             document.getElementById("uwername_err").style.display="block";
    17.             document.getElementById("uwername_err").style.color="red";
    18.             //阻止表单提交
    19.             return false;
    20.             
    21.           }
    22.  
    23.         }
    24.         
    25.     script>

    结果：

    设置密码的绑定事件

    1.  <tr>
    2.                 <td>密码td>
    3.                 <td>
    4.                     <input type="password"  name="password" id="password" onblur="checkPassword()">
    5.                     <span id="password_err" style="display: none;" >密码不符合规则span>
    6.                 td>
    7.             tr>

     checkPassword函数

    1.    <script>
    2.         function checkPassword(){
    3.             //获取密码框输入的值
    4.             let passwordValue=document.getElementById("password").value;
    5.             //创建正则对象
    6.             let regex=/^.{6,12}$/;
    7.             //判断是否满足
    8.             if(regex.test(passwordValue)){
    9.                 //满足，把密码的span标签内容隐藏
    10.                 document.getElementById("password_err").style.display="none";
    11.                 //提交表单
    12.                 return true;
    13.             }else{
    14.                 //不满足
    15.                 document.getElementById("password_err").style.display="block";
    16.                 document.getElementById("password_err").style.color="red";
    17.  
    18.                 return false;
    19.             }
    20.         }
    21. script>

     设置电话的绑定事件

    1. <tr>
    2.                 <td>电话td>
    3.                 <td>
    4.                     <input type="text" name="tel" id="tel" onblur="checkTel()">
    5.                     <span id="tel_err" style="display: none;" >电话不符合规则span>
    6.                 td>
    7.             tr>

    checkTel函数

    1.  <script>
    2.         function checkTel(){
    3.             //获取电话框输入的值
    4.             let telValue=document.getElementById("tel").value;
    5.             //创建正则对象
    6.             let regex=/^1[3-9]\d{9}$/;
    7.             if(regex.test(telValue)){
    8.                 document.getElementById("tel_err").style.display="none";
    9.                 return true;
    10.             }else{
    11.                 //不满足
    12.                 document.getElementById("tel_err").style.display="block";
    13.                 document.getElementById("tel_err").style.color="red";
    14.  
    15.                 return false;
    16.             }
    17.         }
    18. script>

    2.当点击注册按钮时，判断所有输入框的内容是否都符合要求，如果不符合要求阻止表单提交 

    我们现在实现的功能有一个框不符合规则也可以提交数据成功 

    1. <script>
    2. //给form表单绑定提交事件
    3.         document.getElementById("register").onsubmit=function(){
    4.             //三个框只要有一个非法就组织表单提交
    5.             return checkPassword()&&checkTel()&&checkUsername();
    6.         }
    7. script>

    说明：onsubmit的匿名函数返回false就不提交数据

    结果：有一个不符合，就不提交数据

    说明：全部符合，才提交数据

    浏览器debug

    1.在页面打开控制台

    2.打开源代码 

  • 相关阅读:
    30.链表练习题（1）（王道2023数据结构2.3.7节1-15题）
    【Makefile】报错：undefined reference to symbol ‘pthread_spin_init@@GLIBC_2.2.5‘
    （九）DFI接口时序
    62. 解释一下MySQL中内连接，外连接等的区别（MySQL面试第五弹）
    ⌈Linux_ 感受系统美学⌋ 抛开图形化界面，深入探索命令行操作系统
    A Comprehensive Survey on Graph Neural Networks
    Spark-Core
    rust组织结构
    Java基础教程：多线程(3)-----创建线程的第二种方式
    node.js 用 xml2js.Parser 读 Freeplane.mm文件，生成测试用例.csv文件
  • 原文地址：https://blog.csdn.net/luosuss/article/details/138869516