黑马程序员技术交流社区

标题: 关于JS的onsubmit函数 [打印本页]
作者: 黑马黄宏强    时间: 2012-6-12 14:12
标题: 关于JS的onsubmit函数
JS表单验证，分别有函数checkName()和checkPws()分别验证用户名字和密码,且函数里都有返回TRUE或false
现写个表单onsubmit事件的函数，
check（）{
  checkName()；
  checkPws(),
}
和
check（）{
if(checkName()&&checkPwd()){
  return ture;
  }else{
  return false
}
}
都无法通过，求高手赐教！！！
onsubmit事件的函数该怎么写。
作者: 唐志兵    时间: 2012-6-12 14:16
  1.         function onsubmit()
  2.         {
  3.                 if(checkName()&&checkPwd())
  4.                 {
  5.                         event.returnValue = true;  //注意这里
  6.                 }
  7.                 else
  8.                 {
  9.                         alert("你输入的信息不正确!");
  10.                         event.returnValue = false;
  11.                 }
  12.                
  13.         }
复制代码
作者: 黑马黄宏强    时间: 2012-6-12 14:32
event.returnValue = true;  //注意这里

能给我解释下这句话的意思吗？
俺去试下  谢咯！
作者: 黑马黄宏强    时间: 2012-6-12 14:39
感谢您的回答，问题解决了！
作者: 赵兵锋    时间: 2012-6-12 18:55
可以这样写：
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>Insert title here</title>
  6. <script type="text/javascript">
  7. function checkName(){
  8.         var v = document.getElementById("id_name");
  9.         if(v.value==""){//判断用户名是否为空
  10.                 return false;
  11.         }else{
  12.                 return true;
  13.         }
  14. }
  15. function checkPass(){
  16.         var v = document.getElementById("id_password");
  17.         if(v.value==""){//判断密码是否为空
  18.                 return false;
  19.         }else{
  20.                 return true;
  21.         }
  22. }
  23. function check(){
  24.         if(checkName()&&checkPass()){//两个方法均返回真才提交表单。
  25.                 alert("true");
  26.                 return true;
  27.         }else{
  28.                 alert("false");
  29.                 return false;
  30.         }
  31. }
  32. </script>
  33. </head>
  34. <body>
  35. <form action="" onsubmit="return check()">//提交给自己，当请求提交时先判断check返回值，为真才继续提交。
  36. 用户名：<input type="text" id="id_name" name="username">
  37. 密码：<input type="password" id="id_password" name="password">
  38. <input type="submit">
  39. </form>
  40. </body>
  41. </html>
复制代码
作者: 黑马黄宏强    时间: 2012-6-12 23:05
赵兵锋 发表于 2012-6-12 18:55
可以这样写：

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

作者: 黑马黄宏强    时间: 2012-6-12 23:07
<!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 23:07
轻尘一笑 发表于 2012-6-12 23:05
谢谢您的参与，我之前的写法也是跟你写的一样 直接 return false和return true; 但这样做的结果是不管che ...

好啊:lol



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2