jquery.validate使用

<script src="jquery-1.8.3.js"></script>
<script src="jquery.validate.min.js" type="text/javascript"></script>
<script src="jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $("#form1").validate();
    });       
</script>

<form id="form1" name="form1" action="." method="post">
    <input type="text" id="tbName" name="tbName" data-val="true" data-val-required="内容不能为空" />
    <span data-valmsg-for="tbName"></span>

    <select id="ddlType" name="ddlType" data-val="true" data-val-required="类别不能为空">
        <option value="">请选择</option>                            
        <option value="1">选项1</option>
        <option value="2">选项2</option>
    </select> 
    <span data-valmsg-for="ddlType"></span> 

    <input id="tbPrice" name="tbPrice" type="text" data-val="true"
        data-val-number="必须为有效数值" data-val-required="价格不能为空！" data-val-range="价格介于0到100之间"
        data-val-range-min="0"  data-val-range-max="100" /> 
    <span data-valmsg-for="tbPrice"></span> 
    
    <input type="submit" value="提交">
</form>

可以自定义提示信息样式，在页面头部引用样式表文件<link href="jquery.validate.css" rel="stylesheet" type="text/css" />，其内容：

.input-validation-error { border: 1px solid #ff0000; }
.input-validation-valid  { border: 1px solid #00ff00 }
.field-validation-error span{ color: #D15B47; line-height:22px; text-indent:6px; margin:0 0 0 6px; }
.field-validation-valid { display: none }
.validation-summary-errors { font-weight: bold; color: #ff0000 }
.validation-summary-valid { display: none }