关于表单提交验证的问题
来源：3-7 提交验证
weixin_慕移动6442865
2019-09-15 20:00:36
当我第一项用户名错误时，确实无法提交，然后我把用户名改正确了，同时我把电话那项改错误，问题来了，它还是能提交，这是为什么？
4回答
-
好帮手慕夭夭
2019-09-16
你好同学，虽然代码感觉啰嗦，但是不写的话功能不完善，代码改啰嗦的时候还得啰嗦哦。另外，使用onsubmit=return check（）的时候就不用写submit.onclick，因为都是用来做提交的。但是不用每一个验证表单的事件中都返回true或者false。因为check是返回的一个函数，所以定义一个函数，把submit.onclick中的代码放在函数里面即可：
函数中返回了true和false。那么 onsubmit=return false； 就会阻止表单默认的提交事件，如果为return true，则不会阻止默认的提交事件哦
祝学习愉快，望采纳。
0 -
好帮手慕夭夭
2019-09-16
你好同学，老师这边测试，当只有用户名输入错误的时候，也是可以提交成功的。这是因为代码中，验证错误的时候，没有改变如下变量的值。当输入正确的时候，值变为true，然后再改成错误的验证，应该在把它的值改成false哦。
参考如下，把所有验证表单的onblur事件中，验证不成功的时候，就把对应的变量改为false即可
祝学习愉快，望采纳。
0h019-09-16 -
weixin_慕移动6442865
提问者
2019-09-15
<body>
<div id='box'>
<form action="提交成功.html" method="get" id='formbox' onsubmit="return check();">
<div>
<p>*用户名:</p> <input type="text" name='name' class='use' id='use' placeholder="字母、数字、下划线 6-10位"><span class='item'></span>
</div>
<div >
<p>*密码:</p> <input type="text" name='pw' class='psw' id='psw' placeholder='6-10位数字、字母、下划线'><span class='item'></span>
</div>
<div >
<p>*确认密码:</p> <input type="text" name='pww' class='psww' id='psww' placeholder='6-10位数字、字母、下划线'><span class='item'></span>
</div>
<div >
<p>*姓名:</p><input type="text" name='usname' class='usname' id='usname' placeholder='5位以内汉字'><span class='item'></span>
</div>
<div >
<p>*邮箱: </p> <input type="text" name='email' class='eml' id='eml' placeholder='请输入有效邮箱'><span class='item'></span>
</div>
<div >
<p>*手机号: </p> <input type="text" name='phone' class='phone' id='phone' placeholder='请输入11位手机号'><span class='item'></span>
</div>
<div >
<p>*身份证:</p> <input type="text" name="num" class='idcard' id='idcard' placeholder='请输入有效18位身份证'><span class='item'></span>
</div>
<div>
<p>*居住地:</p> <select class='city'>
<option value="">请选择</option>
<option value="sh">上海</option>
<option value="bj">北京</option>
<option value="sz">深圳</option>
<option value="gz">广州</option>
<option value="hz">杭州</option>
</select>
</div>
<div id='btnbox'><input type="submit" class="btn" id='submit' disabled><input type="reset" class="btn">
<input type="checkbox" id='chbox'><span style="color: red;">我以确认信息准确无误,信息提交后无法修改!</span>
</div>
</form>
</div>
<script type="text/javascript" src="js/bd.js"></script>
</body>
0 -
weixin_慕移动6442865
提问者
2019-09-15
var usename=document.getElementById('use');
var psw=document.getElementById('psw');
var psww=document.getElementById('psww');
var item=document.querySelectorAll('span');
var usname=document.getElementById('usname');
var idcard=document.getElementById('idcard');
var phone=document.getElementById('phone');
var eml=document.getElementById('eml');
var submit=document.getElementById('submit');
var chbox=document.getElementById('chbox');
var formbox=document.getElementById('formbox');
var reg=/ze/;
var text1=false;
var text2=false;
var text3=false;
var text4=false;
var text5=false;
var text6=false;
var text7=false;
//用户名验证
usename.onblur=function(){
reg=/^\w{6,10}$/;
if(this.value==''){
item[0].innerHTML='用户名不能为空';
item[0].style.color='red';
}else if(reg.test(this.value)==true){
item[0].innerHTML='正确！';
item[0].style.color='#fff';
text1=true;
}else{
item[0].innerHTML='必须是6-10位大小写英文，数字或下划线';
item[0].style.color='red';
}
}
//密码验证
psw.onfocus=function(){
item[1].innerHTML='请输入6-10位数字、字母、下划线!';
item[1].style.color='#fff';
}
psw.onblur=function(){
reg=/^\w{6,10}$/;
if(this.value==''){
item[1].innerHTML='密码不能为空!';
item[1].style.color='red';
}else if(reg.test(this.value)==true){
item[1].innerHTML='正确！';
item[1].style.color='#fff';
text2=true;
}else{
item[1].innerHTML='必须是6-10位大小写英文，数字或下划线!';
item[1].style.color='red';
}
}
//验证密码一致性
psww.onfocus=function(){
item[2].innerHTML='请再次确认密码!';
item[2].style.color='#fff';
}
psww.onblur=function(){
if(this.value==''){
item[2].innerHTML='密码不能为空!';
item[2].style.color='red';
}else if(this.value!=psw.value){
item[2].innerHTML='两次密码输入必须一致';
item[2].style.color='red';
}else{
item[2].innerHTML='密码一致!';
item[2].style.color='#fff';
text3=true;
}
}
//姓名验证
usname.onblur=function(){
reg=/^[\u4e00-\u9fa5]{2,5}$/
if(this.value==''){
item[3].innerHTML='姓名不能为空!';
item[3].style.color='red';
}else if(reg.test(this.value)==true){
item[3].innerHTML='输入正确!';
item[3].style.color='#fff';
text4=true;
}else{
item[3].innerHTML='必须是2-5位以内的汉字';
item[3].style.color='red';
}
}
//身份证验证
idcard.onblur=function(){
reg=/^\d{17}[0-9x]$/
if(this.value==''){
item[6].innerHTML='身份证不能为空!';
item[6].style.color='red';
}else if(reg.test(this.value)==true){
item[6].innerHTML='身份证输入正确!';
item[6].style.color='#fff';
text5=true;
}else{
item[6].innerHTML='必须是18位有效身份证!';
item[6].style.color='red';
}
}
//手机验证
phone.onblur=function(){
reg=/^1([3456789])\d{9}$/
if(this.value==''){
item[5].innerHTML='手机号不能为空!';
item[5].style.color='red';
}else if(reg.test(this.value)==true){
item[5].innerHTML='手机号输入正确!';
item[5].style.color='#fff';
text6=true;
}else{
item[5].innerHTML='必须是11位数字!';
item[5].style.color='red';
}
}
//邮箱验证
eml.onblur=function(){
reg=/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/
if(this.value==''){
item[4].innerHTML='邮箱不能为空!';
item[4].style.color='red';
}else if(reg.test(this.value)==true){
item[4].innerHTML='邮箱输入正确!';
item[4].style.color='#fff';
text7=true;
}else{
item[4].innerHTML='无效邮箱!请输入正确的邮箱.';
item[4].style.color='red';
}
}
//提交
submit.onclick=function(){
if(text1==true&&text2==true&&text3==true&&text4==true&&text5==true&&text6==true&&text7==true){
alert('yes')
return true;
}else{
alert('no')
return false;
}
}
//checkbox
chbox.onclick=function(){
if(this.checked==true){
document.getElementById('submit').disabled = false;
}else{
document.getElementById("submit").disabled = true;
}
}
0
相似问题