jQuery表单校验

小小Demo：

<script>
    $(function () {
        //给username绑定失去焦点事件
        $("#username").blur(function () {
            //得到username文本框的值
            var nameValue = $(this).val();
            //每次清除数据
            $("table font:first").remove();
            //校验username是否合法
            if (nameValue == "") {
                $(this).parent().append("<font class='error' color = 'red'>你输入的用户名为空</font>");
            } else {
                $(this).parent().append("<font  color = 'blue'>可以使用！</font>");
            }
        });
        //给邮箱绑定失去焦点事件
        $("#email").blur(function () {
            //得到文本框的值
            var myemail = $(this).val();
            //每次失去焦点先清除之前的数据
            $("#email+font").remove();
            //定义邮箱校验正则
            var reg = /^\w{6,20}@(\w{2,6}\.)+\w{2,6}$/;
            if (reg.test(myemail)) {
                $(this).parent().append("<font color = 'blue'>邮箱合法！</font>");
            } else {
                $(this).parent().append("<font class='error' color = 'red'>邮箱不合法！</font>");
            }
        });
        //绑定表单提交事件(表单是否提交，由表单的submit事件返回ture还是false决定)
        $("form").submit(function () {
            //主动触发输入框的失去焦点事件
            $(":text,:password").trigger("blur");
            //判断页面中是否Error的font
            if ($(".error").size() >= 1) {
                return false;
            }
            return true;
        });
    });
</script>

 

转载于:https://www.cnblogs.com/laodang/p/8961392.html