Chinaunix

标题: JavaScript就这么回事4：表单 [打印本页]
作者: luckfly    时间: 2006-04-10 00:17
标题: JavaScript就这么回事4：表单
43 表单构成
  
  • form method=”post” action=”target.html” name=”thisForm”>
      
  • input type=”text” name=”myText”>
      
  • select name=”mySelect”>
      
  • option value=”1”>First Choiceoption>
      
  • option value=”2”>Second Choiceoption>
      
  • select>
      
  • br>
      
  • input type=”submit” value=”Submit Me”>
      
  • form>
    44 访问表单中的文本框内容
  • form name=”myForm”>
  • input type=”text” name=”myText”>
  • form>
  • a href='#' onClick='window.alert(document.myForm.myText.value);'>Check Text Fielda>
    45 动态复制文本框内容
  • form name=”myForm”>
  • Enter some Text: input type=”text” name=”myText”>br>
  • Copy Text: input type=”text” name=”copyText”>
  • form>
  • a href=”#” onClick=”document.myForm.copyText.value =
  • document.myForm.myText.value;”>Copy Text Fielda>
    46 侦测文本框的变化
  • form name=”myForm”>
  • Enter some Text: input type=”text” name=”myText” onChange=”alert(this.value);”>
  • form>
    47 访问选中的Select
  • form name=”myForm”>
  • select name=”mySelect”>
  • option value=”First Choice”>1option>
  • option value=”Second Choice”>2option>
  • option value=”Third Choice”>3option>
  • select>
  • form>
  • a href='#' onClick='alert(document.myForm.mySelect.value);'>Check Selection Lista>
    48 动态增加Select项
      
  • form name=”myForm”>
      
  • select name=”mySelect”>
      
  • option value=”First Choice”>1option>
      
  • option value=”Second Choice”>2option>
      
  • select>
      
  • form>
      
  • script language=”JavaScript”>
      
  • document.myForm.mySelect.length++;
      
  • document.myForm.mySelect.options[document.myForm.mySelect.length - 1].text = “3”;
  • document.myForm.mySelect.options[document.myForm.mySelect.length - 1].value = “Third Choice”;

  • 49 验证表单字段
      
  • script language=”JavaScript”>
      
  • function checkField(field) {
      
  • if (field.value == “”) {
      
  • window.alert(“You must enter a value in the field”);
      
  • field.focus();
      
  • }
      
  • }
      

  •   

  • Text Field:


  • 50 验证Select项
  • function checkList(selection) {
  • if (selection.length == 0) {
  • window.alert(“You must make a selection from the list.”);
  • return false;
  • }
  • return true;
  • }
    51 动态改变表单的action
  • form name=”myForm” action=”login.html”>
  • Username: input type=”text” name=”username”>br>
  • Password: input type=”password” name=”password”>br>
  • input type=”button” value=”Login” onClick=”this.form.submit();”>
  • input type=”button” value=”Register” onClick=”this.form.action = ‘register.html’; this.form.submit();”>
  • input type=”button” value=”Retrieve Password” onClick=”this.form.action = ‘password.html’; this.form.submit();”>
  • form>
    52 使用图像按钮
  • form name=”myForm” action=”login.html”>
  • Username: input type=”text” name=”username”>br>
  • Password: input type=”password”name=”password”>br>
  • input type=”image” src=”login.gif” value=”Login”>
  • form>
  • //注意：图像按钮在表单中的作用相当于提交按钮
    53 表单数据的加密
      
  • SCRIPT LANGUAGE='JavaScript'>
      
  • encrypt(item) {
      
  • var newItem = '';
      
  • for (i=0; i item.length; i++) {
      
  • newItem += item.charCodeAt(i) + '.';
      
  • }
      
  • return newItem;
      
  • }
  • function encryptForm(myForm) {
  • for (i=0; i myForm.elements.length; i++) {
  • myForm.elements.value = encrypt(myForm.elements.value);
  • }
  • }

  • //-->


  • Enter Some Text:

  • 上面的encryptForm方法把表单中的数据转换为编码，在提交表单之前完成了简单的表单数据加密～

    本文来自ChinaUnix博客，如果查看原文请点：http://blog.chinaunix.net/u/15511/showart_97518.html



    欢迎光临 Chinaunix (http://bbs.chinaunix.net/) Powered by Discuz! X3.2