表单验证失败

目标：对输入内容验证，符合规范才能提交
实际情况：完全没有作用，当输入的不符合规范时，没有任何提示，提交时直接提交了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title></head>
<body>
<h1>注册页面</h1>
<form action="表格.html" method="get" onsubmit="return checkForm()">
用户名：<input type="text" name="username" id ="usernameId" onkeyup="checkName()"/>
<span id="usernameMsg"></span><br><br>
密     码：<input type="password" name="password" id="passwordId" onkeyup="checkPassword()"/>
<span id="passwordMsg"></span><br><br>
手机号：<input type="text" name="phone" id="phoneId" onkeyup="checkPhone()"/>
<span id="phoneMsg"></span><br/><br/><br/>
<input type="submit" value="注册"/></form>
</body>
<script type="text/javascript">
//定义全局变量
var usernameObj;
var passwordObj;
var phoneObj;
var usernameMsg;
var passwordMsg;
var phoneMsg;
window.onload=function(){
//获取输入空间的标记对象
usernameObj=document.getElementById("usernameId");
passwordObj=document.getElementById("passwordId");
phoneObj=document.getElementById("phoneId");
//获取错误信息的标记对象
usernameMsg=document.getElementById("usernameMsg");
passwordMsg=document.getElementById("passwordMsg");
phoneMsg=document.getElementById("phoneMsg");
}//表单校验function checkForm(){
var usernameFlag =checkName();
var passwordFlag =checkPassword();
var phoneFlag= checkPhone();
return usernameFlag&&passwordFlag&&phoneFlag;
}
//校验用户名
funciton checkName(){
//获取用户名
var value=usernameObj.value;
//创建正则表达式来校验用户名
var regx=/^[a-zA-Z]\w{3,6}$/;//用户名以部分大小写的字母开始，包含字母数字下划线长度为4-7位
//校验
if(value==""){
usernameMsg.innerHTML="用户名不能为空";
return false;
}else if(!regx.test(value)){
usernameMsg.innerHTML="用户名必须以字母开始，不区分大小写，包含字母数字下划线长度4-7位";
return false;
}else{
usernameMsg.innerHTML="";
return true;
}
}
//校验密码
function checkPassword(){
//获取密码
var value=passwordObj.value;
//创建正则表达式来校验密码
var regx=/^[a-zA-Z0-9]{3,6}$/;//密码是字母和数字组成，长度是3-6位
//校验
if(!value){
passwordMsg.innerHTML="密码不能为空";
return false;
}else if(!regx.test(value)){
passwordMsg.innerHTML="密码是字母和数字组成，长度3-6位";
return false;
}else{
passwordMsg.innerHTML="";
return true;
}
}
//校验手机号
function checkPhone(){
var value=phoneObj.value;
var regx=/^1[3|5|7|8][0-9]{9}$/;
if(!value){
phoneMsg.innerHTML="密码不能为空";
return false;
}else if(!regx.test(value)){
phoneMsg.innerHTML="密码是字母和数字组成，长度3-6位";
return false;
}else{
phoneMsg.innerHTML="";
return true;
}
}</script>
</html>

解决方案 »

  1.   

    可以验证了，你试试看
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title></head>
    <body>
    <h1>注册页面</h1>
    <form action="表格.html" method="get" onsubmit="return checkForm()">
    用户名：<input type="text" name="username" id ="usernameId" onkeyup="checkName()"/>
    <span id="usernameMsg"></span><br><br>
    密     码：<input type="password" name="password" id="passwordId" onkeyup="checkPassword()"/>
    <span id="passwordMsg"></span><br><br>
    手机号：<input type="text" name="phone" id="phoneId" onkeyup="checkPhone()"/>
    <span id="phoneMsg"></span><br/><br/><br/>
    <input type="submit" value="注册"/></form>
    </body>
    <script type="text/javascript">
    //定义全局变量
    var usernameObj;
    var passwordObj;
    var phoneObj;
    var usernameMsg;
    var passwordMsg;
    var phoneMsg;
    window.onload=function(){
    //获取输入空间的标记对象
    usernameObj=document.getElementById("usernameId");
    passwordObj=document.getElementById("passwordId");
    phoneObj=document.getElementById("phoneId");
    //获取错误信息的标记对象
    usernameMsg=document.getElementById("usernameMsg");
    passwordMsg=document.getElementById("passwordMsg");
    phoneMsg=document.getElementById("phoneMsg");
    }//表单校验function checkForm(){
    var usernameFlag = checkName();
    var passwordFlag =checkPassword();
    var phoneFlag= checkPhone();
    return usernameFlag&&passwordFlag&&phoneFlag;
    }
    //校验用户名
    function checkName() {
        var value=usernameObj.value;
        var regx=/^[a-zA-Z]\w{3,6}$/;
        if(value==""){
            usernameMsg.innerHTML="用户名不能为空";
            return false;
            }else if(!regx.test(value)){
            usernameMsg.innerHTML="用户名必须以字母开始，不区分大小写，包含字母数字下划线长度4-7位";
            return false;
            }else{
            usernameMsg.innerHTML="";
            return true;
            }
    }
    //校验密码
    function checkPassword(){
    //获取密码
    var value=passwordObj.value;
    //创建正则表达式来校验密码
    var regx=/^[a-zA-Z0-9]{3,6}$/;//密码是字母和数字组成，长度是3-6位
    //校验
    if(!value){
    passwordMsg.innerHTML="密码不能为空";
    return false;
    }else if(!regx.test(value)){
    passwordMsg.innerHTML="密码是字母和数字组成，长度3-6位";
    return false;
    }else{
    passwordMsg.innerHTML="";
    return true;
    }
    }
    //校验手机号
    function checkPhone(){
    var value=phoneObj.value;
    var regx=/^1[3|5|7|8][0-9]{9}$/;
    if(!value){
    phoneMsg.innerHTML="密码不能为空";
    return false;
    }else if(!regx.test(value)){
    phoneMsg.innerHTML="密码是字母和数字组成，长度3-6位";
    return false;
    }else{
    phoneMsg.innerHTML="";
    return true;
    }
    }</script>
    </html>