JavaScrip——简单练习（输出方式，简单表单验证）

最新推荐文章于 2020-11-11 18:20:49 发布

weixin_30764137

最新推荐文章于 2020-11-11 18:20:49 发布

阅读量73

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Chenshuai7/p/5154451.html

本文探讨了网页中利用JavaScript实现动态交互效果，包括输出当前时间、ID元素内容修改及表单验证功能，详细解释了如何使用document.write、getElementById、alert函数，并通过实例展示了用户输入验证过程。

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

<script>
//输出方式
document.write(Date());//获取当前时间
document.write(1);
document.write("<p>你好</p>");//直接输内容
document.getElementById("nihao").innerHTML;//通过获取id
document.getElementById("nihao").innerHTML="走";
//alert("你好");//alert输出

</script>



<form id="f1" name="f1" onsubmit="return checkform()"> 
用户名：<input type="text" name="username" value="" />
 
<input type="submit" value="提交" />  
</form> 

<script>
function checkform()
{
    var f11=document.f1.username.value.length;
    if(f11>4)
    {alert("小于4");
     return false;}
    }
</script>

<form onsubmit="return validation()"> 
    <span>账号</span><input type="text" id="no" /><br>
    <span>密码</span><input type="text" id="pwd" /><br>
    <button type="submit">提交</button>
</form>
<script>
function validation() {
    var no = document.getElementById("no").value;          
    var pwd = document.getElementById("pwd").value;    
    if(no == "") {
        alert("账号不为空!");
        return false;
    }

if(pwd == "") {
        alert("密码不为空!");
        return false;
    }
}
</script>

<form name=a onsubmit="return test()">
<textarea name="b"  cols="40"  wrap="VIRTUAL" rows="6"></textarea>
<input type="submit" name="Submit" value="check">
</form> 
<script>
function test() 
{
if(document.a.b.value.length>10)
{
alert("不能超过10个字符！");
document.a.b.focus();
return false;
}
}
</script>