表单验证失败

曲终离人散 2018-03-17 03:58:49

目标：对输入内容验证，符合规范才能提交
实际情况：完全没有作用，当输入的不符合规范时，没有任何提示，提交时直接提交了。
<!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>

...全文

687 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

MY128 2018-03-22

打赏
举报

可以验证了，你试试看 <!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>