js 表单非空验证

通过判断（if）表单标签中的name属性，去确认表单中的value里面是否为空。

　　如果是，则弹出提示框。

<input type="text" name="topic" placeholder="日记主题"><br>

if(form1.topic.value==""){
　　alert("日记主题不能为空！");  //提示框

　　form1.topic.focus();　　//.focus()：获取焦点。就是自动把光标移到该表单上

　　return false;　　//返回
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
    <form action="" method="post" action="" onsubmit="return check_form(this)"> 　　　　//这里不加return将不会触发
       <input type="text" name="topic" placeholder="日记主题"><br>
    <textarea name="wznr" rows="6" placeholder="写点什么吧"></textarea><br>
    <input name="submit" type="submit" value="发表" >
    <input name="reset" type="reset" value="重置">
    </form>
    <script>
        function check_form(form1){
    if(form1.topic.value==""){
      alert("日记主题不能为空！");form1.topic.focus();return false;
    }
    
    if(form1.wznr.value=="")  {
      alert("内容不能为空!");form1.wznr.focus();return false;
    }
}

    </script>
    </body>
</html>

以上为简单案例，并未添加css样式。

posted @ 2018-05-25 13:37  银王意志  阅读(532)  评论(0)  编辑  收藏  举报