一些js表单验证代码

常用表单验证

此方法暂未封装o

需要用到jQuery

可在线引入或者本地引入
推荐地址:
http://www.bootcdn.cn/
Html 代码
    <div class="content">
            <div class="content_box">
                <div class="name">
                    <input type="text" placeholder="真实姓名" id="name">
                </div>
                <div class="sex row">
                    <div class="col-6 active">男</div>
                    <div class="col-6">女</div>
                </div>
                <div class="phone">
                    <input type="tel" placeholder="手机号" id="phone">
                </div>
                <div class="phone email">
                    <input type="email" placeholder="邮箱" id="email">
                </div>
                <div class="phone city">
                    <input type="text" placeholder="详细地址" id="city">
                </div>
                <button id="button"></button>
                <input type="text" class="mui-1" placeholder="课程id" name="idkc" id="idkc" style="display:none"
                       value="{$id}">
                <input type="text" class="mui-1" placeholder="课程标题" name="title" id="title" style="display:none"
                       value="{$title}">
            </div>

        </div>

1.手机号验证

 // 手机号验证
        $("#phone").blur(function () {
            if (phone == "") {

            } else {
                var phone = $("#phone").val();
                if (!(/^1[34578]\d{9}$/.test(phone))) {
                    alert("手机号码有误,请重填");
                    return false;
                }
            }

        });

2.邮箱验证

$("#email").blur(function () {
            if (email == "") {
//                    alert("邮箱不可以为空")
            } else {
                var mail = $("#email").val();
                var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
                if (filter.test(mail)) return true;
                else {
                    alert('您的电子邮件格式不正确');
                    return false;
                }
            }


        });
3.input框验证不能为空以及ajax发送;
$("#button").click(function () {
            if (name == "") {
                alert("用户姓名不可以为空")
            } else if (phone == "") {
                alert("手机号不可以为空")
            }
            else if (email == "") {
                alert("邮箱不可以为空")
            }
            else if (city == "") {
                alert("地址不可以为空")
            } else {
                $.post("http://b1.qu48.cn/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=sns.xiguan.baokecheng", {
                        sex: r,
                        realname: name,
                        mobile: phone,
                        email: email,
                        address: city,
                        idkc: idkc,
                        title: title
                    },
                    function (data) {
                        alert('报名成功');
                        location.href = 'http://b1.qu48.cn/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=sns.xiguan.mykecheng'
                    }), 'json';
            }


        })

4.解决第一个布局加类名方法(已封装)

$(document).ready(function(){

        function firstActive(objs)
        {
            for(var i = 0; i < objs.length; i++)
            {
                objs[i].first().addClass("active");
            }
        }

        function mouseIn(obj)
        {
            obj.siblings().removeClass("active");
            obj.addClass('active');
        }

        function mouseOut(obj)
        {
            obj.addClass('active');
        }

        var objs =[$(".habit_title-box li"), $(".habit_new .habit_new_left .new_list li a"),$(".habit_title-t_l li"), $(".index .conter-h li")];
        firstActive(objs);

    //直接替换类名

    });

未完结…..