首页 / JQUERY / jquery validate.js表单验证入门实例（附源码）

jquery validate.js表单验证入门实例（附源码）

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了jquery validate.js表单验证入门实例（附源码），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1911字，纯文字阅读大概需要3分钟。

内容图文

小编上网查阅了许多关于jquery.validate的文章，大部门只是介绍它的api和用法，没有一个详细的的入门案例介绍，研究了半天还是无从下手。为此，小编自己做了一个jquery validate.js表单验证入门实例，写的不是特别好，但应该适用于初学者，分享给大家。

jquery validate.js表单验证入门实例（附源码） - 文章图片

以下是validate.js表单验证入门实例参考源码，文章下面有源码下载地址：

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>j2query.validate快速入门范例-代潇瑞博客</title>
 <meta name="keywords" content="" />
 <meta name="description" content="jquery.validate.js是一个强大的表单验证插件，这里将来个快速入门范例，展示它的快速易用性。" />
 <script src="jquery-1.8.0.min.js" type="text/javascript"></script>
 <script src="jquery.validate.min.js" type="text/javascript"></script>
 <style type="text/css">
 label.error{color:red;font-size:13px;}
 </style>
</head>
<body>
 <p>信息录入</p>
 <form action="" name="infos" id="infos">
 <p>用户名：<input type="text" name="username" /></p>
 <p>工作号：<input type="text" name="nums" /></p>
 <p>备 注：<input type="text" name="notes" /></p>
 <p><input type="submit" name="sub" /></p>
 </form>
 <script type="text/javascript">
 $(function(){
 $('#infos').validate({
 debug:false, //false表示验证通过后不要自动提交表单
 onkeyup:false, //表示关闭按键松开时候监听验证
 rules:{ //验证规则
 username:{
 required:true, //必填字段
 rangelength:[6,10] //长度在6-10之间
 },
 nums:{
 required:true,
 digits:true
 },
 notes:"required"
 },
 messages:{ //自定义错误信息，默认为英文，除了在这里配置以为，还可以通过配置文件进行配置
 username:{
 required:"用户名必填",
 rangelength:"用户名长度必须为6-10位"
 },
 nums:{
 required:"工作号必填",
 digits:"工作号必须为数字"
 },
 notes:"备注必填"
 },
 //验证通过可以在这里做你想做的事情
 submitHandler:function(form){
 alert("验证通过");
 }
 });
 });
 </script>
</body>
</html>

源码下载：jquery validate.js表单验证入门实例

演示地址：jquery validate.js表单验证入门实例

以上就是为大家提供的一个简单的jquery validate.js表单验证入门实例，欢迎大家共同学习，希望对大家的学习有所帮助。

内容总结

以上是互联网集市为您收集整理的jquery validate.js表单验证入门实例（附源码）全部内容，希望文章能够帮你解决jquery validate.js表单验证入门实例（附源码）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/355527.html

来源：【匿名】