JQ输入验证

-HTML

<form  action="" method="post" enctype="multipart/form-data"  onsubmit="return  checkform()">
        <input type="hidden" name="c" value="entry" />
        <input type="hidden" value="signup" name="do">
        <input type="hidden"  value="sign" name="op">
        <input type="hidden" value="lb_vote" name="m">
        <input type="hidden" name="id" value="{$id}" />
             <div class="form-group">
                <label for="exampleInputEmail1">姓名</label>
                <input type="uname" class="form-control" id="uname" name="uname" placeholder="姓名">
                <span class="hint" id="nameMsg" ></span>
            </div>
            <div class="form-group">
              <label for="exampleInputPassword1">手机号</label>
              <input type="number" class="form-control" id="uphone" name="uphone" placeholder="手机号">
              <span class="hint" id="phoneMsg"></span>
            </div>
           <div class="form-group" style="overflow:hidden;">
            <label for="imgdis">图片</label>
            <div>
                <div class="upload_image">
                    <img   name="imgdis" id="ImgPr" src=""/>
                </div>

              </div>
              <div>
           <div class="upload_btn"   >
                    <span class="icon-plus"></span> 

                <input type="file" name="file"  onchange="showpic(this,'ImgPr');"  id="file"  value="图片上传" accept="image/jpeg,image/gif,image/png"    />
                </div>
        <br />



            </div>
        <span class="hint" id="imgMsg"></span>
          </div>
            <div class="form-group" style="clear:left;margin-top:15px;">
              <label for="exampleInputPassword1" >描述</label>
              <textarea class="form-control"  name="discription" id="discrption"></textarea>
               <span class="hint" id="disMsg"></span>
            </div>
              <input type="submit"  class="form-control btn btn-danger " value="报名"></input> 

        </form>

-JS端验证

    function checkform(){

        var uname=$("#uname").val();
        var uphone=$("#uphone").val();
        var discrption=$("#discrption").val();

     if($("#uname").val()==''){
        $("#nameMsg").removeClass('hint');
        $("#nameMsg").text('*用户名不能为空！');
        $("#nameMsg").addClass('dis');  
        $("#uname").focus();
       return false;
     }else{
        $("#nameMsg").removeClass('dis');
        $("#nameMsg").addClass('hint');  
     }
     /*验证手机号的表达式*/
     var myphone = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0]{1})|(15[0-3]{1})|(15[5-9]{1})|(18[0-9]{1}))+\d{8})$/;      

    if($("#uphone").val()==''){
        $("#phoneMsg").removeClass('hint');
        $("#phoneMsg").text('*不能为空');
        $("#phoneMsg").addClass('dis');  
        $("#uphone").focus();
        return false;

    }else if(uphone.length!=11){
           $("#phoneMsg").text('请输入11位手机号码！');
          $("#phoneMsg").addClass('dis');  
          $("#uphone").focus();
                return false;

    }else if(!myphone.test(uphone)){

        $("#phoneMsg").text('请输入有效的手机号！');
          $("#phoneMsg").addClass('dis');  
          $("#uphone").focus();
          return false;
    }else{
        $("#phoneMsg").removeClass('dis');
        $("#phoneMsg").addClass('hint');
    }

    if($("#file").val()==''){
        $("#imgMsg").removeClass('hint');
        $("#imgMsg").text('未选择图片!');
        $("#imgMsg").addClass('dis');  
        $("#upload_image").focus();
         return false;
    }else{
        $("#imgMsg").removeClass('dis');
        $("#imgMsg").addClass('hint');
    }

  if($("#discrption").val()==''){
    $("#disMsg").removeClass('hint');
        $("#disMsg").addClass('dis');  
        $("#disMsg").text('未填写！');
        $("#discrption").focus();
        return  false;
  }else{
    $("#disMsg").removeClass('dis');
    $("#disMsg").addClass('hint');
  }
return true;

}

-CSS

        .hint{
            font-size: 2pt;
            color: red;
            display: none;

        }
        .dis{
            font-size: 2pt;
            color: red;
            display: block;
        }
        .img
     {
      filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
   }