jQuery   发布时间:2022-03-30  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Jquery表单验证大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
<html> <head> <title>无标题文档</title> <Meta charset="utf-8" /> <script src="jquery-1.3.2.js"></script> <script src="jquery.validate.js"></script> <script src="jquery.datepick.js"></script> <link rel="stylesheet" href="screen.css" /> <link rel="stylesheet" href="jquery.datepick.css" /> <script> $(function(){ $("input[name=birthday]").datepick({dateFormat:"yy/mm/dd"}); //自定义规则 $.validator.addMethod("sfz",function(value){ re = /^\d{18}$|^\d{17}[Xx]$/; //返回true成功,false失败 return re.test(value); }); $("#testForm").validate( { rules:{ realname:{ required:true },loginname:{ required:true,minlength:5,maxlength:8 },pwd1:{ required:true,rangelength:[6,12] },pwd2:{ required:true,equalTo:"input[name=pwd1]" },gender:{ required:true },age:{ required:true,min:20,max:50 },edu:{ min:1 },like:{ required:true },email:{ email:true },idcard:{ sfz:true } },messages:{ realname:{ required:"姓名不能为空!" },loginname:{ required:"登录名不能为空!",minlength:"最少5列",maxlength:"最多8列" },pwd1:{ required:"登陆密码不能为空",rangelength:"最少6列,最多12列" },pwd2:{ required:"确认密码不能为空",equalTo:"两次密码不一致" },age:{ required:"年龄不能为空",min:"最小20岁",max:"最大50岁" },edu:{ min:"必须选择一个学历" },email:{ email:"邮箱错误!" },idcard:{ sfz:"×××号填写错误!" } } } ); }); </script> </head> <body> 员工信息录入: <div id="main"> <form id="testForm" action="2.html"> <table> <tr> <td>真实姓名(必填)</td> <td><input name="realname" /></td> </tr> <tr> <td>登录名(必填,长度为5-8列之间)</td> <td><input name="loginname" /></td> </tr> <tr> <td>密码(必填,长度为6-12列之间)</td> <td><input name="pwd1" /></td> </tr> <tr> <td>确认密码</td> <td><input name="pwd2" /></td> </tr> <tr> <td>性别(必选其一)</td> <td> <input name="gender" type="radio" />男 <input name="gender" type="radio" />女 <label for="gender" class="error" style="display:none;">必须选择一个性别</label> </td> </tr> <tr> <td>年龄(必填,20-50之间)</td> <td><input name="age" /></td> </tr> <tr> <td>你的学历</td> <td> <SELEct name="edu"> <option value="0">--请选择你的学历--</option> <option value="1">初中</option> <option value="2">高中</option> <option value="3">大专</option> </SELEct> </td> </tr> <tr> <td>出生日期(1995/5/5)</td> <td><input name="birthday" readonly /></td> </tr> <tr> <td>兴趣爱好</td> <td> <input type="check@L_262_23@" name="like" />羽毛球 <input type="check@L_262_23@" name="like" />上网 <input type="check@L_262_23@" name="like" />旅游 <input type="check@L_262_23@" name="like" />购物 <label for="like" class="error" style="display:none;">必须选择一项</label> </td> </tr> <tr> <td>电子邮箱</td> <td><input name="email" /></td> </tr> <tr> <td>×××</td> <td><input name="idcard" /></td> </tr> <tr> <td colspan="2" align="right"> <input type="submit" value="保存" /> </td> </tr> </table> </form> </div> </body> </html>

大佬总结

以上是大佬教程为你收集整理的Jquery表单验证全部内容,希望文章能够帮你解决Jquery表单验证所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。