簡體   English   中英

如何驗證JavaScript中的字母字符?

[英]How do I validate alphabetical characters in javascript?

我正在開始將成為DNA轉換器。 我將其設置為從DNA文本框中獲取文本,並將其全部小寫。 我知道很多工作。 但是,用於驗證它是否全部為字母字符的功能不起作用。 我想知道我在做什么錯。 最終的輸出將不是“ document.write()”,那只是暫時的,以查看其是否有效。 代碼如下。

HTML:

<!DOCTYPE html>
<html>
    <head>
    <title>DNA Translator</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="script.js"></script>
    <script></script>
    </head>
    <body>
        <div id="wrapper">
            <form>
                <label for="dna">DNA:</label>
                <input type="text" name="dna" placeholder="DNA">
                <label for="mrna">mRNA:</label>
                <input type="text" name="mrna" placeholder="mRNA">
                <label for="trna">tRNA:</label>
                <input type="text" name="trna" placeholder="tRNA">
                <label for="aminoAcids">Amino Acids:</label>
                <input type="text" name="aminoAcids" placeholder="Amino Acids">
                <div class="buttons">
                    <button id="button_translate" type="button">Tanslate</button>
                    <button id="button_clear" type="button">Clear</button>
                </div>
            </form>
        </div>
    </body>
</html>

Javascript:

$(document).ready(function() {
    $('#button_translate').mouseenter(function() {
        $('#button_translate').fadeTo('fast', 1);
    });
    $('#button_translate').mouseleave(function() {
        $('#button_translate').fadeTo('fast', 0.7);
    });
    $('#button_clear').mouseenter(function() {
        $('#button_clear').fadeTo('fast', 1);
    });
    $('#button_clear').mouseleave(function() {
        $('#button_clear').fadeTo('fast', 0.7);
    });
    $('#button_translate').click(function() {
        var dna = $('input[name=dna]').val();
        var dna = dna.toLowerCase();
        function allLetters(text) {  
            var letters = /^[A-Za-z]+$/;  
            if(text.value.match(letters)) {  
                document.write("That is a DNA sequence.");
            }
            else
            {  
                document.write("Not a real DNA sequence.");
            }  
        }

        allLetters(dna);
    });
});

CSS(如果有關系):

#wrapper {
    margin-top: 10%;
}

label {
    width:100px;
    font-size:18px;
    font-family:"Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica;
    text-align:right;
    float:left;
    clear:left;
    padding-top:5px;
    padding-right:20px;
}

#button_translate {
    float:left;
    opacity:0.7;
    display:inline-block;
    height:35px;
    width:180px;
    background-color:#293FE3;
    font-family:arial;
    font-weight:bold;
    color:#ffffff;
    border-radius:5px;
    text-align:center;
    margin-top:2px;
    /*display:block;*/
    margin:15px auto;
}

#button_clear {
    float:right;
    opacity:0.7;
    display:inline-block;
    height:35px;
    width:180px;
    background-color:#293FE3;
    font-family:arial;
    font-weight:bold;
    color:#ffffff;
    border-radius:5px;
    text-align:center;
    margin-top:2px;
    /*display:block;*/
    margin:15px auto;
}

input[type="text"] {
    width:390px;
    height:20px;
    padding:4px 6px;
    margin-bottom:40px;
    color:#555;
    background-color:#fff;
    border:1px solid #ccc;
    float:left;
    font-size:14px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px; 
    -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition:border linear .2s, box-shadow linear .2s;
    -moz-transition:border linear .2s, box-shadow linear .2s;
    -o-transition:border linear .2s, box-shadow linear .2s;
    transition:border linear .2s, box-shadow linear .2s
}

form {
    width:524px;
    margin-left:auto;
    margin-right:auto;
}

.buttons {
    text-align:center;
    float:right; 
    width:404px
}

#dna {
}

#mrna {
}

#trna {
}

#aminoacids {
}

text已經是您要匹配的值,因此請更改:

if(text.value.match(letters)) {
..

if(text.match(letters)) {
...

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM