Validating Common Form Input - Part 1

1.准备测试的Form

<form onsubmit="return validate(this);">
  Username<br />
  <input type="text" name="username" value="" /><br />
  Password<br />
  <input type="password" name="password1" value="" /><br />
  Repeat password<br />
  <input type="password" name="password1" value="" /><br />
  Name<br />
  <input type="text" name="name" value="" /><br />
  Address<br />
  <input type="text" name="address" value="" /><br />
  Phone<br />
  <input type="text" name="phone" value="" /><br />
  Email<br />
  <input type="text" name="email" value="" /><br />
  Website<br />
  <input type="text" name="website" value="" /><br />
  <input type="Submit" value="Submit" />
</form>

2.为form 添加验证事件

<form onsubmit="return validate(this);">
...
</form>

3.一个简单的验证方法(验证单个元素不能为空)

function validate(form) {
  // If no value in Username input field
  if(!form.elements.username.value)
    return false;
  else
    return true;
}

4.第二个验证方法(验证所有元素不能为空)

function validate(form) {
  // For every input field in the form
  for(var i=0; i<form.elements.length; i++) {
    // If the input field is empty
    if(!form.elements[i].value)
      return false;
  }
  return true;
}