黑马程序员技术交流社区

标题: 【广州校区】+【原创】+jQuery表单提交数据验证 [打印本页]

作者: meforall    时间: 2019-1-10 13:59
标题: 【广州校区】+【原创】+jQuery表单提交数据验证
[AppleScript] 纯文本查看 复制代码
<script type="text/javascript">
    //页面加载的时候执行的方法ready(),和load方法一样
    $(document).ready(function(){
        //为表单的必填文本框添加提示信息()选择form中的所有后代input元素)
        $("form :input.required").each(function(){
            //创建元素
            var $required = $("<strong class='high'>*</strong>");
            //将它追加到文档中
            $(this).parent().append($required);
        });
        //为表单的必填文本框添加相关事件(blur、focus、keyup)
        //对于每个选择出来的标签调用blur都个他们绑定一个……
        $("form :input").blur(function(){
            //注意:这里的this是DOM对象,$(this)才是jQuery对象
            var $parent = $(this).parent();
            //删除之前的错误提醒信息
            $parent.find(".msg").remove();
            //验证“名称”
            if($(this).is("#name")){
                //运用jQuery中的$.trim()方法,去掉首位空格
                if($.trim(this.value) == "" || $.trim(this.value).length < 6){
                    var errorMsg = " 请输入至少6位的名称!";
                    //class='msg onError' 中间的空格是层叠样式的格式
                    $parent.append("<span class='msg onError'>" + errorMsg + "</span>");
                }
                else{
                    var okMsg=" 输入正确";
                    $parent.find(".high").remove();
                    $parent.append("<span class='msg onSuccess'>" + okMsg + "</span>");
                }
            }
        }).keyup(function(){
            //triggerHandler 防止事件执行完后,浏览器自动为标签获得焦点
            $(this).triggerHandler("blur");
        }).focus(function(){
            $(this).triggerHandler("blur");
        });

        //点击重置按钮时,触发文本框的失去焦点事件
        $("#send").click(function(){
            //trigger 事件执行完后,浏览器会为submit按钮获得焦点
            $("form .required:input").trigger("blur");
            var numError = $("form .onError").length;
            document.write(numError);
            if(numError){
                return false;
            }
        //弹出窗口提示
       alert("注册成功");
        });
    });
</script>










欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2