前端表单简单的jq验证

  <form class="form-horizontal codeYz" action="/index.php/Home/Index/regcl.html" method="post" id="reg">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">登陆账号</label>
                            <div class="col-sm-8">
                                <input type="tel" class="form-control account" placeholder="请设置您的登录账号" onBlur="textBlur(this)" onFocus="textFocus(this)" id="username" name="username">
                                <div class="tips">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">手机号码</label>
                            <div class="col-sm-8">
                                <input type="tel" class="form-control phone" placeholder="请输入您的手机号码" onBlur="textBlur(this)" onFocus="textFocus(this)" name="moble" id="moble">
                                <div class="tips">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label col-xs-12" style="margin-bottom: 5px;">验证码</label>
                            <div class="col-sm-5 col-xs-7">
                                <input type="tel" class="form-control phonekey" placeholder="请输入收到的验证码" onBlur="textBlur(this)" onFocus="textFocus(this)" name="code" id="code">
                                <div class="tips">
                                </div>
                            </div>
                            <div class="col-sm-2 text-right col-xs-4">
                                <input type="button" class="btn btn-default" id="send" value="获取验证码" >
                            </div>
                        </div>
                      

                        <div class="form-group">
                            <label class="col-sm-3 control-label">设置密码</label>
                            <div class="col-sm-8">
                                <input type="password" class="form-control password" placeholder="请输入密码" onBlur="textBlur(this)" onFocus="textFocus(this)" name="password" id="password">
                                <div class="tips">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">确认密码</label>
                            <div class="col-sm-8">
                                <input type="password" class="form-control email" placeholder="请确认密码" onBlur="textBlur(this)" onFocus="textFocus(this)" name="password2" id="password2">
                                <div class="tips">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">真实姓名</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" placeholder="请输入真实姓名" onBlur="textBlur(this)" onFocus="textFocus(this)" name="name" id="name">
                                <div class="tips">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">联系电话</label>
                            <div class="col-sm-8">
                                <input type="tel" class="form-control phone" placeholder="请输入您的手机号码" onBlur="textBlur(this)" onFocus="textFocus(this)" name="phone" id="phone">
                                <div class="tips">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="qq" class="col-sm-3 control-label">联系QQ</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control qq" placeholder="请输入您的QQ号码" onBlur="textBlur(this)" onFocus="textFocus(this)" name="qq" id="qq">
                                <div class="tips">
                                </div>
                            </div>
                        </div>
                         <div class="form-group">
                          <label for="qq" class="col-sm-3 control-label">图像验证码</label>
                           <!--  <label class="col-sm-3 control-label col-xs-12" style="margin-bottom: 5px;">图像验证码</label> -->
                           <!--  <div class="col-sm-5 col-xs-7">
                                <input type="text" class="form-control phone" placeholder="请输入您的验证码"  name="imgcode" id="imgcode">
                            </div>
                            <div class="col-sm-2 text-right col-xs-4">
                                <img src="/index.php/Home/Index/yzm" onclick="this.src=this.src+'?'"><div class="tips">
                                </div>
                            </div> -->
                            <div class="col-sm-8">
                             <div id="embed-captcha"></div>
                            <p id="wait" class="show">正在加载验证码......</p>
                            <p id="notice" class="hide">请先完成验证</p>
                            </div>
                         
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-3 col-xs-12">
                                <button type="button" id="sub" class="btn btn-success">注册</button>
                            </div>
                            <div class="col-sm-5 col-xs-12">
                                <a  class="btn btn-warning" href="/index.php/Home/Index/index.html">已有账号，去登录</a>
                            </div>
                        </div>
                    </form>

 

 

ajax 发送验证码：

        $.post("/index.php/Home/Index/SendSMS.html",{phone:moble},function(flag){
            if(flag==0){
                alert('验证短信已经发送到'+moble+'上，请注意查收！');
                var i=60;
                $('#send').attr('disabled',true);
                var si = setInterval(function(){
                    $('#send').val(i+'秒');

                    if(i<=0) {
                        clearInterval(si);
                        $('#send').val('获取验证码');
                        $('#send').attr('disabled',false);
                    }
                    i--;
                },1000);
            }else{
                alert('发送失败('+flag+')！请重新发送。');
            }
        });

        $.post("/index.php/Home/Index/SendSMS.html",{phone:moble},function(flag){
            if(flag==0){
                alert('验证短信已经发送到'+moble+'上，请注意查收！');
                var i=60;
                $('#send').attr('disabled',true);
                var si = setInterval(function(){
                    $('#send').val(i+'秒');

                    if(i<=0) {
                        clearInterval(si);
                        $('#send').val('获取验证码');
                        $('#send').attr('disabled',false);
                    }
                    i--;
                },1000);
            }else{
                alert('发送失败('+flag+')！请重新发送。');
            }
        });

$("#sub").click(function(){

 

    var username = $("#username").val();
    var moble = $("#moble").val();
    var code = $("#code").val();
    var imgcode = $("#imgcode").val();
    var password = $("#password").val();
    var password2 = $("#password2").val();
    var name = $("#name").val();
    var phone = $("#phone").val();
    var qq = $("#qq").val();

    if($("#username").val()==""){
        $("#username").next().html("请输入您的登录账号");
        $("#username").next().css("display","block");
        return false;
    }
    if($("#moble").val()==""){
        $("#moble").next().html("请输入您的手机号码");
        $("#moble").next().css("display","block");
        return false;
    }
    if($("#code").val()==""){
        $("#code").next().html("请输入收到的短信验证码");
        $("#code").next().css("display","block");
        return false;
    }
    if($("#imgcode").val()==""){
        $("#imgcode").next().html("请输入收到的图像验证码");
        $("#imgcode").next().css("display","block");
        return false;
    }
    if($("#password").val()==""){
        $("#password").next().html("请输入密码");
        $("#password").next().css("display","block");
        return false;
    }
    if($("#password2").val()==""){
        $("#password2").next().html("请输入确认密码");
        $("#password2").next().css("display","block");
        return false;
    }
    if($("#name").val()==""){
        $("#name").next().html("请输入真实姓名");
        $("#name").next().css("display","block");
        return false;
    }
    if($("#phone").val()==""){
        $("#phone").next().html("请输入您的联系电话");
        $("#phone").next().css("display","block");
        return false;
    }
    if($("#qq").val()==""){
        $("#qq").next().html("请输入您的QQ号码");
        $("#qq").next().css("display","block");
        return false;
    }

    $.post("/index.php/Home/Index/regcl.html",{username:username,moble:moble,code:code,imgcode:imgcode,password2:password2,name:name,phone:phone,qq:qq,password:password},function(result){
        var data = eval('(' + result + ')');
        if(data.code==1){

            layer.msg(data.text, function(){
                window.location.href=data.url;
            });

        }else{
            layer.msg(data.text);
        }
    });
})

 

 

样式提示：

    .tips {
    position: absolute;
    border-radius: 6px;
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
    line-height: 30px;
    z-index: 2;
    padding: 0 10px;
    background: #fff;
    top: 40px;
    border: 1px solid #f7f7f7;
    color: #A90707;
  }