简体   繁体   English

如何验证JavaScript中的字母字符?

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

I'm beginning what will be a DNA translator. 我正在开始将成为DNA转换器。 I have it set up to take the text from the DNA text box, make it all lower case. 我将其设置为从DNA文本框中获取文本,并将其全部小写。 I know that much is working. 我知道很多工作。 However, the function made to validate that it is all alphabetical characters isn't working. 但是,用于验证它是否全部为字母字符的功能不起作用。 I'm wondering what I'm doing wrong. 我想知道我在做什么错。 The ultimate output won't be a "document.write()", thats just temporary to see if its working. 最终的输出将不是“ document.write()”,那只是暂时的,以查看其是否有效。 The code is below. 代码如下。

HTML: 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: 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 (if it matters): 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 is already your value which you want to match, so change: text已经是您要匹配的值,因此请更改:

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

to

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM