验证表单

时间 2019-11-30

标签验证表单栏目 HTML 繁體版

原文原文链接

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="gb2312">
    <title>test</title>
    <script src="jquery-1.11.3.js"></script>
    <script>
       $(document).ready(function(){
           $("form").submit(function(e){
               var username=$("#username").val();
               if(!username){
                   alert("请输入用户名");
               }else{
                   alert($("#username").val());
               }
           })
       })
    </script>
</head>
<body>
    <form method="post" id="login-form">
        <p><label for="username">用户名:</label><input type="text" name="username" id="username" ></p>
        <p><label for="password">密码：</label><input type="password" name="password" id="password"></p>
        <p><input type="submit" id="submit-btn"></p>
    </form>
</body>
</html>

submit 事件会在表单中的确认按钮被点击时发生，但不像click等事件同样是绑定当前触发该事件的元素，submit绑定的应该是整个form表单。html

function sub(){
    var username=document.getElementById("username");
    var user=username.value;
    if(!user){
        alert("请输入用户名");
    }else{
        alert(user);
    }
}
var form=document.getElementById("login-form");
 form.addEventListener("onsubmit",sub,false);

这是原生js的。jquery