详解HTML5 表单属性(2)-木庄网络博客

demo.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        form {  
            width: 100%;  
            max-width: 640px;  
            min-width: 320px;  
            margin: 0 auto;  
            font-family: "Microsoft Yahei";  
            font-size: 20px;  
        }  
   
        input {  
            display: block;  
            width: 100%;  
            height: 30px;  
            margin: 10px 0;  
        } 
    </style>
 
     
</head>
<body>
    <form action="" >
        <fieldset>
            <legend>表单事件</legend>
            <label>
                用户名：<input type="text" name="userName" id="userName">
            </label>
            <label>
                密码：<input type="text" name="pwd" id="pwd">
            </label>
            <label>
                邮箱：<input type="email" name="email" id="email">
            </label>
 
            <input type="submit">
        </fieldset>
    </form>
</body>
 
<script>
    //表单事件: oninput:当用户输入的时候触发。 oninvalid:当验证未通过时触发。
    var txt1 = document.getElementById("userName");
    var txt2 = document.getElementById("pwd");
    var txt3 = document.getElementById("email");
    var num = 0;
 
    //oninput:当用户输入的时候触发该事件
    txt1.oninput = function() {
        num++;
        txt2.value = num;
    };
 
    //oninvalid:验证不通过时触发该事件
    txt3.oninvalid = function() {
        this.setCustomValidity("自定义的提示文本");  //设置验证不通过时的提示文本
    };
</script>
 
</html>