JavaScript实现表单校验代码

最新推荐文章于 2024-04-20 14:59:10 发布

酷爱码

最新推荐文章于 2024-04-20 14:59:10 发布

阅读量475

点赞数

分类专栏： JavaScript小作业

本文链接：https://blog.csdn.net/huayula/article/details/111876657

版权

JavaScript小作业专栏收录该内容

29 篇文章 5 订阅

订阅专栏

表单校验功能，当失去焦点时，如果用户名或密码为空，在其后添加提醒信息

提示：提示信息可以放在span中，颜色通过css样式设置

代码如下

<body>
用户名：<input name="username" type="text" onfocus="handleFocus()" onblur="nameBlur()" onchange="nc()"/><font id="1" color="red"></font><br/>
密码：<input name="pwd" type="password" onfocus="handleFocus()" onblur="pwdBlur()" onchange="pc()"/><font id="2" color="red"></font><br/>

<button type="submit">提交</button><br/>
</body>
<script>
function nameBlur() {
    var nam=document.querySelector("font[id='1']");
    var v=document.querySelector("input[name^='u']")
    if(v.value==''){
        nam.innerHTML="*用户名不能为空"
    }
}
function nc() {
    var nam=document.querySelector("font[id='1']");
    nam.innerHTML="";
}
function pwdBlur() {
    var nam=document.querySelector("font[id='2']");
    var v=document.querySelector("input[name^='p']")
    if(v.value==''){
        nam.innerHTML="*密码不能为空"
    }
}
function pc() {
    var nam=document.querySelector("font[id='2']");
    nam.innerHTML="";
}

</script>