[JavaScript基础]学习③③--操作表单

HTML表单的输入控件

文本框，对应的，用于输入文本；

口令框，对应的，用于输入口令；

单选框，对应的，用于选择一项；

复选框，对应的，用于选择多项；

下拉框，对应的，用于选择一项；

隐藏文本，对应的

，用户不可见，但表单提交时会把隐藏文本发送到服务器。

获取值

// 
var input = document.getElementById('email');
input.value; // '用户输入的值'

单选框和复选框

//  Monday
//  Tuesday
var mon = document.getElementById('monday');
var tue = document.getElementById('tuesday');
mon.value; // '1'
tue.value; // '2'
mon.checked; // true或者false
tue.checked; // true或者false

设置值

// 
var input = document.getElementById('email');
input.value = '[email protected]'; // 文本框的内容已更新

HTML5控件

常用的包括date、datetime、datetime-local、color等

提交表单

submit()方法

    
    Submit

响应

本身的onsubmit事件

    
    Submit

这个做法看上去没啥问题，但用户输入了口令提交时，口令框的显示会突然从几个变成32个（因为MD5有32个字符）。

不改变用户的输入，可以利用

    
    
    
    Submit

没有name属性的的数据不会被提交

练习

用户名必须是3-10位英文字母或数字；

口令必须是6-20位；

两次输入口令必须一致。

    

    

        用户名: 
    
    

        口令: 
    
    

        重复口令: 
    
    

        提交 重置
    

'use strict';
var checkRegisterForm = function () {
            var username = document.getElementById('username');
            var password = document.getElementById('password');
            var passwd_2 = document.getElementById('password-2');
            var re = /[0-9a-zA-Z]*/;
            
            if (username.value.length > 10 || username.value.length < 3) {
                alert("false1");
                return false;
            } else if (!re.test(username)) {
                alert("false2");
                return false;
            } else if (password.value.length > 20 || password.value.length < 6) {
                alert("false3");
                return false;
            } else if (password.value != passwd_2.value) {
                alert("false4");
                return false;
            } else {
                alert("true");
                return true;
            }
        }

// 测试:
;(function () {
    window.testFormHandler = checkRegisterForm;
    var form = document.getElementById('test-register');
    if (form.dispatchEvent) {
        var event = new Event('submit', {
            bubbles: true,
            cancelable: true
          });
        form.dispatchEvent(event);
    } else {
        form.fireEvent('onsubmit');
    }
})();