JS写一个所有input项都验证合法后才能点击提交按钮，否则点击提交按钮弹出（‘填写有误’）

<!DOCTYPEhtml><html><body><divclass="box"><formid='form'><dl><dd>账户</dd><inputtype="t... <!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> 展开

 我来答

1个回答

#热议# 为什么有人显老，有人显年轻？

641008175
2017-12-15 · TA获得超过1080个赞

知道小有建树答主

回答量：825

采纳率：86%

帮助的人：490万

我也去答题访问个人页

关注

展开全部

$("#user").focus(function(){
    $('#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从事者给你一个忠告，看明白的不一定是真懂，自动手写过改过才是真的知道。

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

JS写一个所有input项都验证合法后才能点击提交按钮，否则点击提交按钮弹出（‘填写有误’）

其他类似问题

为你推荐：