表单填写不完整提交按钮灰色，填写完整自动解除解禁+jQuery验证提示

最新推荐文章于 2023-04-12 16:53:38 发布

wyy20

最新推荐文章于 2023-04-12 16:53:38 发布

阅读量3k

点赞数 1

分类专栏：网站前端应用文章标签：提交按钮灰色解禁 jquery验证

本文链接：https://blog.csdn.net/wyy20/article/details/50687478

版权

网站前端应用专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!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=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
</head>

<body>
<form method="post" action="#" οnsubmit="adaptValue();">
<table width="500" border="0">
  <tr>
    <td width="100px">用户名</td>
    <td class="input" width="200"><input type="text" name="username" id="username" οnblur="v_username();" οnkeyup="v_username();"/></td>
    <td><span class="username"></span></td>
  </tr>
  <tr>
    <td>密码</td>
    <td class="input"><input type="password" name="password" id="password" οnblur="v_password();" οnkeyup="v_password();"/></td>
    <td><span class="password"></span></td>
  </tr>
 <tr>
    <td>确认密码</td>
    <td class="input"><input type="password" name="password1" id="password1" οnblur="v_password1();" οnkeyup="v_password1();"/></td>
    <td><span class="password1"></span></td>
  </tr>
  <tr>
    <td>邮箱</td>
    <td class="input"><input type="text" name="account" id="account" οnblur="v_account();" οnkeyup="v_account();"/></td>
    <td><span class="account"></span></td>
    
  </tr>
  <tr>
    <td>性别</td>
    <td class="input"><select name="sex" οnblur="v_sex();" οnchange="v_sex();"  id="sex"><option value="">请选择</option><option value="1">男</option><option value="2">女</option></select></td>
    <td><span class="sex"></span></td>
  </tr>
  <tr>
    <td> </td>
    <td><input type="submit" id="submit" value="提交" disabled="disabled"/></td>
  </tr>
</table>


</form>
</body>
</html>
<script type="text/javascript">
function enableSubmit(bool){
	if(bool)$("#submit").removeAttr("disabled");
	else $("#submit").attr("disabled","disabled");
}


//验证多少项，多少个false
var flags = [false,false,false,false,false];
//flags全为true时提交按钮解除禁用
function v_submitbutton(){
for(f in flags) if(!flags[f]) {
		enableSubmit(false); 
		return;
	}
	enableSubmit(true);
}
//
//邮箱验证的正则
var RegEmail = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;

//输出验证 name为表单后面span的class，msg为输出的内容
function lineState(name,msg){
	$("."+name).text(msg);
}
//各个表单去验证
function v_username(){
	var username = $("#username").val();
	if(username=="") { flags[0]=false;enableSubmit(false);}
	else{flags[0] = true;}
	v_submitbutton();	
}
function v_password(){
	var password = $("#password").val();
	if(password=="") { flags[1]=false;enableSubmit(false);}
	else{flags[1] = true;}
	v_submitbutton();	
}
function v_password1(){
	var password = $("#password").val();
	var password1 = $("#password1").val();
	if(password!=password1){lineState("password1","两次密码不一样"); flags[2]=false;enableSubmit(false);}
	else{lineState("password1","");flags[2] = true;}
	v_submitbutton();	
}
function v_account(){
	var account = $("#account").val();
	if(!RegEmail.test(account)) {lineState("account","邮箱格式不正确"); flags[3]=false;enableSubmit(false);}
	else{lineState("account","");flags[3] = true;}
	v_submitbutton();
}
function v_sex(){
	var sex = $("#sex").val();
	if(sex=="") { flags[4]=false;enableSubmit(false);}
	else{flags[4] = true;}	
	v_submitbutton();
}

function adaptValue(){
	return true;
}
</script>