我正在开始做 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)) {
...
关于javascript - 如何验证 javascript 中的字母字符？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18141463/