编程语言
首页 > 编程语言> > javascript高级程序设计学习笔记(六)---表单脚本

javascript高级程序设计学习笔记(六)---表单脚本

作者:互联网

表单脚本

表单基础

表单由< form >来表示。但是在JavaScript中,表单时HTMLFormElement类型。属性;

可以使用document.forms[]获取页面的所有表单

提交表单

<form action="./api" method="post">
		  <input name="isindex">
		  <input name="a">
		  <button>submit</button>
		</form>
	
form.addEventListener(
	  'submit', function(event) {
	    var notValid = false;
	    var elements = event.target.elements;
	
	    // 自定义验证
	
	    if (notValid) {
	      // 取消提交
	      event.preventDefault();
	    }
	  }
	)

无刷新表单提交范例
常用的方式是通过 AJAX 进行实现,这里我们使用 iframe 来做中介代理实现。
在这里插入图片描述

所需知识点:

form
target
iframe
<iframe name="targetFrame" class="f-hidden" style="display:none" id="result">
	
	<form action="./api" method="post" target="targetFrame">
	  <input name="isindex">
	  <input name="a">
	  <button>submit</button>
	</form>
	var frame = document.getElementById('result');
	frame.addEventListener(
	  'load', function(event) {
	    try {
	      var result = JSON.parse(
	        frame.contentWindow.document.body.textContent
	      );
	
	      // 还原登陆按钮状态
	      disabledSubmit(false);
	
	      // 识别登陆结果
	      if (result.code === 200) {
	        showMessage('j-suc', 'success');
	        form.reset();
	      }
	    } catch(ex) {
	      // 忽略操作
	    }
	  }
	)

使用< input >或< button>提交表单,将其type设置为submit。

<input type="submit" value="Submit Form">
<button type="submit">Submit Form< /button>

使用事件绑定,阻止事件的默认行为,可以取消表单提交。

var form = document.getElementById("myForm")
EventUtil.addHandle(form,'submit',function(event){
    even = EventUtil.getEvent(event);
    EventUtil.preventDefault(event);
})
form.submit();

解决重复提交表单:在第一次提交表单后禁用提交按钮,或者用onsubmit事件处理程序取消后续表单提交操作

重置表单

重置表单:

 <input type="reset" value="Reset Form">
 <button type="reset">Reset Form</button>

组织重置表单:

var form = document.getElementById("myForm")
EventUtil.addHandle(form,'reset',function(event){
    even = EventUtil.getEvent(event);
    EventUtil.preventDefault(event);
});
form.reset();

表单字段

elements属性是表单中所有元素的集合。该集合包含表单中所有的字段。

var form = document.getElementById("form1");
var field1 = form.elements[0];
var field2 = form.elements['textbox1'];
var fieldCount = form.elements.length;

避免多次提交表单:

  EventUtil.addHandler(form,'submit',function(event){
      event = EventUtil.getEvent(event);
      var target = EventUtil.getTarget(event);
  
      var btn = target.elements['submit-btn'];
  
      // 禁用
      btn.disabled = true;
  });

一般不通过监听click事件来实现上面功能,因为不同浏览器,可能有的在触发submit事件之前触发click,有的则相反。且只有在包含提交按钮情况下,才有可能触发表单的submit事件。

  EventUtil.addHandler(window,"load",function(event){
      var element = document.forms[0].elements[0];
      if(element.autofocus !== true){
          element.focus();
          console.log('focus');
      }
  })
  var textbox = document.forms[0].elements[0];
  EventUtil.addHandler(textbox,"focus",function(event){
      event = EventUtil.getEvent(event);
      var target = EventUtil.getTarget(event);
      if(target.style.backgroundcolor != "red"){
          target.style.backgroundcolor = "yellow"
      }
  });
  
  
  EventUtil.addHandler(textbox,"blur",function(event){
      event = EventUtil.getEvent(event);
      var target = EventUtil.getTarget(event);
      if(/[^\d]/.test(target.value)){
          target.style.backgroundcolor = "red"
      }else{
          target.style.backgroundcolor = "yellow"
      }
  });
  
  EventUtil.addHandler(textbox,"change",function(event){
      event = EventUtil.getEvent(event);
      var target = EventUtil.getTarget(event);
      if(/[^\d]/.test(target.value)){
          target.style.backgroundcolor = "red"
      }else{
          target.style.backgroundcolor = ""
      }
  });
//获取表单
var form = document.forms.loginForm;
var message = document.getElementById('message');
//展示信息
function showMessage(class, message) {
  if(!class) {
    message.innerHTML = "";
    message.classList.remove('j-suc');
    message.classList.remove('j-err');
  } else {
    message.innerHTML = message;
    message.classList.add(class);
  }
}
//表单invalid输入
function invalidInput (node, message) {
  showMessage('j-err', message);
  node.classList.add('j-err');
  node.focus();
}
//清楚invalid输入
function clearInvalid(node){
  showMessage();
  node.classList.remove('j-err');
}

function disabledSubmit(disabled) {
  form.loginBtn.disabled = !!disabled;
  var method = !disabled ? 'remove' : 'add';
  form.loginBtn.classList[method]('j-disabled');
}

// 验证手机号码(系统自带方法)
form.telephone.addEventListener(
  'invalid', function(event) {
    event.preventDefault();
    invalidInput(form.telephone, 'invalid mobile number');
  }
);

// 验证密码
form.addEventListener(
  'submit', function(event) {
  //获取密码
    var input = form.password;
    var password = input.value;
    errorMessage = '';
    //验证长度
    if (password.length < 9) {
      errorMessage = 'password less than 9 char';
    } else if (!/\d./test(password) || !/[a-z]/i.test(password)) {
      errorMessage = 'password must contains number and letter'
    }

    if (!errorMessage) {
    //阻止提交
      event.preventDefault();
      invalidInput(input, errorMessage);
      return;
    }
  }
);
// 提交表单
form.addEventListener(
  'submit', function(event){
  //加密处理
    input.value = md5(password);
    disabledSubmit(true);
  }
);
// 状态恢复
form.addEventListener(
  'focus', function(event) {
    // 错误还原
    clearInvalid(event.target);
    // 还原登陆按钮状态
    disabledSubmit(false);
  }
)

文本框脚本

input元素的单行文本框—type为text,

textarea 元素

selection
表示选择区域,对于 input 元素同样有效。

selectionDirection 主要是用于在使用 SHIFT 键与方向键组合选取时的选取方向。设置为 forward 时选取移动的方向为 selectionEnd 设置为 backward 时移动方向为 selectionStart。

@输入提示示例
所需知识点:

oninput
selectionStart
setRangeText

textarea.addEventListener(
  'input', function(event) {
    var target = event.target,
        cursor = target.selectionStart;
    if(target.value.charAt(cursor-1) === '@') {
      doShowAtList(functi=on(name){
        var end = cursor + name.length;
        target.setRangeText(
          name, cursor, end, 'end'
        );
      });
    }
  }
);

选择文本

input和textarea都支持select()方法

var textbox = document.forms[0].elements[0];
EventUtil.addHandler(textbox,"focus",function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    target.select()
});
var textbox = document.forms[0].elements[0];
  EventUtil.addHandler(textbox,"focus",function(event){
       alert(textbox.value)
  });
  var textbox = document.forms[0].elements[0];
  function getSelectedText(textbox){
      return textbox.value.substring(textbox.selectionStart,textbox.selectionEnd)
  }
  setSelectionRange()
  var textbox = document.forms[0].elements[0];
  textbox.value = "hello world";
  textbox.setSelectionRange(0,textbox.value);
  textbox.setSelectionRange(0,2);

过滤输入

  EventUtil.addHandler(textbox,"keypress",function(event){
      event = EventUtil.getEvent(event);
      var target = EventUtil.getTarget(event);
      var charCode = EventUtil.getCharCode(event);
      if(!/\d/.text(String.fromCharCode(charCode))&&charCode>9&&!event.ctrlKey){
          EventUtil.preventDefault(event)
      }
  });

6个剪贴板事件

使用clipboardData对象访问剪贴板中的数据。只有在处理剪贴板事件期间有效。存在三个方法:

 var EventUtil = {
      getClipboardText:function(event){
          var clipboardData = (event.clipboardData||window.clipboardData):
          return clipboardData.getData("text");
      },
  
      setClipboardText:function(event,event){
          if(event.clipboardData){
              return event.clipboardData.setData("text/plain",value);
          }else if(window.clipboardData){
              return window.clipboardData.setData("text",value)
          }
      },
  
  
  }
 (function () {
      function tabForward(event) {
          event = EventUtil.getEvent(event);
          var target = EventUtil.getTarget(event);
  
          if(target.value.length == target.maxLength){
              var form = target.form;
              for(var i=0,len=form.elements.length;i<len;i++){
                  if(form.elements[i]==target){
                      if(form.elements[i+1]){
                          form.elements[i+1].focus();
                      }
                      return;
                  }
                  
              }
          }
      }
  })

以下情况不可以做验证

属性
验证涉及到以下的以下属性,在每一个可以验证的元素上均可以调用对于的属性或通过接口进行操作:

自定义异常范例
涉及到的知识点:

oninvalid
setCustomValidity
<form action="./api" method="post">
  <label>Name: <input name="username" required></label>
  <button>submit</button>
</form>
input.addEventListener(
  'invalid', function(event){
    var target = event.target;
    if (target.validity.valueMissing) {
      target.setCustomValidity('Name is missing');
    }
  }
)

禁止验证范例

使用 form 中 novalidate 属性来禁止表单提交的验证。

<form action="./api" method="post" novalidate>
  <label>Mobile: <input name="mobile" type="number"></label>
  <button>submit</button>
</form>
- 必填字段
  required属性
 <input type="text" name="username" required>
<input type="email" name="email" >
  <input type="url" name="homepage" >
  <input type="number" name="count" min="0" max="100" step="5">
  <form method="post" action="signup.php" novalidate> < /form>

选择框脚本

selected的方法和属性有:

option的方法和属性:

只允许选择一项的选择框,使用selectedIndex访问选中项。

 var selectedOption = selectbox.options[selectbox.selectedIndex];
  var selectedIndex = selectbox.selectedIndex;
  var selectedOption = selectbox.options[selectedIndex];

另一种方式:取得某一项的引用,将其selected设置为true。
在允许多选的选择框中设置选项的selected属性,不会取消对其他选中项的选择。但是在单选中,修改则会取消对其他选项的选择。

方法一

 var selectbox = document.getElementById("selLocation");
  var newOption = document.createElement("option");
  newOption.appendChild(document.createTextNode("Option text"));
  newOption.setAttribute("value","Option value");
  
  selectbox.appendChild(newOption)

方法二:
使用Option构造函数创建新选项,

 var newOption = new Option("Option text","Option value"):
  selectbox.appendChild(newOption)

方法三:
使用add()方法。接受参数:要添加的新选项和将位于新选项之后的选项。

  var newOption = new Option("Option text","Option value");
  selectbox.add(newOption,undefined)
  selectbox.removeChild(selectbox.option[0]);
  selectbox.remove(0)
  function clearSelectbox(selectbox){
  	for(var i=0,len=selectbox.option.length;i<len;i++){
  		selectbox..remove(i);
  	}
  }

使用DOM的appendChild方法,可以将第一个选择框中的选项直接移动到第二个选择框中。

  var selectbox1 = document.getElementById("selLocations1");
  var selectbox2 = document.getElementById("selLocations2");
  selectbox2.appendChild(selectbox1.options[0]);

会重置每一个选项的index属性。

在选择框向前移动一个选项的位置:

  var optionToMove = selectbox.options[1];
  selectbox.insertBefore(optionToMove,selectbox.options[optionToMove.index-1]};

富文本编辑

本质:在页面中嵌入一个包含空HTML页面的iframe,通过设置designMode属性,这个空白的HTML页面可以被编辑,而编辑对象则是该页body元素的HTML代码。把designMode设置为on,可以编辑,但只要在页面完全加载后才能设置这个属性。

在这里插入图片描述

在这里插入图片描述

标签:target,form,javascript,表单,---,var,event,EventUtil
来源: https://blog.csdn.net/ningpeixi679/article/details/113127730