减加乘除全选不选dom验证_全选验证不再-优快云博客

本文链接：https://blog.youkuaiyun.com/Guiyide/article/details/79074525

本文介绍了一个简单的网页计算器功能实现及其表单验证方法。通过JavaScript编写加减乘除运算逻辑，并利用DOM操作来获取输入框的数据进行计算。此外，还实现了对用户邮箱地址、密码及手机号的有效性检查。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript" language="JavaScript">
       </script>
       <script>

           function func1(){
               alert("相加");
               var yi = document.getElementById("yi").value;
               var er = document.getElementById("er").value;
               var he = document.getElementById("he");
               he.value = parseInt(yi) + parseInt(er);
           }
           function func2(){
               alert("减法");
               var yi = document.getElementById("yi").value;
               var er = document.getElementById("er").value;
               var he = document.getElementById("he");
               he.value = parseInt(yi) - parseInt(er);
           }
           function func3(){
               alert("乘法");
               var yi = document.getElementById("yi").value;
               var er = document.getElementById("er").value;
               var he = document.getElementById("he");
               he.value = parseInt(yi) * parseInt(er);
           }
           function func4(){
               alert("除");
               var yi = document.getElementById("yi").value;
               var er = document.getElementById("er").value;
               var he = document.getElementById("he");
               he.value = parseInt(yi) / parseInt(er);
           }
           function qucch(){
               var tr = document.getElementById("cch").checked;
               var fu = document.getElementsByName("cc");
               for (var i = 0; i < fu.length; i++) {
                   fu[i].checked = tr;
               }
           }
           function quan(){
               var fu = document.getElementsByName("cc");
               for (var i = 0; i < fu.length; i++) {
                   fu[i].checked = true;
               }
           }
           function quanbu(){
               var fu = document.getElementsByName("cc");
               for (var i = 0; i < fu.length; i++) {
                   fu[i].checked = false;
               }
           }
           function fan(){
               var fu = document.getElementsByName("cc");
               for (var i = 0; i < fu.length; i++) {
                   fu[i].checked =! fu[i].checked;
               }
           }

           function tijiao(){
               var youxiang = document.getElementById("youxiang").value;
               var you = document.getElementById("you");
               if(youxiang.length >= 6 && youxiang.length <= 18){
                   you.innerText= "";
               }else{
                   you.innerText="必须6~18位之间";

               }

               var paws1 = document.getElementById("paws1").value;
               var paw1 = document.getElementById("paw1");
               if(paws1.length<6 || paws1.length>16 ){
                   paw1.innerText="必须6~16位之间";
               }else{
                   paw1.innerText= "";
               }

               var paws2 = document.getElementById("paws2").value;
               var paw2 = document.getElementById("paw2");
               if(paws1 != paws2 ){
                   paw2.innerText="不相同";
               }else{
                   paw2.innerText= "";
               }
               var shouji = document.getElementById("shouji").value;
               var tel1 = document.getElementById("tel1");
               if(shouji.length == 11){
                   tel1.innerText="";
               }else{
                   tel1.innerText="手机号不对，要十一位";
               }



           }
           /*function yabdsg(){
               alert("是广东省高速宽带");
               boolean end=false;
      int s;
     Random ran=new Random();
do{
     s=ran.nextInt(9999);
     if(1000<s && s<9999){
end=true;
      }
}while(!end);
alert(s);
        var yanzheng = document.getElementById("yanzheng").value;
        yanzheng = parseInt(s);

           }*/


       </script>

   </head>
   <body>

       第一个数： <input type="text" id="yi" />
       第二个数： <input type="text" id="er" />
       <input type="button" onclick="func1()" value="+" />
       <input type="button" onclick="func2()" value="-" />
       <input type="button" onclick="func3()" value="*" />
       <input type="button" onclick="func4()" value="/" />
       结果：<input type="text" id="he" />
       <br /><br /><br /><br />

       大爱薛之谦： <input type="checkbox" onclick="qucch()" id="cch" /><br />
       《你还要我怎样》<input type="checkbox" name="cc" /><br />
       《我害怕》<input type="checkbox" name="cc" /><br />
       《其实》<input type="checkbox" name="cc" /><br />
       《方圆几里》<input type="checkbox" name="cc" /><br />
       《深深的爱过你》<input type="checkbox" name="cc" /><br />
       《绅士》<input type="checkbox" name="cc" /><br />
       《婚礼的祝福》<input type="checkbox" name="cc" /><br />
       《等我回家》<input type="checkbox" name="cc" /><br />
       《一半》<input type="checkbox" name="cc" /><br />
       《别》<input type="checkbox" name="cc" /><br />
       《渡》<input type="checkbox" name="cc" /><br />
       《天后》<input type="checkbox" name="cc" /><br />
       <br />
       <input type="button" onclick="quan()" value="全选" />
       <input type="button" onclick="quanbu()" value="全不选" />
       <input type="button" onclick="fan()" value="反选" />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />






       <center>
           <form action="guimei.html">
       <table>
           <tr>
               <td><span id="xing">*&ensp;</span>邮箱地址&ensp;&ensp;</td>
               <td><input type="text" id="youxiang"/></td>
           </tr>
           <tr>
               <td colspan="2"><span id="you"></span></td>
           </tr>
           <tr>
               <td><span id="xing">*&ensp;</span>密码&ensp;&ensp;</td>
               <td><input type="password" id="paws1" /></td>
           </tr>
           <tr>
               <td colspan="2"><span id="paw1"></span></td>
           </tr>
           <tr>
               <td><span id="xing">*&ensp;</span>确认密码&ensp;&ensp;</td>
               <td><input type="password" id="paws2" /></td>
           </tr>
           <tr>
               <td colspan="2"><span id="paw2"></span></td>
           </tr>
           <tr>
               <td><span id="xing">*&ensp;</span>手机号码&ensp;&ensp;</td>
               <td><input type="tel" id="shouji" /></td>
           </tr>
           <tr>
               <td colspan="2"><span id="tel1"></span></td>
           </tr>
           <tr>
               <td><span id="xing">*&ensp;</span>验证码&ensp;&ensp;</td>
               <td><input type="text" />&ensp;&ensp;<input type="text" id="yanzheng" /></td>
           </tr>
           <tr>
               <td colspan="2"><span id="yan"></span></td>
           </tr>
           <tr>
               <td colspan="2" align="center"><input type="button" value="免费获取验证码" /></td>
           </tr>
           <tr>
               <td><span id="xing">*&ensp;</span>短信验证码&ensp;&ensp;</td>
               <td><input type="text" /></td>
           </tr>
           <tr>
               <td colspan="2"><span id="duanxin"></span></td>
           </tr>
       </table>
       <input type="button" value="提交" onclick="tijiao()" />
       </form>

       </center>

   </body>
</html>