(Jquery功能篇) Jquery validate框架验证实例代码
2013-08-07 18:56
561 查看
第一步:加载相关的js文件
第二步:
第三步:jsp页面代码
相关效果:
<script type="text/javascript" src="js/jquery.validate.js"></script>
第二步:
$().ready(function() { $("#secondform").validate({ //规则 rules:{ xm:{ required: true, minlength: 2, maxlength: 5 }, pwd:{ required: true, minlength: 6 }, confirm_pwd:{ required: true, equalTo: "#pwd" }, f2csrq:{ required: true, date: true }, f2xjzd: { required: true }, f2sfzh:{ /*digits: true, rangelength: [18,20]*/ required: true, isIdCardNo: true } }, //相关信息 messages:{ xm:{ required: "请填写姓名", minlength: "字符长度不能小于2个字符", maxlength: "字符长度不能大于5个字符" }, pwd:{ required: "请填写密码", minlength: "字符长度不能小于6个字符" }, confirm_pwd:{ required: "请再次输入密码", equalTo: "密码不一致" }, f2csrq:{ required: "请输入出生日期", date: "日期格式不正确(例:2009/04/07)" }, f2xjzd:{ required: "请输入地址" }, f2sfzh:{ required: "请输入***号", isIdCardNo: "***号不正确" } } } }); });
第三步:jsp页面代码
<form id="secondform"> <fieldset> <legend>自定义jQuery验证</legend> <div id="xm" class="owinput"> <div class="owlabel"> <label class="req" for="xm"> 姓 名 :</label> </div> <div class="owfield"> <span class="inp"> <input name="xm" type="text"> </span> </div> </div> <div id="xb" class="owinput"> <div class="owlabel"> <label class="req" for="pwd" > 密 码 :</label> </div> <div class="owfield"> <span class="inp"> <input id="pwd" name="pwd" type="password"> </span> </div> </div> <div id="xb" class="owinput"> <div class="owlabel"> <label class="req" for="confirm_pwd"> 密码确认 :</label> </div> <div class="owfield"> <span class="inp"> <input name="confirm_pwd" type="password"> </span> </div> </div> <div id="csrq" class="owinput"> <div class="owlabel"> <label class="req" for="f2csrq"> 出生日期 :</label> </div> <div class="owfield"> <span class="inp"> <input name="f2csrq" type="text"> </span> </div> </div> <div id="xjzd" class="owinput"> <div class="owlabel"> <label class="req" for="f2xjzd"> 现居住地 :</label> </div> <div class="owfield"> <span class="inp"> <input value="" name="f2xjzd" type="text"> </span> </div> </div> <div id="sfzh" class="owinput"> <div class="owlabel"> <label class="req" for="f2sfzh"> ***号 :</label> </div> <div class="owfield"> <span class="inp"> <input name="f2sfzh" type="text"> </span> </div> </div> </fieldset> </form>
相关效果:
相关文章推荐
- jQuery Validate格式验证功能实例代码(包括重名验证)
- 表单验证代码实例:jquery.validate.js表单验证插件
- jquery图片放大镜功能的实例代码
- JQuery validate 验证一个单独的表单元素实例
- jQuery Validate验证框架详解
- jQuery Validate验证框架详解
- jQuery Validate验证框架详解
- jQuery Validate验证框架详解
- (Jquery功能篇) JqGrid表单控件实例代码
- jQuery Validate验证框架详解
- atitit.jQuery Validate验证框架详解与ati Validate 设计新特性
- jQuery Validate验证框架详解
- 使用jQuery validate 验证注册表单实例演示
- iOS开发中Swift 指纹验证功能模块实例代码
- jquery validate 验证框架 addMethod
- jQuery Validate验证框架详解
- jquery validate验证框架与kindeditor使用问题
- Ajax+Struts2实现验证码验证功能实例代码
- jquery.validate.js校验框架中的验证用户名是否可用