zoukankan      html  css  js  c++  java
  • 表单在js中引用

    如何在javascript中来引用表单里面的某个元素

    1.本来是用document.表单名称.元素名称这样引用一个元素的,后来在运行的发现这样行不通,有时候这样写可以,但是有时候又不行。

    2.所以规范一点就写成document.forms["表单name名"/下标].elements["元素name名"/下标],

    比如:var formm=document.forms["formname"].elements["inputname"];就表示把表单下面的name名为inputname的元素赋给formm了。

    3.为了在js中不要定义太多的变量,可以这样写:var formm=document.forms["表单name名"].elements;这样写就代表已经获取到了第一个元素的地址了,然后这样写:formm["元素name名"/下标].属性=值;

    比如:var formm=document.forms["formname"].elements;

               formm["input1"].value="I love";

               formm["input2"].value="javascript";

    4.这里要说一下,在选中文本框里面的内容,是针对于这个元素,而不是这个元素里面的值,但是在比较的时候需要用元素的值来比较

    比如:下面用正则表达式来完成表单验证

    5.能在form里面用input来设置为按钮,就不要把button写在表单里面,要写button就写在表单外面

    比如:<form >

              <input    type="button"  >

              </form>

             <form>

      <input    type="text" >

      <input    type="text" >

      表单验证</button>  

           </form>

    <button  onclick="buttin()">

     

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <form action="adress" name="nameform" method="post" onsubmit="return checkform()" > 
            用户账号<input type="text" name="n1"/><br />
            用户密码<input type="text" name="n2"/><br />
            <input type="submit" value="验证"  />
            </form>
            <script>
                function checkform()
                {var user=document.forms["nameform"].elements["n1"];
                 var pass=document.forms["nameform"].elements["n2"];
                    if(!(/^[a-z]w{3,15}$/.test(user.value)))
                    {alert("用户账号要为字母,数字,下划线,以字母开头,长度在4-16位");
                    user.select();
                    return false;
                    }
                    if(!(/^w{4,16}$/.exec(pass.value)))    
                    {alert("密码为字母,数字或下划线组成,为4-16位");
                    pass.select();
                        return false;
                        
                    }
                    
                    return true;
                }
                
                
                
                
                
                
            </script>
            
            
        </body>
    </html>

              

  • 相关阅读:
    git 好文引流
    无法访问Swagger 或 druid面板无法访问 #报异常
    MachineLearning入门-7(数据理解)
    MachineLearning入门-6(数据导入)
    MachineLearning入门-5(Python和Scipy简介)
    百度PaddlePaddle入门-10(数据处理)
    百度PaddlePaddle入门-9(建模)
    百度PaddlePaddle入门-8(模型探讨)
    MachineLearning入门-4(理解数据集)
    百度PaddlePaddle入门-7 (Numpy的应用)
  • 原文地址:https://www.cnblogs.com/hsl541/p/13220089.html
Copyright © 2011-2022 走看看