ページロード後の入力の正規表現属性を確認する方法

Question

選択ボックスがあります。 Hostnameのための特定のパターンを持つテキストボックス。この場合、私の選択ボックスが変わると、テキストボックスのパターンが変わります。私の質問は、私はどのように体のselectbox値の負荷をチェックすることができますか？パターンをチェックしますか？たとえば、選択ボックスが最初に「Nx」だった場合などです。私はパターンをチェックしたいと思います。 selectboxが値の変更を変更したときに発生します。ここ

は唯一のonchange選択ボックスのを作品に私のコードです：

$(function(){ 
 
    $('select[name=type]').change(function(){ 
 
    var $option = $(this).find(":selected"); 
 
    $('input[name=hostInput]').attr('pattern', $option.attr('data-pattern')); 
 
    $('input[name=hostInput]').attr('placeholder', $option.attr('data-placeholder')); 
 
    $('input[name=hostInput]').attr('title', $option.attr('data-title')); 
 
    }); 
 
});

.to_validate:invalid { 
 
    color: navy; 
 
    outline: none; 
 
    border-color: #ff1050; 
 
    box-shadow: 0 0 10px #ff0000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<form> 
 
    <select name="type" class="minimal"> 
 
    <option value="Record" hidden>Record</option> 
 
    <option value="NS" selected data-pattern="(?!\d+(?:\.\d+){3}$)(([a-zA-Z\d]|[a-zA-Z\d][a-zA-Z\d-]*[a-zA-Z\d])\.)*([A-Za-z\d]|[A-Za-z\d][A-Za-z\d-]*[A-Za-z\d])" data-placeholder="Hostname" data-title="Wrong host">NS</option> 
 
    <option value="MX" data-pattern="(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])" data-placeholder="IP address" data-title="Wrong Ip Placeholder">MX </option> 
 
    </select> 
 
    
 
    <br/> 
 
    
 
    <input type="text" name="hostInput" placeholder="Hostname" class="to_validate" title="Wrong host"/> 
 
    
 
    
 
    <button type="submit">Submit</button> 
 
</form>

Answer 1

はあなたのJavaScriptでこれらを追加してみてください。

$(function() { 
    var value= $('select[name=type]').val(); 
    var pattern = $('select[name=type] option:selected').data('pattern'); 

    $('input[name=hostInput]').attr('pattern', pattern); 
    $('input[name=hostInput]').val(value); 
}); 

Answer 2

jqueryのは、（メソッドの.readyを持っている）HTMLのbody要素と呼ばれている負荷と準備ができている...だから、ここlink

$(document).ready(function() { 
    var checkedVal = $("select[name=type]").val(); 
}); 

を、それを確認することができます更新

$(document).ready(function() { 
    var checkedVal = $("select[name=type]").val(); 
    var patterns = { 
    "NS":"(?!\d+(?:\.\d+){3}$)(([a-zA-Z\d]|[a-zA-Z\d][a-zA-Z\d-]*[a-zA-Z\d])\.)*([A-Za-z\d]|[A-Za-z\d][A-Za-z\d-]*[A-Za-z\d])", 
    "MX":"(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])" 
    } 

    patterns[checkedVal].test($('input[name=hostInput]').val());//if it is true the input is valid 
});