表单验证(8/30)

HTML表单

表单是用于从用户收集输入的HTML机制。
要创建基本表单，您需要三个元素: form，input 和 button 元素。

  

    
    Submit Vote
  

method属性指定将使用哪个HTTP方法将表单数据发送到服务器。
允许的值为 get 和 post ，它们对应于HTTP GET和POST方法。
method属性的默认值为 get 。
以下代码设置表单的 post 值:

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
表单数据经常需要使用 JavaScript 来验证其正确性：
验证表单数据是否为空？
验证输入是否是一个正确的email地址？
验证日期是否输入正确？
验证表单输入内容是否为数字型？

1. 下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。

function validateForm()
{
  var x=document.forms["myForm"]["fname"].value;
  if (x==null || x=="")
  {
    alert("姓必须填写");
    return false;
  }
}

以上函数在 form 表单提交时被调用:

姓: 

onsubmit 会在表单中的确认按钮被点击时发生。
语法:
onsubmit="SomeJavaScriptCode"

HTML 表单验证也可以通过浏览器来自动完成。
如果表单字段 (fname) 的值为空, required 属性会阻止表单提交：

  
  


点击提交按钮，如果输入框是空的，浏览器会提示错误信息。

2. 下面的函数检查输入的数据是否符合电子邮件地址的基本语法。
   意思就是说，输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：

function validateForm(){
  var x=document.forms["myForm"]["email"].value;
  var atpos=x.indexOf("@");
  var dotpos=x.lastIndexOf(".");
  if (atpos<1 || dotpos=x.length){
    alert("不是一个有效的 e-mail 地址");
    return false;
  }
}

以上函数在 form 表单提交时被调用:

Email: