使用Jquery进行工作表验证

时间:2013-03-26 21:11:18

标签: jquery validation

我一直在尝试使用视觉复选标记或者在keyup上的表单字段旁边的X来滚动我自己的表单验证。我遇到的一个问题是错误与否,它会在keyup被触发后产生一个新的跨度。所以我尝试在每个键之后删除所有元素,以便我得到一个带有成功或错误消息的跨度。这目前有效,但我想知道是否有更好的方法来做到这一点:

jQuery('input#firstname').keyup(function () {

    var text = jQuery(this).val();

    if (check_text(text) === false || text === '') {
        $(this).nextAll().remove();
        jQuery(this).after('<span class="form-error">Error</span>');
    } else {
        $(this).nextAll().remove();
        jQuery(this).after('<span class="form-success">Success</span>');
    }
});

/* Functions */

function check_text(text) {
    var regex = /^[a-zA-Z0-9- ]*$/;
    return regex.test(text);
}

工作示例:http://jsfiddle.net/XBaKQ/1/

1 个答案:

答案 0 :(得分:0)

我建议您在每个input

旁边添加范围
<input id="firstname" /><span class='msg'></span> <br>
<input id="lastname" /><span class='msg'></span>

并在您的脚本中设置如下消息:

      if (check_text(text) === false || text === '') {
        jQuery(this).next(".msg").html('<span class="form-error">Error</span>');
       } else {      
         jQuery(this).next(".msg").html('<span class="form-success">Success</span>');
      }

jsFiddle