javascript中怎么设置from提交前的数据验证
4个回答
展开全部
form表单的数据先由js判断处理，通过后再提交数据到后台。
1、js获取表单数据，根据实际情况判断是否符合规则。一般的判断是否为空，是否含有不安全字符，有就过滤掉(这一步也可以在后台处理)。
2、对于未通过的输入，向用户返回信息提示。
3、验证通过，提交数据到后台。
4、根据实际需求做处理.....
下面是一个简单的例子:
<form id="loginForm" action="" method="post">
用户名: <input id="username" name="username" type="text" maxlength="16" />
<br />
<input id="go" type="button" value="提交" />
</form>
<script>
var loginForm = document.getElementById('loginForm');
var go = document.getElementById('go');
go.onclick = function(){
var username = loginForm.username.value
//这里判断了用户名的输入不能为空，且长度为6-16位
if(username && (typeof(username)!='undefined') && (username!=0) && (username.length>=6) && (username.length<=16)){
//验证通过，提交表单数据
loginForm.submit();
}else{
alert('输入不符合规则');
}
}
</script>
通常要先在前端对数据做处理得情况下，并不是用<input type="submit" />按钮，而是用<input type="button" />按钮，因为要先对数据进行处理再提交到后台；对于数据的判断验证，大多是使用正则表达式来判断的，虽然比较麻烦，不过如今浏览器对html5的兼容则省掉不少麻烦，新增的 input 类型可以满足一般的需求。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>春芽子服饰 进销存管理系统</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE type=text/css>
BODY {
MARGIN: 0px
}
TD {
FONT-SIZE: 9pt; LINE-HEIGHT: 150%
}
.big {
FONT-SIZE: 10.5pt; LINE-HEIGHT: 150%
}
.input {
BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #666666 1px solid; BORDER-LEFT: #666666 1px solid; BORDER-BOTTOM: #666666 1px solid
}
FORM {
MARGIN: 0px
}
.STYLE1 {color: #999999}
</STYLE>
<SCRIPT>
function validateform()
{
getresult=true;
if (!check_empty(document.form.username.value))
{
getresult=false
alert("请输入用户名！")
document.form.username.focus()
}
else if (!check_empty(document.form.password.value))
{
getresult=false
alert("请输入登录口令！")
document.form.password.focus()
}
document.form.password.value=MD5(document.form.password.value);
return getresult;
}
function check_empty(intext)
{
return (intext.length > 0);
}
function check_email()
{
var mailstr=document.form.email.value;
if (mailstr=="") return false;
if (mailstr.indexOf("@")==-1) return false;
if (mailstr.indexOf(".")==-1) return false;
return true;
}
</SCRIPT>
<META content="MSHTML 6.00.2900.3157" name=GENERATOR></HEAD>
<BODY bgColor=#ffffff>
<TABLE cellSpacing=0 cellPadding=0 width=532 align=center border=0>
<TBODY>
<TR align=middle>
<TD height=80></TD></TR>
<TR align=middle>
<TD><IMG src="images/logo.jpg" ></TD></TR>
<TR align=middle>
<TD>
<FORM name=form onSubmit="return validateform()" action=logincheck.asp
method=post>
<TABLE cellSpacing=0 cellPadding=0 width="70%" border=0>
<TBODY>
<TR>
<TD class=big align=middle></TD>
<TD></TD></TR>
<TR>
<TD height=25 colspan="2" align=middle class=big>用 户 名:
<INPUT class=input size=36
name=username> </TD>
</TR>
<TR>
<TD height=25 colspan="2" align=middle class=big>登录口令:
<INPUT class=input type=password
size=40 name=password onclick="this.value=''"> </TD>
</TR>
<TR>
<TD class=big align=middle height=25></TD>
<TD align=right></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width="70%" align=center border=0>
<TBODY>
<TR align=right>
<TD><INPUT type=image
src="images/login.gif" border=0 name=imageField alt="登陆"> </TD></TR>
<TR align=right>
<TD></TD></TR>
<TR align=right>
<TD></TD></TR></TBODY></TABLE></FORM></TD></TR>
<TR align=middle>
<TD align="middle"><span class="STYLE1">copy right by chunyazi 2007,designer:qqlxinye</span> </TD>
</TR>
</TBODY></TABLE>
</BODY></HTML>
<HTML><HEAD><TITLE>春芽子服饰 进销存管理系统</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE type=text/css>
BODY {
MARGIN: 0px
}
TD {
FONT-SIZE: 9pt; LINE-HEIGHT: 150%
}
.big {
FONT-SIZE: 10.5pt; LINE-HEIGHT: 150%
}
.input {
BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #666666 1px solid; BORDER-LEFT: #666666 1px solid; BORDER-BOTTOM: #666666 1px solid
}
FORM {
MARGIN: 0px
}
.STYLE1 {color: #999999}
</STYLE>
<SCRIPT>
function validateform()
{
getresult=true;
if (!check_empty(document.form.username.value))
{
getresult=false
alert("请输入用户名！")
document.form.username.focus()
}
else if (!check_empty(document.form.password.value))
{
getresult=false
alert("请输入登录口令！")
document.form.password.focus()
}
document.form.password.value=MD5(document.form.password.value);
return getresult;
}
function check_empty(intext)
{
return (intext.length > 0);
}
function check_email()
{
var mailstr=document.form.email.value;
if (mailstr=="") return false;
if (mailstr.indexOf("@")==-1) return false;
if (mailstr.indexOf(".")==-1) return false;
return true;
}
</SCRIPT>
<META content="MSHTML 6.00.2900.3157" name=GENERATOR></HEAD>
<BODY bgColor=#ffffff>
<TABLE cellSpacing=0 cellPadding=0 width=532 align=center border=0>
<TBODY>
<TR align=middle>
<TD height=80></TD></TR>
<TR align=middle>
<TD><IMG src="images/logo.jpg" ></TD></TR>
<TR align=middle>
<TD>
<FORM name=form onSubmit="return validateform()" action=logincheck.asp
method=post>
<TABLE cellSpacing=0 cellPadding=0 width="70%" border=0>
<TBODY>
<TR>
<TD class=big align=middle></TD>
<TD></TD></TR>
<TR>
<TD height=25 colspan="2" align=middle class=big>用 户 名:
<INPUT class=input size=36
name=username> </TD>
</TR>
<TR>
<TD height=25 colspan="2" align=middle class=big>登录口令:
<INPUT class=input type=password
size=40 name=password onclick="this.value=''"> </TD>
</TR>
<TR>
<TD class=big align=middle height=25></TD>
<TD align=right></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width="70%" align=center border=0>
<TBODY>
<TR align=right>
<TD><INPUT type=image
src="images/login.gif" border=0 name=imageField alt="登陆"> </TD></TR>
<TR align=right>
<TD></TD></TR>
<TR align=right>
<TD></TD></TR></TBODY></TABLE></FORM></TD></TR>
<TR align=middle>
<TD align="middle"><span class="STYLE1">copy right by chunyazi 2007,designer:qqlxinye</span> </TD>
</TR>
</TBODY></TABLE>
</BODY></HTML>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<form id="form">
<input type="text" id="i1">
<input type="text" id="i2">
<input type="submit" id="s1">
</form>
<script>
document.getElementById("s1").addEventListener("onclick", function(){
if (document.getElementById("i1").value=="") { alert("i1不能为空"); reutrn false; }
if (document.getElementById("i2").value=="") { alert("i2不能为空"); return false; }
});
</script>
<input type="text" id="i1">
<input type="text" id="i2">
<input type="submit" id="s1">
</form>
<script>
document.getElementById("s1").addEventListener("onclick", function(){
if (document.getElementById("i1").value=="") { alert("i1不能为空"); reutrn false; }
if (document.getElementById("i2").value=="") { alert("i2不能为空"); return false; }
});
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
在表单的的submit事件里设置验证函数,验证成功返回 true否则返回false,或者提交按钮不使用submit使用button 设置此buttion的click 事件里设置验证函数,成功则document.forms[0].submit() ---(请根据实际情况修改代码)
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
