• 表单在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>

              

  • 相关阅读:
    java 异常处理
    前端 网页宽高常用属性
    java 图片裁剪代码
    Eclipse常用设置
    SpringCloud Sleuth入门介绍
    Spring cloud stream【消息分区】
    Spring cloud stream【消息分组】
    Spring cloud stream【入门介绍】
    SpringCloud-分布式配置中心【加密-非对称加密】
    SpringCloud-分布式配置中心【加密-对称加密】
  • 原文地址:https://www.cnblogs.com/hsl541/p/13220089.html
Copyright © 2020-2023  润新知