JavaScript 양식 처리 구현 코드_기본 지식

원폼 소개

HTML에서 양식은

요소로 표현되는 반면, JavaScript에서는 양식이 HTMLFormElement 유형에 해당합니다.

//HTMLFormElement는 HTMLElement를 상속하므로 HTML 요소의 기본 속성과 자체 속성 및 메서드도 갖습니다.
HTMLFormElement 속성 및 메서드
속성 또는 메소드 설명
acceptCharset 서버가 처리할 수 있는 문자 집합입니다.
작업이 요청된 URL을 수락합니다.
요소 양식의 모든 컨트롤 모음입니다.
enctype이 요청한 인코딩 유형;
length 양식의 컨트롤 수
method 전송할 HTTP 요청 유형으로, 일반적으로 'get' 또는 'post'입니다.
name 양식 이름
요청을 보내고 응답을 받는 데 사용되는 대상 창 이름;
Reset()은 모든 양식을 재설정합니다.
submit() 양식을 제출합니다.

1. 양식 개체를 가져옵니다.
document.getElementById('myForm'); // ID를 사용하여

document.getElementsByTagName('form')[0]; // 양식 요소 컬렉션의 첫 번째 요소를 가져오는 데 사용합니다.
document.forms[0]; // 요소를 가져오려면 양식의 숫자 첨자를 사용하세요.
document.forms['myForm']; // 요소를 가져오려면 양식의 이름 첨자를 사용하세요.
2. 양식 제출

(1) 이벤트 개체를 통해 제출 이벤트의 기본 동작은 데이터가 있는 지정된 페이지로 이동하는 것입니다.

코드 복사 코드는 다음과 같습니다.

​ addEvent(fm,'submit',function(evt){

          preDef(evt);
});

(2) submit() 메소드를 사용하여 제출 이벤트의 트리거를 사용자 정의할 수 있습니다. 즉, 제출하기 위해 제출 버튼을 클릭할 필요가 없습니다.

코드 복사 코드는 다음과 같습니다. If(e.ctrlKey && e.keyCode ==13){

>                                                                    }

// 추신: 양식에 name="submit" 또는 id="submit"과 같은 이름을 사용하지 마십시오. 이렇게 하면 submit() 메서드와 충돌하여 제출이 실패하게 됩니다.



(3) 반복 제출
// 데이터가 서버에 제출되면 오랜 시간 동안 지연이 발생하고 반영되지 않아 사용자가 계속 제출을 클릭하게 됩니다.

// 결과적으로 동일한 요청이 반복적으로 제출되거나 오류가 발생하거나 동일한 정보가 여러 개 데이터베이스에 기록됩니다.

코드 복사

코드는 다음과 같습니다. AddEvent(fm,'submit',function(evt){ // 서버 지연 시뮬레이션;           preDef(evt);

Settimeout(함수() {//처리가 서버에 제출되기 3초 전;

                                fm.submit();
},3000);
});

// 중복 제출 계획 해결
// 첫 번째 유형: 제출 직후 클릭 버튼을 비활성화합니다.
Document.getElementById('sub').disabled = true; // 버튼을 비활성화합니다. // 두 번째 유형: 제출 후 후속 양식 제출 작업을 취소합니다.

var flag = false; var flag = false; //리스닝 변수 설정;
if(flag == true)return; // 존재하는 경우 종료 이벤트를 반환합니다.
flag = true; // 그렇지 않은 경우에는 처음으로 수신 변수의 값을 변경해야 합니다.




3. 양식 재설정

4.表单字段

// 表单处理中,建议使用HTMLDOM,它有自己的elements属性,该属性是表单中所有元素的集合;
    fm.elements[0];                                     // 获取第一个表单字段元素;
    fm.elements['user'];                                // 获取name值是user的表单字段元素;
    fm.elements.length;                                 // 获取所有表单字段的数量;

(1).共有的表单字段属性
// 除了

元素之外,所有表单字段都拥有相同的一组属性;
属性                     说明
disabled         布尔值,表示当前字段是否被禁用;
form             指向当前字段所属表单的指针,只读;
name             当前字段的名称;
readOnly         布尔值,表示当前字段是否只读;
tabIndex         表示当前字段的切换;
type             当前字段的类型;
value            当前字段的值;
    fm.elements[0].value;                               // 获取和设置value;
    fm.elements[0].disabled = true;                     // 禁用当前字段;

(2).共有的表单字段方法
方法                     说明
focus()          将焦点定位到表单字段里;
blur()           从元素中将焦点移走;

(3).共有的表单字段事件

事件名                     说明
blur             当字段失去焦点时触发;
change           对于和元素,在改变value并失去焦点时触发;对于<select>元素,在改变选项时触发;<br> focus            当前字段获取焦点时触发;</select>

// 利用focus事件修改文本框的背景色;
// 利用change事件在用户输入非数值字符时再次修改背景色;
  var bextbox = document.forms[0].elements[0];
  EventUtil.addHandler(textbox,'focus',function(evt){
    evt = EventUtil.getEvent(evt);
    var target = EventUtil.getTarget(evt);
    if(target.style.backgroundColor != 'red'){
      target.style.backgroundColor = 'yellow';    // 选中状态时文本框的背景是黄色;
    }
  });

  EventUtil.addHandler(textbox,'blur',function(evt){   // 失去焦点事件;
    evt = EventUtil.getEvent(evt);
    var target = EventUtil.getTarget(evt);
    if(/[^\d]/.test(target.value)){           // 输入非数值字符时;
      target.style.backgroundColor = 'red';      // 文本框背景变成红色;
    }else{
      target.style.backgroundColor = '';
    }
  });

  EventUtil.addHandler(textbox,'change',function(evt){  // 改变value值且失去焦点事件;
    evt = EventUtil.getEvent(evt);
    var target = EventUtil.getTarget(evt);
    if(/[^\d]/.test(target.value)){
      target.style.backgroundColor = 'red';      // 文本框变成红色;
    }else{
      target.style.backgroundColor = '';
    }
  });

二 文本框脚本
// 在HTML中,有两种方式来表现文本框:

// 一种是单行文本框;

// 一种是多行文本框;

1.获取value值

// 虽然在字面上有value值,而却没有,但可以通过value获取它们的值;<br>     var textField = fm.elements[0];<br>     var areaField = fm.elements[1];<br>     alert(textField.value+','+areaField.value);           // 得到<input>和<textarea>的value值;<br>     // PS:使用表单的value是最推荐的,它是HTMLDOM中的属性,不建议使用标准的DOM的方法getAttribute();<br>     // 原因是:对value属性的修改,不一定反映在DOM中;

// defaultValue:得到原本的value值;不会因为值的改变而变化;
    alert(textField.defaultValue);                        // 得到最初设置的value值;

2.选择文本

// 使用select()方法,可以将文本框里的内容选中,并将焦点设置到文本框中;
  textField.select();                   // 在文本框获得焦点时选择其所有文本;

// 选取部分文本
// 在使用文本框内容的时候,我们有时要直接选定部分文本,这个行为还没有标准;
// Firefox的解决方案是:setSelectionRange()方法;它接受两个参数:索引和长度;
  textField.setSelectionRange(0,1);            // 选择第一个字符;
  textField.setSelectionRange(0,textField.value.length);  // 选择全部; 
  // IE8以下不支持这种写法,可以使用IE的范围操作代替;
  var range = textField.createTextRange();         // 创建一个文本范围对象;
  range.collapse(true);                  // 将指针移动到起点;
  range.moveStart('character',0);             // 移动指针,character表示逐字移动;
  range.moveEnd('character',1);              // 移动终点;
  range.select();                     // 焦点选定;

// 选择部分文本兼容函数
  function selectText(text,start,stop){
    if(text.setSelectionRange){
      text.setSelectionRange(start,stop);
      text.focus();
    }else if(text.createTextRange){
      var range = text.createTextRange();
      range.collapse(true);
      range.moveStart('character',start);
      range.moveEnd('character',sotp-start);
      range.select();
    }
  }

// 与select()方法对应的,是一个select事件,可以选中文本框文本后触发;
  addEvent(textField,'select',function(){
    alert(this.value);                // IE事件需要传递this才可以这么写;
  });

// 获得选择的文本
// Firefox提供了两个属性:selectionStart和selectionEnd;
  addEvent(textField,'select',function(){
    alert(this.value.substring(this.selectionStart,this.selectionEnd));
  });
  // IE8以下,提供了另一个方案:selection对象,属于document;
  // 这个对象保存着用户在整个文档范围内选择的文本信息;
  // 兼容函数
  function getSelecText(text){
    if(typeof text.selectioinStart =='number'){     // 非IE;
      return text.value.substring(text.selectionStart,text.selectionEnd);
    }else if(document.selection){            // IE;
      return document.selection.createRange().text;  // 获取IE选择的文本;
    }
  }
  // PS:存在问题:IE在触发select事件的时候,在选择一个字符后立即触发,而其他浏览器是选择想要的字符后释放鼠标键时再触发;
  // 所以使用alert()的话,导致跨浏览器的不兼容;
  // 所以我们可以通过将得到的选择文本赋值给别的对象;
  addEvent(textField,'select',function(){
    // alert(getSelecText(this));            // 导致用户行为结果不一致; 
    document.getElementById('box').innerHTML = getSelecText(this);
  })

3.过滤输入

// 为了使文本框输入指定的字符,我们必须对输入进文本框的字符进行验证;
  addEvent(areaField,'keypress',function(evt){
    var e = evt || window.event;
    var charCode = getCharCode(evt);      // 得到字符编码;
    if(!/\d/.test(String.formCharCode(charCode)) && charCode>9 && !e.ctrlKey){
      preDef(evt);              // 条件阻止默认;
    }
  });
  // PS:前半段条件判断只有数字才可以输入,导致常规按键,比如光标键/退格键/删除键等无法使用;
  // 部分浏览器比如Firefox,需要解放这些键,而非字符触发的编码均为0;
  // 在Safari3之前的浏览器,也会被阻止,而它对应的字符编码全部为8,所以最后加上charCode>9的判断;
  // 确保用户没有按下ctrl键;

// 阻止文本框裁剪/复制和粘贴;
事件名        说明
copy     在发生复制操作时触发;
cut      在发生裁剪操作时触发;
paste     在发生粘贴操作时触发;
beforecopy  在发生复制操作时触发;
beforecut   在发生裁剪操作时触发;
beforepaste  在发生粘贴操作时触发;
// 如果我们想要禁用裁剪/复制/粘贴,那么可以阻止默认行为即可;
  addEvent(areaField,'cut',function(evt){
    preDef(evt);
  });
  addEvent(areaField,'copy',function(evt){
    preDef(evt);
  });
  addEvent(areaField,'paste',function(evt){
    preDef(evt);
  });

// 最后一个影响输入的因素,就是:输入法;
// 中文输入法,它的原理是在输入法面板上先储存文本,按下回车就写入英文文本,按下空格就写入中文文本;
// 解决方案:通过CSS来禁止调出输入法;
  style='ime-mode:disabled';          // CSS直接编写;
  areaField.style.imeMode='disabled';      // 在JS中设置;
  // PS:Chrome无法禁止输入法调出,所以,最后使用正则验证已输入的文本;
  addEvent(areaField,'keyup',function(evt){
    this.value = this.value.replace(/[^\d]/g,'');  // 把非数字都替换成空;
  });

4.自动切换焦点

// 为了增加表单字段的易用性,很多字段在满足一定条件时(比如长度),就会自动切换到下一个字段上继续填写;
  <input type='text' name='user1' maxlength='1'/>    // 只能写1个;
  <input type='text' name='user2' maxlength='2'/>   
  <input type='text' name='user3' maxlength='3'/>
  function tabForward(evt){
    var e = evt || window.event;
    var target = getTarget(evt);
    // 判断当前长度是否和指定长度一致;
    if(target.value.length == target.maxLength){
      // 遍历所有字段;
      for(var i=0; i<fm.elements.length; i++){
        // 找到当前字段;
        if(fm.elements[i]==target){
          // 就把焦点移入下一个字段;
          if(fm.elements[i+1]){
            fm.elements[i+1].focus();
          }
          // 中途返回;
          return;
        }
      }
    }
  }

三 选择框脚本

选择框是通过和元素创建的;

HTMLSelectElement对象

属性/方法                 说明
add(new,rel)        插入新元素,并指定位置;
multiple            布尔值,是否允许多项选择;
options             元素的HTMLCollection集合;
remove(index)       移除给定位置的选项;
selectedIndex       基于0的选中项的索引,如果没有选中项,则值为-1;
size                选择框中可见的行数;

// 在DOM中,每个元素都有一个HTMLOptionElement对象,以便访问数据;
HTMLOptionElement对象
属性 说明
index 当前选项在options集合中的索引;
label 当前选项的标签;
selected 布尔值,表示当前选项是否被选中;
text 选项的文本;
value 选项的值;

var city = fm.elements['city'];      // HTMLSelectElement;
  alert(city.options);            // HTMLOptionsCollection;
  alert(city.options[0]);          // HTMLOptionElement;
  alert(city.type);             // select-one;
  // PS:选择框里的type属性有可能是:select-one,也有可能是:select-multiple;
  // 这取决于HTML代码中有没有multiple属性;

  alert(city.options[0].text);       // 上海text,获取text值;
  alert(city.options[0].value);      // 上海value,获取value值;
  // PS:操作select时,最好使用HTMLDOM,以为浏览器兼容性比较好;
  // 如果使用标准DOM,会因为不同的浏览器导致不同的结果;
  // PS:当选项没有value值的时候,IE会返回空字符串,其他浏览器会返回text值;

2.选择选项

对于只能选择一项的选择框,使用selectedIndex属性最为简单;

复制代码 代码如下:

    addEvent(city,'change',function(){
        alert(this.selectedIndex);                        // 得到当前选项的索引,从0开始;
        alert(this.options[this.selectedIndex].text);     // 得到当前选项的text值;
        alert(this.options[this.selectedIndex].value);    // 得到当前选项的value值;
    });
    city.selectedIndex = 1;                               // 设置selectedIndex可以定位某个索引;

通过option的属性selected(布尔值),也可以设置定位某个索引,设置为true即可;
    city.options[0].selected = true;                      // 设置第一个索引;

selected和selectedIndex区别:
1.selected是返回的布尔值;所以一般用于判断上;
2.selectedIndex返回的是数值,一般用于设置和获取;

复制代码 代码如下:

    addEvent(city,'change',function(){
        if(this.options[2].selected == true){             // 判断第三个选项是否被选定;
            alert('正确!');
        }
    });

3.添加选项
// 如需要动态的添加选项,我们提供两种方案:DOM和Option构造函数;
(1).DOM
var option = document.createElement('option');
option.appendChild(document.createTextNode('北京 text'));
option.setAttribute('value','北京 value');
city.appendChild(option);

(2).Option构造函数
var option = new Option('北京 text','北京 value');
city.appendChild(option); // IE出现bug;

(3).使用add()方法来添加选项:
var option = new Option('北京 text','北京 value');
city.add(option,0); // 0,表示添加到第一位;
// PS:在DOM规定,add()中两个参数是必须的,如果不正确索引,那么第二个参数设置null即可,即默认移入最后一个选项;
// 但在IE中第二个参数是可选的,所以设置null表示放入不存在的位置,导致失踪;
// 为了兼容性,可以传递undefined即可兼容;
city.add(option,null); // IE不显示了;
city.add(option,undefined); // 兼容;

 4.移除选项

// 有三种方式可以移除某一个选项:DOM移除/remove()方法移除和null移除;
city.removeChild(city.option[0]); // DOM移除;
city.remove(0); // remove()移除,推荐;
city.options[0] = null; // null移除;
// PS:当第一项移除后,下面的项,往上移,所以不停的移除第一项,即可全部移除;

5.移动选项

// 如果有两个选择框,把第一个选择框里的第一个选项移到第二个选择框里,并且第一个选择框里的第一项被移除;
var city = fm.elements['city']; // 第一个选择框;
var info = fm.elements['info']; // 第二个选择框;
info.appendChild(city.options[0]); // 移动,并在第一个选择框中删除;

 6.排列选项

选择框提供了一个index属性,可以得到当前选项的索引值,和selectedIndex的区别是,一个是选择框对象的调用,一个是选项对象的调用;

复制代码 代码如下:

     var option1 = city.options[1];
     city.insertBefore(option1,city.options[option1.index-1]);    // 往上移位;

7.单选按钮

// 通过checked属性来获取单选按钮的值;
  for(var i=0; i<fm.sex.length; i++){          // 循环单选按钮; 
    if(fm.sex[i].checked == true){           // 遍历每一个,找出处于选中状态的那一个;
      alert(fm.sex[i].value);            // 得到值;
    }
  }
  // PS:除了checked属性之外,单选按钮还有一个defaultChecked按钮,
  // 它获取的是原本的checked按钮对象,而不会因为checked的改变而改变;
  if(fm.sex[i].defaultChecked == true){
    alert(fm.sex[i].value);
  }

8.复选按钮

// 通过checked属性来获取复选按钮的值,
  var love = '';
  for(var i=0; i<fm.love.length; i++){
    if(fm.love[i].checked == true){
      love += fm.love[i].value;
    }
  }
  alert(love);