求大侠写个验证

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<#include "/WEB-INF/template/common/include.ftl">
<link href="${base}/template/shop/css/product_comment.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="${base}/template/shop/js/validate.js"></script>
<script type="text/javascript">
$().ready( function() {
$("#submitcomment").click(function(){
$("#commentForm").submit();
})
})
</script>
</head>
<body>
<div class="product_content_right">
<form id="commentForm"  action="${base}/shop/comment!save.action" method="post" enctype="multipart/form-data" >
<input type="hidden" name="productid" value="${(id)!}">
<div class="product_content_right-2">
   &nbsp;&nbsp; 
</div>
<div class="product_content_right-3">
   <span>*</span>&nbsp;标题
  <input type="text" id="username" name="comment.title" class="product_content_text">&nbsp;必填，长度在4-20个字之间
</div>
<input type="button" value="提 交" id="submitcomment">
</form>
 </div>
</body>
</html>
给input里写个非空和长度的验证，小弟初学，不怎么会写

解决方案 »

  1.   

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
    <#include "/WEB-INF/template/common/include.ftl">
    <link href="${base}/template/shop/css/product_comment.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="${base}/template/shop/js/validate.js"></script>
    <script type="text/javascript" src="jquery-1.2.3.pack.js"></script>
    <script type="text/javascript">
    $().ready( function() {
    $("#submitcomment").click(function(){
    var username = document.getElementById("username");
    if(username.value == "" || username.value == undefined)
    {
    alert("请输入用户名");
    return false;
    }
    $("#commentForm").submit();
    })
    })
    </script>
    </head>
    <body>
    <div class="product_content_right">
    <form id="commentForm" action="${base}/shop/comment!save.action" method="post" enctype="multipart/form-data" >
    <input type="hidden" name="productid" value="${(id)!}">
    <div class="product_content_right-2">
    &nbsp;&nbsp; 
    </div>
    <div class="product_content_right-3">
    <span>*</span>&nbsp;标题
    <input type="text" id="username" name="comment.title" class="product_content_text">&nbsp;必填，长度在4-20个字之间
    </div>
    <input type="button" value="提 交" id="submitcomment">
    </form>
     </div>
    </body>
    </html>
      

  2.   

    $().ready( function() {
    $("#submitcomment").click(function(){
    var len = $("#username").val().length;
    if(!len){
    alert("用户名不能为空");
    }else if(len < 4 || len > 20){
    alert("用户名长度要大于4小于20");
    }else{
    $("#commentForm").submit();
    }
    return false;
    })
    })
      

  3.   

    function checkVal(obj){
      if(obj.value == ""){
        alert('用户名不能为空');
        return;
      }else if(obj.value.length<4){
       alert('用户名长度不能少于4');
       return;
      }
      
    }<input type="text" id="username" name="comment.title" class="product_content_text" onblur="checkVal(this)" maxlength="20">&nbsp;必填，长度在4-20个字之间