JS表单必填内容没有填或者填错了。怎么让他不能提交?

JavaScript07

JS表单必填内容没有填或者填错了。怎么让他不能提交?,第1张

在form的onSubmit事件中进行字段值的校验,如果有错误就提示用户并且return false以阻止提交。如果用jquery的话,推荐jquery.validate.js校验插件。

<html>

<head>

<script type="text/javascript">

function validate()

{

var ok=true,un,pw1,pw2,el,ch0

var r = /^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/g

if(""==(un=document.f.user.value))

{

alert("用户名不能为空!")

document.f.user.focus()

ok=false

}

else if(""==(pw1=document.f.password1.value))

{

alert("密码不能为空!")

document.f.password1.focus()

ok=false

}

else if(""==(pw2=document.f.password2.value))

{

alert("重复密码不能为空!")

document.f.password2.focus()

ok=false

}

else if(""==(el=document.f.email.value))

{

alert("邮箱不能为空!")

document.f.email.focus()

ok=false

}

if(ok)

{

if(!(un.length>=6 &&un.length<=20))

{

alert("用户名长度必须大于等于6小于等于20!")

document.f.user.focus()

ok=false

}

else

{

ch0=un.charAt(0).toLowerCase()

if(!(ch0>="a" &&ch0<="z"))

{

alert("用户名必须以字母开头!")

document.f.user.focus()

ok=false

}

else if(pw1!=pw2)

{

alert("重复密码与密码必须相同!")

document.f.password2.focus()

ok=false

}

else if(!r.test(el))

{

alert("不是有效的邮箱地址!")

document.f.email.focus()

ok=false

}

}

}

if(ok)

{

alert("恭喜你,通过了有效性验证!")

}

}

</script>

</head>

<body>

<form name="f">

用户名:<input type="text" name="user" /><br /><br />

密码:<input type="text" name="password1" /><br /><br />

重复密码:<input type="text" name="password2" /><br /><br />

邮箱:<input type="text" name="email" /><br /><br />

<input type="button" value="验证" onclick="validate()" />

</form>

</body>

</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>New Document </TITLE>

<META NAME="Generator" CONTENT="EditPlus">

<META NAME="Author" CONTENT="">

<META NAME="Keywords" CONTENT="">

<META NAME="Description" CONTENT="">

</HEAD>

<BODY>

<table width="500" border="0" align="center" cellpadding="4" cellspacing="1" bgcolor="#CCCCCC">

<form name="form" method="post" >

<tr bgcolor="#f9f9f9">

<td width="13%" height="20" ><div align="right">姓名:</div></td>

<td width="53%" height="20"><input type="text" name="name" id="name" class="write" size="20" maxLength=8>

*8个字内</td>

<script>

function showimage(){document.images.showimages.src="<%=imdeximg%>"+document.form.sex.options[document.form.sex.selectedIndex].value+""+document.form.img.options[document.form.img.selectedIndex].value+".gif"}

</script>

</tr>

<tr bgcolor="#f9f9f9">

<td height="20" align="right">性别: </td>

<td height="20"><select name="sex" size="1" onChange="showimage()">

<option value="1">男</option>

<option value="0">女</option>

</select></td>

</tr>

<tr bgcolor="#f9f9f9">

<td height="20" align="right">QQ:</td>

<td height="20"><input name="qq" type="text" id="qq" size="35" maxLength=15 class="write">

*</td>

</tr>

<tr bgcolor="#f9f9f9">

<td height="20" align="right">主页: </td>

<td height="20"><input name="web" type="text" value="http://" size="35" maxLength=50 class="write">

</td>

</tr>

<tr bgcolor="#f9f9f9">

<td height="20" align="right">来自:</td>

<td height="20"><input name="come" type="text" id="come" size="35" class="write"></td>

</tr>

<tr bgcolor="#f9f9f9">

<td height="20" align="right">电子邮箱:</td>

<td height="20"><input name="email" type="text" value="" size="35" maxlength=50 class="write">

*</td>

</tr>

<tr bgcolor="#f9f9f9">

<td height="20" align="right">主题:</td>

<td height="20">

<input name="title" type="text" class="write" id="title" size="35" maxLength=10>

*

</td>

</tr>

<tr bgcolor="#f9f9f9">

<td align="right" valign="top">留言内容: </td>

<td><textarea name="words" cols="50" rows="8" class="input1" id="words"

onKeyDown=gbcount(this.form.words,this.form.total,this.form.used,this.form.remain)

onKeyUp=gbcount(this.form.words,this.form.total,this.form.used,this.form.remain)></textarea>

* </td>

</tr>

<tr bgcolor="#f9f9f9">

<td align="right" valign="top" height="30"></td>

<td height="30">最多字数: <INPUT disabled maxLength=4 name=total size=3 value=<%=txt%>>

已用字数:

<INPUT disabled maxLength=4 name=used size=3 value=0>

剩余字数:

<INPUT disabled maxLength=4 name=remain size=3 value=<%=txt%>></td>

</tr>

<tr align="center" bgcolor="#EAEAEA">

<td height="20" colspan="2"> <input name='validatecode' type='text' size='5'><img

src='/validatecode.asp' align='absmiddle' border='0'><br>

<br>

<input type="hidden" name="action_e" value="Add_New">

<input type="button" onclick="DoSave()" name="Submit" value=" 提 交 " class="input1"><input type="reset" name="Submit2" value=" 重 写 " class="input1">

</td></tr>

</form>

</table>

<SCRIPT LANGUAGE="JavaScript">

<!--

function checkForm(){

var name = document.getElementById('name')

if(name.value == ''){

alert("姓名不能为空")

return false

}

return true

}

function DoSave(){

if(checkForm()){

document.form.action = "<%=indexfilename%>"

document.form.submit()

}

}

//-->

</SCRIPT>

</BODY>

</HTML>

给你写了一个,就是姓名不能空,如果其它的也要做这个判断的话,你再把其它的都加上,如果不清楚,用百度hi我