关于JS的onsubmit函数

黄奕豪

JS表单验证，分别有函数checkName()和checkPws()分别验证用户名字和密码,且函数里都有返回TRUE或false
现写个表单onsubmit事件的函数，
check（）{
  checkName()；
  checkPws(),
}
和
check（）{
if(checkName()&&checkPwd()){
  return ture;
  }else{
  return false
}
}
都无法通过，求高手赐教！！！
onsubmit事件的函数该怎么写。

赵兵锋 · 赵兵锋

轻尘一笑发表于 2012-6-12 23:05
谢谢您的参与，我之前的写法也是跟你写的一样直接 return false和return true; 但这样做的结果是不管che ...

好啊:lol

黑马黄宏强 · 黑马黄宏强

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>注册</title>
<style type="text/css">
*{ font-size:12px;}/* 默认所有元素字体为12PX*/
#login{ margin:0px auto; width:600px; height:auto; background:#999999;}
.td1{ text-align:right;}
.input{ width:150px;height:15px; }
.textarea{width:220px;height:250px}
</style>
<script type="text/javascript">

//document.getElementById("name").focus();
//验证用户名的方法
function checkName(){
var name = document.getElementById("name").value;
var reg=/^[a-zA-Z]{1}\w{5,15}$/;  //字母开头6-15位的字符串
document.getElementById("name").style.border="1px solid #cff";
if(name==""||name==null){
divName.style.color="red"
divName.innerHTML="×用户名不能为空";
return false;
}else{
if(reg.test(name)){
divName.style.color="#00FF00"
divName.innerHTML="√可用";
return true;
}else{
divName.style.color="red"
divName.innerHTML="×用户名格式不正确";
return false;
}
}
}
//验证密码
function checkPwd(){
var pwd = document.getElementById("pwd").value;
var reg=/^[a-zA-Z]{1}.{5,14}$/;  //首字母开头非空的6-15位的字符串
document.getElementById("pwd").style.border="1px solid #cff";
if(pwd==""||pwd==null){
divPwd.style.color="red"
divPwd.innerHTML="×密码不能为空";
return false;
}else{
if(reg.test(pwd)){
divPwd.style.color="#00FF00"
divPwd.innerHTML="√可用";
return true;
}else{
divPwd.style.color="red"
divPwd.innerHTML="×密码格式不正确";
return false;
}
}
}
//确认密码
function checkPwd2(){
var pwd = document.getElementById("pwd").value;
var pwd2 = document.getElementById("pwd2").value;
document.getElementById("pwd2").style.border="1px solid #cff";
if(pwd2==""||pwd2==null){
divPwd_2.style.color="red"
divPwd_2.innerHTML="×密码不能为空";
return false;
}else{
if(pwd2==pwd){
divPwd_2.style.color="#00FF00"
divPwd_2.innerHTML="√可用";
return true;
}else{
divPwd_2.style.color="red"
divPwd_2.innerHTML="×两次输入密码不一样";

return false;
}
}
}
//验证是否提交
function check(){
if(checkName()&&checkPwd()&&checkPwd2()){
event.returnValue = true;
//return true;
}else{
   alert("你输入的信息不正确!")
      event.returnValue = false;
//return false;
   }
}

//用户名提示信息
function tipName(){
document.getElementById("name").style.border="1px solid #c00";
divName.style.color="#000000"
divName.innerHTML="请输入6-15位字母开头的字母数字下划线组合";
}
//密码格式提示信息
function tipPwd(){
document.getElementById("pwd").style.border="1px solid #c00";
divPwd.style.color="#000000"
divPwd.innerHTML="请输入首字母开头非空的6-15位的字符组合"
}
//确认密码提示信息
function tipPwd2(){
document.getElementById("pwd2").style.border="1px solid #c00";
divPwd_2.style.color="#000000"
divPwd_2.innerHTML="为确保密码准确性，请再次输入密码"
}
</script>
</head>

<body>
<div id="login">
<form  action="a.html" onsubmit="check()" method="post">
<table>
<tr>
<td class="td1">用户名:</td>
<td><input type="text" id="name" onblur="checkName()" onfocus="tipName()" class="input" maxlength="15" /></td>
<td><div id="divName"></div></td>
</tr>
<tr>
<td class="td1">密码:</td>
<td><input type="password" id="pwd"  onblur="checkPwd()" onfocus="tipPwd()" class="input" maxlength="15" ></td>
<td><div id="divPwd"></div></td>
</tr>
<tr>
<td class="td1">确认密码:</td>
<td><input type="password" class="input" onblur="checkPwd2()" onfocus="tipPwd2()" maxlength="15" id="pwd2" ></td>
<td><div id="divPwd_2"></div></td>
</tr>
<tr>
<td  class="td1">性别:</td>
<td><input type="radio" id="sex1" name="sex" vlaue="1">男<input type="radio" id="sex2" name="sex" vlaue="0">女</td>
<td><div id="divSex"><div></td>
</tr> <tr>
<td class="td1">兴趣:</td>
<td colspan="2"><input type="checkbox" value="game" name="hobby1" />游戏
<input type="checkbox" value="sports" name="hobby2" />体育
<input type="checkbox" value="reading" name="hobby3" />看书
<input type="checkbox" value="music" name="hobby4" />音乐
</td>
</tr>
<tr>
<td class="td1">城市:</td>
<td colspan="2">
<select id="city">
<option>请选择</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">天津</option>
<option value="4">福建</option>
<option value="5">广东</option>
</select>
</td>
<td><div id="divCity"></div></td>
</tr>
<tr>
<td class="td1">个人简介:</td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td colspan="2"><textarea class="textarea"></textarea></td>
</tr>
<tr>
<td colspan="3" style="text-align:center"><input type="submit" onclick="" value="提交"> <input type="reset" value="重置"></td>
</tr>
</table>
</form>
</div>
</body>
</html>

黑马黄宏强 · 黑马黄宏强

赵兵锋发表于 2012-6-12 18:55
可以这样写：

谢谢您的参与，我之前的写法也是跟你写的一样直接 return false和return true; 但这样做的结果是不管check（）函数的返回值是true还是false都会提交表单。照唐志兵同学的写法改成event.returnValue = true或event.returnValue = false后问题解决了，后面我附贴我的源码，感兴趣可以试下，不知道是我理解错误还是巧合，欢迎一起讨论

赵兵锋 · 赵兵锋

可以这样写：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function checkName(){
var v = document.getElementById("id_name");
if(v.value==""){//判断用户名是否为空
return false;
}else{
return true;
}
}
function checkPass(){
var v = document.getElementById("id_password");
if(v.value==""){//判断密码是否为空
return false;
}else{
return true;
}
}
function check(){
if(checkName()&&checkPass()){//两个方法均返回真才提交表单。
alert("true");
return true;
}else{
alert("false");
return false;
}
}
</script>
</head>
<body>
<form action="" onsubmit="return check()">//提交给自己，当请求提交时先判断check返回值，为真才继续提交。
用户名：<input type="text" id="id_name" name="username">
密码：<input type="password" id="id_password" name="password">
<input type="submit">
</form>
</body>
</html>

复制代码

黑马黄宏强 · 黑马黄宏强

感谢您的回答，问题解决了！

黑马黄宏强 · 黑马黄宏强

event.returnValue = true; //注意这里

能给我解释下这句话的意思吗？
俺去试下谢咯！

唐志兵 · 唐志兵

function onsubmit()
{
if(checkName()&&checkPwd())
{
event.returnValue = true; //注意这里
}
else
{
alert("你输入的信息不正确!");
event.returnValue = false;
}
}

复制代码

帐号		自动登录	找回密码
密码			加入黑马

关于JS的onsubmit函数

评分

7 个回复

评分

黑马骑士勋章