JS表单验证

 

1.Form 对象

Document

    |

Form

    |

Text Textarea Password Radio Checkbox Button Reset Submit Select Option Hidden

----------------------------------

示例:

<form action="2.html" method="get" name="form1" οnsubmit="return check();">

username:<input name="user" type="text" />

<br><br>

password:<input name="password" type="password" />

<br><br>

<input name="submit" type="submit" value="提交" />

<input name="reset" value="重置" type="reset" />

</form>

<script type="text/javascript">
 function check(){
  /*
  if(document.getElementsByName("user")[0].value=="" || document.getElementsByName("user")[0].value==null)
   alert("username is null ");
  if(document.getElementsByName("password")[0].value=="" || document.getElementsByName("password")[0].value==null)
   alert("password is null ");
  */
  with(document){
   alert(form1.user.value+forms[0].user.value+" "+forms[0].elements[0].value+"/n/r"+
     form1.password.value+"/n/r" );
  }
  return false;

 }
</script>

 

 2.CODE

--------------------------------

<form action="2.html" method="get" name="form1" οnsubmit="return check();">

username:<input name="user" type="text" />

<br><br>

password:<input name="password" type="password" />

<br><br>

email:<input name="email" type="text" size="20" value="amos_tl@126.com" οnclick="checkEmail();" οnselect="checkEmail();" />

<br><br>

sex:
<input name="sex" type="radio" value="男" checked>男</input>
<input name="sex" type="radio" value="女"> 女</input>

<br><br>

你是中国人吗?
<br>
<input name="checkbox" type="checkbox" value="是" checked>是</input>
<input name="checkbox" type="checkbox" value="是的">是的</input>
<input name="checkbox" type="checkbox" value="我是的">我是的</input>
<input name="checkbox" type="checkbox" value="我是中国人" checked>我是中国人</input>

<br><br>

下拉菜单演示<br>
 <select name="downdroplist">
  <option value="http://www.baidu.com">baidu</option>
  <option value="http://www.sina.com">sina</option>
  <option value="http://www.csdn.net">csdn</option>
  <option value="http://6.cn">6.cn</option>
 </select>
 <input name="btn" type="button" value="go" οnclick="goUrl();" />

<input name="submit" type="submit" value="提交" />

<input name="reset" value="重置" type="reset" />

</form>

<script type="text/javascript">
 function goUrl(){
  var url="";
  var i=document.form1.downdroplist.selectedIndex;
  //alert(document.form1.downdroplist.selectedIndex);
  url=document.form1.downdroplist.options[i].value;
  
  window.open(url);
  //location=url;
 }

 function check(){
  /*
  if(document.getElementByName("user").value=="" || document.getElementByName("user").value==null)
   alert("username is null");
  if(document.getElementByName("password").value=="" || document.getElementByName("password").value==null)
   alert("password is null");
  */
  with(document){
   alert(document.getElementsByName("user")[0].value+" "+forms[0].user.value+" "+forms[0].elements[0].value+"/n/r"+
     form1.password.value+"/n/r"+
     form1.sex[0].value+"/n/r"+
     form1.sex[1].value+"/n/r"+
     form1.checkbox[0].value+"/n/r"+
     form1.checkbox[1].value+"/n/r"+
     form1.checkbox[2].value+"/n/r"+form1.checkbox[3].checked+
     form1.checkbox[3].value+"/n/r"
   );
  }
  
  
  return false;

 }

 function checkEmail(){
  var e=document.form1.email.value;
  if(e=="" || e.indexOf('@')==-1 || e.indexOf('.')==-1 || e.indexOf('@')>=e.indexOf('.'))
  {
   alert("E-mail不合法!");
   document.form1.email.value="amos_tl@126.com";
   return false
  }
  
  
  return true;

 }
</script>