急~JQ如何判断input内容全不为空时，提交按钮自动变色？

童年小花 2017-11-29 02:55:19

<label for="name">名字</label>
<input type="text" id="name" maxlength="8" class="required">
<label for="phone">手机号</label>
<input type="text" id="phone" class="required" maxlength="11">
<input type="button" value="注册" class="btn">
移动端的！
加载的页面注册按钮为灰色，当姓名和手机号内容不为空时，注册按钮变色？注意：不能是点击按钮后变色，仅仅是姓名和手机号内容不为空就自动变色！谢谢各位大神，求搭救下我这个小菜鸟~~

...全文

1163 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

a_靖 2017-11-30

打赏
举报

<!DOCTYPE html> <head> <title>js验证表单,如果表单都不为空,则按钮颜色自变,某为空时恢复原本背景色</title> <script language="javascript" type="text/javascript"> var a = ''; var b = ''; function chadnge(e) { a = e; if(a != '' && b != '') { document.getElementById('btn').style.background="red"; }else{ document.getElementById('btn').style.background="#d0d0d0"; } } function chadnge2(e) { b = e; if(a != '' && b != '') { document.getElementById('btn').style.background="red"; }else{ document.getElementById('btn').style.background="#d0d0d0"; } } </script> </head> <body> <label for="name">名字</label> <input type="text" id="name" maxlength="8" onchange="chadnge(this.value)" class="required"> <label for="phone">手机号</label> <input type="text" id="phone" class="required" onchange="chadnge2(this.value)" maxlength="11"> <input type="button" value="注册" id="btn"> </body> </html>

本人QQ-554433626 2017-11-30

打赏
举报


// 验证设置信息是否为空
function validateParamTxt() {
    if ($.trim($("#name").val()) !== ""&&$.trim($("#phone").val())!== "") {
$(".btn").css("background","red");
        return false;
    }
    return false;
};

本人QQ-554433626 2017-11-30

打赏
举报


<label for="name">名字</label>
<input type="text" id="name" maxlength="8" onchange="validateParamTxt();" class="required">
<label for="phone">手机号</label>
<input type="text" id="phone" class="required" onchange="validateParamTxt();" maxlength="11">
<input type="button" value="注册" class="btn">


// 验证设置信息是否为空
function validateParamTxt() {
    if ($.trim($("#name").val()) !== ""&&$.trim($("#phone").val())!== "") {
$(".btn").css("background","red")；
        return false;
    }
    return false;
};

童年小花 2017-11-29