表单失去焦点时判断是否符合条件 / 点提交时验证输入是否正确 / 即时提醒输入是否正确

1、表单输入框失去焦点的时候判断用户名是否符合条件

$("form:input").blur(function () {   //输入框失去焦点的时候执行，form:input获取表格的输入框
    var $parent = $(this).parent();
    if ($(this).is("#username")) {
        if (this.value == "" || this.value.length < 6) {
            var errorMsg = "请输入至少六位的用户名";
            $parent.find(".formtips").remove();  //移除之前添加的提示信息
            $parent.append("<span class='formtips onError'>" + errorMsg + "</span>");//如果输入错误加onError的class，formtips代表提示信息的class
        } else {
            var okMsg = "输入正确";
            $parent.append("<span class='formtips onSuccess'>" + okMsg + "</span>");
        }
    }
});

 

2、点击提交按钮的时候验证全部的信息

$("#send").click(function () {
    $("form:input").trigger("blur"); //点击提交按钮的时候主动触发输入框失去焦点事件
    var numError = $(".form .onError").length;  //numError为错误提示信息的数量
    if (numError) {
        return false;  //如果有错误信息就不提交
    }
});

 

3、即时提醒

$("form:input").blur(function () {   
    //输入框失去焦点的时候执行的函数
}).keyup(function () {  //keyup：松开按键的时候触发
    $(this).triggerHandler("blur");  //triggerHandler：只触发元素绑定的blur事件而不触发浏览器默认的blur事件，否则不能将光标定位到文本框上
}).focus(function () {
    $(this).triggerHandler("blur");  //光标定位到文本框上的时候也进行判断
});