在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML/ JQ使用多個(gè)失去焦點(diǎn)驗(yàn)證動(dòng)態(tài)數(shù)據(jù),滿足條件才執(zhí)行按鈕提交動(dòng)作,如何解決里面blu

JQ使用多個(gè)失去焦點(diǎn)驗(yàn)證動(dòng)態(tài)數(shù)據(jù),滿足條件才執(zhí)行按鈕提交動(dòng)作,如何解決里面blur函數(shù)事件回調(diào)問(wèn)題

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link  rel="stylesheet">

<script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/mui/3.7.1/js/mui.min.js"></script>
<title>個(gè)人信息頁(yè)面</title>
<style>
.mui-input-row.mui-radio.mui-left.mobile-inline-block{
        display: inline-block;
}
label.no-float{

line-height: 1.5rem;
}

.type.mui-checkbox input[type=checkbox]:before, .mui-radio input[type=radio]:before {
    margin-left: -1.1rem;
}
.mui-checkbox.mui-left label, .mui-radio.mui-left label {
    padding-left: 2rem;
}


</style>
</head>
<body>
<div class="mui-content">
    <form class="mui-input-group">
        <div class="mui-input-row">
            <label>用戶名</label>
            <input type="text" name="name" class="mui-input-clear" placeholder="請(qǐng)輸入用戶名">
        </div>
        <div class="mui-input-row">
            <label>手機(jī)號(hào)碼</label>
            <input type="text" name="phone" class="mui-input-clear" placeholder="請(qǐng)輸入手機(jī)號(hào)碼">
        </div>
        <div class="type">
        <div class="mui-input-row">
                    <label class="no-float">性別</label>
                    <div class="mui-input-row mui-radio mui-left mobile-inline-block">
                        <label class="sex">男</label>
                            <input value="1" name="sex" type="radio" checked>
                    </div>
                    <div class="mui-input-row mui-radio mui-left mobile-inline-block">
                        <label class="sex">女</label><input name="sex" value="2" type="radio">
                    </div>
        </div>
        </div>

        <div class="mui-input-row">
            <label>車(chē)牌</label>
            <input type="text" name="plate" class="mui-input-clear" placeholder="請(qǐng)輸入車(chē)牌">
        </div>

        <div class="mui-content-padded">
            <button id='login' class="mui-btn mui-btn-block mui-btn-primary">提交信息</button>
            </div>
        </div>
    </form>
</div>
<script type="text/javascript">
    mui.init()
</script>
</html>
<script src="dlc.js" type="text/javascript" charset="utf-8"></script><!--公司的常用函數(shù)封裝-->
<script type="text/javascript">
//是否為空
function isNull(value) {
    if ($.trim(value).length) {
        return false;
    } else {
        return true;
    }
}    
//判斷手機(jī)或者電話號(hào)碼格式
function checkMobileAndTel(value) {
    return /^1(3|4|5|7|8)\d{9}$/.test(value);
};
//判斷是否中文
function isChn(str){
    var reg=/^[\u4E00-\u9FA5]+$/;
    if(!reg.test(str)){
        return false;
    }
    return true;
}
//驗(yàn)證車(chē)牌號(hào)
function isLicenseNo(str) {
    return /(^[\u4E00-\u9FA5]{1}[A-Z0-9]{6}$)|(^[A-Z]{2}[A-Z0-9]{2}[A-Z0-9\u4E00-\u9FA5]{1}[A-Z0-9]{4}$)|(^[\u4E00-\u9FA5]{1}[A-Z0-9]{5}[掛學(xué)警軍港澳]{1}$)|(^[A-Z]{2}[0-9]{5}$)|(^(08|38){1}[A-Z0-9]{4}[A-Z0-9掛學(xué)警軍港澳]{1}$)/.test(str);
}
    $(function () {
        var phone=$('input[name="phone"]');
        var name=$('input[name="name"]');
        var plate=$('input[name="plate"]');
        phone.blur(function(){
            //判斷是否手機(jī)號(hào)
            if(!isNull(phone.val())){
                if( !checkMobileAndTel(phone.val()) ){
                alert("不是一個(gè)手機(jī)號(hào)碼");
                $('button').attr('disabled','disabled');
            }
            }
            
        }); 
        
        name.blur(function(){
                //判斷是否全中文
            if(!isNull(name.val())){
                if(!isChn(name.val())){
                alert("不是全中文");
                $('button').attr('disabled','disabled');
            }
            }
            
        }); 
        
        plate.blur(function(){
                    //判斷是否車(chē)牌
          if(!isNull(plate.val())){
            if(!isLicenseNo(plate.val())){
                alert("車(chē)牌不對(duì)");
                $('button').attr('disabled','disabled');
            }
          }  
        });
        
        $('button').click(function(){
            //tooltipbox.show('正在提交，請(qǐng)稍候...', null, 99999999);
            $('button').attr('disabled','disabled');
            $.ajax({
                type:"post",
                url:ajax_url+'information',
                dataType:'json',
                data:{sex:$('input[name="sex"]:checked').val(),name:$('input[name="name"]').val(),phone:$('input[name="phone"]').val(),plate:$('input[name="plate"]').val()},
                success:function(res){
                    //     alert(JSON.stringify(res));
                    //json成功后跳轉(zhuǎn)
                    window.location.;
                    //    $('button').removeAttr('disabled');
                },error:function(err){
                    alert(JSON.stringify("已經(jīng)提交過(guò)數(shù)據(jù)，數(shù)據(jù)提交失敗"));
                    //WeixinJSBridge.call('closeWindow'); //關(guān)閉窗口
                }
            });
        })
    });


</script>

我的需求是checkMobileAndTel,isChn,isLicenseNo判斷全部正常才執(zhí)行$('button').removeAttr('disabled');否則一直都是$('button').attr('disabled','disabled');
請(qǐng)問(wèn)有無(wú)簡(jiǎn)便一點(diǎn)方法可以

回答
編輯回答
影魅

$(function () {} )部分改成如下（ajax內(nèi)省略）：

$(function () {
        var $input = $( 'input[type=text]' ),
            $btn = $( 'button' ),
            status = {},
            switchBtn = ( bool = false ) => {
              bool
                ? $btn.removeAttr( 'disabled' )
                : $btn.attr( 'disabled', 'disabled' )
            };
      
        switchBtn();

        $input.on( {
          blur() {
            let $this = $( this ),
                name = $this.attr( 'name' ),
                val = $this.val(),
                type = {
                  phone: () => !checkMobileAndTel( val ) && '不是一個(gè)手機(jī)號(hào)碼',
                  name: () => !isChn( val ) && '不是全中文',
                  plate: () => !isLicenseNo( val ) && '車(chē)牌不對(duì)'
                },
                exec = ( val ) => {
                  status[ name ] = val ? console.log( val ) : true;
                  ( ( statusVal ) => {
                    console.log( statusVal );
                    statusVal.length === 3 
                      && statusVal.every( v => v === true )
                      ?  switchBtn( true )
                      :  switchBtn();
                  } )( Object.values( status ) );
                };
            
             type[ name ] 
                && exec( type[ name ]() );
          }
        } );
          
        $btn.on( {
          click() {
            $.ajax();
          }
        });
    });

基本思路是如此，其實(shí)還有優(yōu)化的地方，比如：
1.只用blur來(lái)判斷并不妥，還必須讓用戶做一次移出焦點(diǎn)操作。
2.input DOM結(jié)構(gòu)優(yōu)化的話，可以進(jìn)一步減少js判定處理。
3.用disabled來(lái)控制不可點(diǎn)擊、效果的想法，也可以進(jìn)行優(yōu)化
這些你可以再好好想想

2018年1月30日 17:00
編輯回答
醉淸風(fēng)

謝邀.
我覺(jué)得可以直接參考MDN的表單數(shù)據(jù)校驗(yàn)，代碼基本都是現(xiàn)成的，拿下來(lái)改改正則改改顏色基本就能用了。另外像你說(shuō)的“判斷全部正常再提交”之類(lèi)的需求，里邊也介紹了相應(yīng)的判定API可以用，干嘛不試試呢？
（反正要是一個(gè)表單我一blur它就alert的話，且不說(shuō)瀏覽器本身就有攔截重復(fù)alert的功能，保不齊我也能直接給關(guān)了……）

2017年8月5日 12:43
編輯回答
懶洋洋

謝邀
我覺(jué)得

  1. 減少無(wú)關(guān)的alert之類(lèi)提醒，這東西容易被攔截，切體驗(yàn)不好
  2. 可以參考MDN的相關(guān)表單驗(yàn)證的東西，深究理解后參考來(lái)改進(jìn)
2018年4月19日 11:48