我认为这很明显......
<script type="text/javascript">
$(document).ready(function(){
function textValidate(field) {
$("field").blur(function(){
var alphaExp = /^[a-zA-Z\sàèìòùáéíóúäëïöüñãõåæøâêîôû-]+$/;
if (f_name.value.length > 1 && f_name.value.match(alphaExp)) {
document.getElementById(field+"_mark").innerHTML = "<img src='images/icons/tick.png' class='mark'>";
}
else {
document.getElementById(field+"_mark").innerHTML = "<img src='images/icons/cross.png' class='mark'>";
}
});
}
textValidate(#f_name);
textValidate(#l_name);
});
</script>
编辑:我的HTML ...
<p>First name</p>
<input type="text" id="f_name"> <span id="f_name_mark"></span>
<p>Last name</p>
<input type="text" id="l_name"> <span id="f_name_mark"></span>
我的目的是让<span>
由十字架填充或相应地勾选。目前我没有得到任何改变,虽然我的工作不是一个功能而只是直接的代码应用于#f_name
,如下所示:
<script type="text/javascript">
$(document).ready(function(){
$("#f_name").blur(function(){
var alphaExp = /^[a-zA-Z\sàèìòùáéíóúäëïöüñãõåæøâêîôû-]+$/;
if (f_name.value.length > 1 && f_name.value.match(alphaExp)) {
document.getElementById("f_name_mark").innerHTML = "<img src='images/icons/tick.png' class='mark'>";
}
else {
document.getElementById("f_name_mark").innerHTML = "<img src='images/icons/cross.png' class='mark'>";
}
});
});
</script>
答案 0 :(得分:4)
textValidate(#f_name);
textValidate(#l_name);
应该是
textValidate("#f_name");
textValidate("#l_name");
和
$("field").blur(function(){
应该是
$(field).blur(function(){
而且我不确定你从哪里得到变量f_name
。
答案 1 :(得分:0)
textValidate("#f_name");
textValidate("#l_name");
你还确定你需要#?
答案 2 :(得分:0)
我认为这里有一种类型:
if (f_name.value.length > 1 && f_name.value.match(alphaExp)) {
document.getElementById(field+"_mark").innerHTML = "<img src='images/icons/tick.png' class='mark'>";
}
应该是
if (field.value.length > 1 && field.value.match(alphaExp)) {
document.getElementById(field+"_mark").innerHTML = "<img src='images/icons/tick.png' class='mark'>";
}
一个人在这里:
$("field").blur(function(){
应该是
$(field).blur(function(){
和
textValidate(#f_name);
textValidate(#l_name);
应该是
textValidate('#f_name');
textValidate('#l_name');
答案 3 :(得分:0)
您无法在document.getElementById(id)
使用
$(field + "_mark").html("<img src='images/icons/tick.png' class='mark'>");
代替。
您的textValidate
函数也必须带一个字符串:
textValidate("#f_name");
textValidate("#l_name");
而不是f_name.value
你可能意味着(如果你不是仅为IE开发..)
$( “#f_name”)。VAL()
或
$(场).VAL()
,不确定。
最后,您的<input>
元素缺少其结束标记</input>
。
答案 4 :(得分:0)
在其他答案中,您使用的是期望#myId
的jQuery选择器和期望myId
的getElementById。预先填写英镑符号不会返回您要查找的元素。
答案 5 :(得分:0)
以下是您的代码的略微修改版本:
$.fn.textValidate = function() {
this.blur(function() {
var alphaExp = /^[a-zA-Z\sàèìòùáéíóúäëïöüñãõåæøâêîôû-]+$/;
var mark = $(this).next('span');
if ($(this).val().match(alphaExp))
mark.html("<img src='images/icons/tick.png' class='mark'>");
else
mark.html("<img src='images/icons/cross.png' class='mark'>");
});
}
$(document).ready(function() {
$('#f_name').textValidate();
$('#l_name').textValidate();
});
但是,HTML的结构存在缺陷。编写所有内容的更好方法可以是here。
<label>First name
<input type="text" id="f_name" />
<img class="mark" />
</label>
<label>Last name
<input type="text" id="l_name" />
<img class="mark" />
</label>
$(document).ready(function() {
$('#f_name, #l_name').blur(function() {
var alphaExp = /^[a-zA-Z\sàèìòùáéíóúäëïöüñãõåæøâêîôû-]+$/;
var mark = $(this).next('.mark');
if ($(this).val().match(alphaExp))
mark.attr('src', 'images/icons/tick.png');
else
mark.attr('src', 'images/icons/cross.png');
});
});
答案 6 :(得分:0)
使用jQuery Object调用jQuery blur函数。这意味着如果使用
调用它,函数将失败textValidate(#f_name);
f_name既不是字符串也不是jQuery对象。为了解决您的问题,我了解您正在努力使您的功能尽可能通用,以便它可以应用于其他领域。试试这个:
function textValidate(field) {
$(field).blur(function(){
var value = $(field).val();
var alphaExp = /^[a-zA-Z\sàèìòùáéíóúäëïöüñãõåæøâêîôû-]+$/;
if (value.length > 1 && value.match(alphaExp)) {
$(field+"_mark").html = "<img src='images/icons/tick.png' class='mark'>";
}
else {
$(field+"_mark").html = "<img src='images/icons/cross.png' class='mark'>";
}
});
}
现在,要调用此函数,您只需要将css选择器作为参数传递:
textValidate("#f_name");
请注意,参数是一个字符串。而已。