JS写一个所有input项都验证合法后才能点击提交按钮，否则点击提交按钮弹出（‘填写有误’）
<!DOCTYPE html>
<html>
<body>
<div class="box">
<form id='form'>
<dl>
<dd>账户</dd><input type="text" name="text" id="user"/><span id="p01"></span>
<dd>密码</dd><input type="password" name="psd" id="psd"/><span id="p02"></span>
<dd>手机号码</dd><input type="text" name="tel" id="tel"/><span id="p03"></span>
<dd></dd><input type="button" value="提交" id="btn" />
</dl>
</form>
</div>
</body>
</html>
<script>
window.onload=function(){
// var user = $("#user").val();
// var psd = $("#psd").val();
//账户和密码获取到焦点后清空span里的内容
$("#user").focus(function(){
$('#p01').empty();
})
$("#psd").focus(function(){
$('#p02').empty();
});
$("#tel").focus(function(){
$('#p03').empty();
});
//账户的合法验证
$("#user").blur(function(){
var reguser = /^[a-zA-Z0-9_-]{4,16}$/;
var user = $('#user');
if( $("#user").val().length == 0 ){
p01.innerText="账户不能为空";
$("#p01").css("color","red");
}else if(reguser.test(user.val())){
p01.innerText="用户名输入正确";
$("#p01").css("color","blue");
}else{
p01.innerText="用户名为4-16位字母，数字，下划线，减号";
$("#p01").css("color","red");
}
})
//密码的合法验证
$("#psd").blur(function(){
var regpsda =/[0-9|a-z|A-Z]/;
var regpsdb =/^[a-zA-Z]+$/; //该出密码强度设计不够严谨
var regpsdc =/[^0-9a-zA-Z]/;
// var regpsdd =/^[A-Za-z0-9]{6,20}$/;
var psd = $('#psd');
if( $("#psd").val().length == 0 ){
p02.innerText="密码不能为空";
$("#p02").css("color","red");
}else if(regpsda.test(psd.val())){
p02.innerText="密码强度低";
$("#p02").css("color","indianred");
}else if(regpsdb.test(psd.val())){
p02.innerText="密码强度中";
$("#p02").css("color","chocolate");
}else if(regpsdc.test(psd.val())){
p02.innerText="密码强度高";
$("#p02").css("color","green");
}else{
p02.innerText="密码位6-12位字母数字组合";
$("#p02").css("color","red");
}
})
//手机号码的合法验证
$("#tel").blur(function(){
var regtel = /^1[3|4|5|7|8][0-9]{9}$/;
var tel = $('#tel');
if( $("#tel").val().length == 0 ){
p03.innerText="号码不能为空";
$("#p03").css("color","red");
}else if(regtel.test(tel.val())){
p03.innerText="手机号输入正确";
$("#p03").css("color","blue");
}else{
p03.innerText="请输入正确的手机号";
$("#p03").css("color","red");
}
})
}
</script>
$('#p01').empty();
})
$("#psd").focus(function(){
$('#p02').empty();
});
$("#tel").focus(function(){
$('#p03').empty();
});
function checkUser() {
var reguser = /^[a-zA-Z0-9_-]{4,16}$/;
var user = $('#user');
if( $("#user").val().length == 0 ){
$("#p01").html("账户不能为空");
$("#p01").css("color","red");
return false;
}else if(reguser.test(user.val())){
$("#p01").html("用户名输入正确");
$("#p01").css("color","blue");
return true;
}else{
$("#p01").html("用户名为4-16位字母，数字，下划线，减号");
$("#p01").css("color","red");
return false;
}
}
function checkTel() {
var regtel = /^1[3|4|5|7|8][0-9]{9}$/;
var tel = $('#tel');
if( $("#tel").val().length == 0 ){
$("#p03").html("号码不能为空");
$("#p03").css("color","red");
return false;
}else if(regtel.test(tel.val())){
$("#p03").html("手机号输入正确");
$("#p03").css("color","blue");
return true;
}else{
$("#p03").html("请输入正确的手机号");
$("#p03").css("color","red");
return false;
}
}
function checkPassword() {
var regpsda =/[0-9|a-z|A-Z]/;
var regpsdb =/^[a-zA-Z]+$/; //该出密码强度设计不够严谨
var regpsdc =/[^0-9a-zA-Z]/;
var psd = $('#psd');
if( $("#psd").val().length == 0 ){
$("#p02").html("密码不能为空");
$("#p02").css("color","red");
return false;
}else if(regpsda.test(psd.val())){
$("#p02").html("密码强度低");
$("#p02").css("color","indianred");
return true;
}else if(regpsdb.test(psd.val())){
$("#p02").html("密码强度中");
$("#p02").css("color","chocolate");
return true;
}else if(regpsdc.test(psd.val())){
$("#p02").html("密码强度高");
$("#p02").css("color","green");
return true;
}else{
$("#p02").html("密码位6-12位字母数字组合");
$("#p02").css("color","red");
return false;
}
}
$('#btn').on('click',function () {
var user=checkUser();
var tel=checkTel();
var psd=checkPassword();
if(user && tel && psd){
alert('提交');
}else {
alert('填写有误');
}
});
改写好了 你自己直接替换进去 判断逻辑沿用你自己的，只是密码强度这块需要你自己衡量，例如密码强度弱不给提交 那对应的
else if(regpsda.test(psd.val())){$("#p02").html("密码强度低");
$("#p02").css("color","indianred");
return true;
}
这个return改为false。表单的提交话在把alert('提交')改为 $('#form').submit();
我把焦点事件加到你写的check___()函数里去，当失去焦点的时候，右边也没有提示呢？
追答统一在#btn上执行验证 如果你要在失去焦点就验证 则需要一个全局变量来监听 也就是user tel psd这三个变量要变成全局的。然后在.blur(function(){ //执行对应的方法 例如 psd=checkPassword();})
追问你帮我写一个呢
追答你先理清楚一件事，失去焦点是一件事，验证是另一件事，所以两者为嵌套执行，而非并行。这样解释明白了吗？失去焦点时就验证你自己改写下，如果上面的代码是你自己写的，你自己改都比问问来的快。另一种解决思路，不在我的方案上改，先定义三个全局变量user tel psd均为false;假设失去焦点验证成功则将user =true;（对应验证的控制变量改为true） 在#btn的单击事件上对三个全局变量进行验证即可。
追问我的意思是当执行验证这件事情的时候，假如失去焦点事件里有不合法的，就阻止提交并且弹出弹框提示，你能不能帮我写出来，我看代码就明白了，我不会写全局变量
追答追答字数限定，发你私信。另外作为一名IT从事者给你一个忠告，看明白的不一定是真懂，自动手写过改过才是真的知道。
