jQuery Validate表单校验使用
一、前言
相信很多开发的小伙伴都用过 jQuery Validate插件，该插件为表单提供了强大的验证功能，简单实用便于维护。
今天呢，重点讲解下如何使用 jQuery Validate插件。
如有想深入了解该插件 如何进行自定义校验(eg：<正则 / 业务参数>校验)的小伙伴，请前往以下链接：
5分钟学会jQuery Validate之自定义(正则)校验
在此记录一下，分享给大家。
二、使用步骤
/**
* 1、导入js库
*/
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://www.softwhy.com/demo/jQuery/js/jquery.validate.js"></script>
// 中文信息提示包
<script src="http://www.softwhy.com/demo/jQuery/js/messages_zh.js"></script> /**
* 2、html代码<表单>
*/
<form id="prodForm" method="post" action="/yys/prd/save" >
<table class="y_add_g_table">
<tr>
<td><span><em>＊</em>商品名称</span></td>
<td><input type="text" autocomplete="off" maxlength="255" id="name" name="name" value="" placeholder="请填写商品名称" /></td>
</tr>
<tr>
<td><span><em>＊</em>商品价格</span></td>
<td><input type="text" autocomplete="off" maxlength="11" id="initPrice" name="initPrice" value="" placeholder="请填写商品价格" /></td>
</tr>
<tr>
<td><span><em>＊</em>商品库存</span></td>
<td><input type="text" maxlength="9" id="stock" name="stock" value="" placeholder="请填写库存"/></td>
</tr>
<tr>
<td><span>CAS号</span></td>
<td><input type="text" autocomplete="off" maxlength="64" id="casNo" name="casNo" value="" placeholder="请填写商品Cas号" /></td>
</tr>
</table>
<div
<p>
// 第一种：button绑定点击事件
<input type="button" id="btn_prod_submit" value="保存" />
// 第二种：submit
<input type="submit" id="btn_prod_submit" value="保存" />
<input type="button" id="btn_prod_Back" value="返回" />
</p>
</div>
</form>
/**
* 3、js校验
*/
$().ready(function() {
$("#prodForm").validate({
// 校验规则
rules: {
name: {
required: true, // 必填校验
maxlength:255 // max长度校验
},
initPrice: {
required: true,
number:true,
max:99999999.99, // 值大小校验
maxlength:11
}
},
// 校验提示信息
messages: {
name: {
required: '请填写商品名称',
maxlength: '商品名称长度不能超过255个字符'
},
initPrice:{
required: '请填写商品价格',
number:'商品价格必须是数字',
max:'商品价格最大不能超过99999999.99',
maxlength:'商品价格不能超过十位'
}
}
});
});
三、推荐 - <jQuery Validate表单校验>完整版
Now ~ ~ ~写到这里，就写完了，如果有幸帮助到你，请记得关注我，共同一起见证我们的成长。
