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

小编上网查阅了许多关于jquery.validate的文章，大部门只是介绍它的api和用法，没有一个详细的的入门案例介绍，研究了半天还是无从下手。为此，小编自己做了一个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表单验证入门实例，欢迎大家共同学习，希望对大家的学习有所帮助。

赞 (0)

相关推荐

  • JQuery验证jsp页面属性是否为空(实例代码)

    说明:验证是否为空的前提首先要保证是在提交form之前验证的,如果验证结果有为空的项那么限制表单不能提交,并且提示验证错误信息,验证页面属性都不为空的情况下表单正常提交,这部分属于JS部分的东西,与后台业务逻辑层和控制层基本没有任何关系. 限制提交的方法可以是在form标签里限制,也可以是在submit按钮上添加onclick事件限制: <form action=".." method="post" onsubmit="return check();

  • javascript和jquery分别实现用户登录验证

    javascript和jquery分别实现用户登录验证

    在上一篇文章http://www.jb51.net/article/83504.htm中,用javascript实现了用户验证,但并没有对密码进行验证,这次追加了这个功能,并分别用javascript和jquery实现. 一.用jquery的ajax实现的关键代码 实现如下 /*jquery实现 $(document).ready(function(){ $("#account").blur(function(event) { $.ajax({ type:"GET"

  • jquery validate.js表单验证的基本用法入门

    这里转载一篇前辈写的文章,在我自己的理解上修改了一下,仅作记录. 先贴一个国内某大公司的代码: 复制代码 代码如下: <script type="text/javascript"> function lang(key) { mylang = { 'ls_input_myb': '请输入您的账户', 'ls_myb_email': '漫游币账户为邮箱地址', 'ls_login_password': '请输入您的登录密码', 'ls_password_length': '密码

  • js jquery验证银行卡号信息正则学习

    jquery代码 复制代码 代码如下: $("#bankAccountNumber").change(function(){ alert("1"); var account = $("channelForm.bankAccount.account").val(); alert("2"); var reg = /^\d{19}$/g; // 以19位数字开头,以19位数字结尾 if( !reg.test(account) ) {

  • JS+jQuery实现注册信息的验证功能

    用JS和JQuery实现的效果是一样的. HTML代码 <legend> 请填写注册信息</legend> <form action="index.html" method="post"> <table style="text-align: right;"> <tr> <td>用户名:</td> <td><input type="tex

  • jquery表单验证插件（jquery.validate.js）的3种使用方式

    jquery表单验证插件（jquery.validate.js）的3种使用方式

    jquery  验证非常简单,下面总结常用的三种方式: 第一种方式:也是比较标准的方式: 首先引入jquery  插件和 jquery 验证插件: 第一步:引入插件 复制代码 代码如下: <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="js/jq

  • js和jquery分别验证单选框、复选框、下拉框

    本文分别介绍了js和jQuery验证单选框(radio).多选框(checkbox).下拉框(select),分享给大家供大家参考,具体内容如下 (1).首先说单选框(radio),radio和checkbox一样都是name相同值有多个在获取 radio 值的时候我们不能按照普通文本框.value的方式,而是要判断哪个被选中了. js验证是要用getElementsByName()获取数组 js代码如下: <script> function test(){ var sex = documen

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

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

    小编上网查阅了许多关于jquery.validate的文章,大部门只是介绍它的api和用法,没有一个详细的的入门案例介绍,研究了半天还是无从下手.为此,小编自己做了一个jquery validate.js表单验证入门实例,写的不是特别好,但应该适用于初学者,分享给大家. 以下是validate.js表单验证入门实例参考源码,文章下面有源码下载地址: <html> <head> <meta http-equiv="Content-Type" content=

  • jQuery.validate.js表单验证插件的使用代码详解

    Validate Validate是基于jQuery的一款轻量级验证插件,内置丰富的验证规则,还有灵活的自定义规则接口,HTML.CSS与JS之间的低耦合能让您自由布局和丰富样式,支持input,select,textarea的验证. 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vi

  • 快速学习jQuery插件 jquery.validate.js表单验证插件使用方法

    最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jQuery插件之一,经过了全球范围内不同项目的验证,并得到了许多Web开发者的好评.作为一个标准的验证方法库,Validation拥有如下特点: 1.内置验证规则: 拥有必填.数字.Email.URL和信用卡号码等19类内置验证规则 2.自定义验证规则: 可以很方便地自定义验证规则 3.简单强大的验证

  • 基于Bootstrap+jQuery.validate实现表单验证

    基于Bootstrap+jQuery.validate实现表单验证

    这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登陆这块,也就尤为重要. 用户注册和登录其实往往比我们想象的难.就比如表单校验,里面涵盖的内容其实挺多,就前台而言,你需要了解: 1.正则表达式的基本了解 其实正则并不难,并且在学会后能带给你极大的成就感,享受那种事半功倍的效果吧. 2.ajax异步请求 在验证用户名是否存在.用户登录时账号或者密码错误时给出相应的

  • Vue循环组件加validate多表单验证的实例

    *父父组件(helloWorld.vue): <template> <div class="hello-world"> <el-button type="text" @click="saveAll" class="button">SAVE</el-button> <promise-father ref="promiseFather"></pr

  • JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】

    本文实例总结了JS表单验证方法.分享给大家供大家参考,具体如下: 回回写表单,回回要写不同的检查JS,很麻烦,后来写了通用的检查函数,很粗糙,但比较实用,以后再好好改改: 包含页: Check-Form.js 代码如下: //规则检查排序 function RegCheck(objs) { var str = objs.checktype; switch (str) { case "cn" : //要检查的表单控件的输入类型必须为中文 return CnWordRegCheck(obj

  • 详解jquery validate实现表单验证 （正则表达式）

    一.目的 为了更好地实现人机交互,使用jQuery封装库中的validate插件,在用户填写表单时,可以快速地对用户填写的数据进行验证,并做出反馈. 二.validate插件简介   validate()是插件的核心方法,定义了基本的校验规则和一些有用的配置项. rule:设置表单的验证规则: messages:设置表单不符合验证规则的提示信息: debug:如果这个参数为true,那么表单还会提交,只进行检查,调试时十分方便. required:必填 minlength:最小长度 maxlen

  • jQuery Validate表单验证入门学习

    jQuery Validate表单验证入门学习

    本文讲述了jQuery Validate表单验证入门的基础知识,jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求,以下就是本文的全部内容,特分享给大家. 1.导入 js 库 <script src="../js/jquery.js" type="text/javascript"></script> <script src="../js/j

  • jQuery表单验证功能实例

    jQuery表单验证功能实例

    本文实例讲述了jQuery表单验证功能.分享给大家供大家参考.具体如下: 这里使用jquery实现的表单验证效果,以Ajax方式验证你的表单是否填写正确,如果验证不通过,会将表单元素背景变成红色,并给出提示信息,简单实用,jquery表单验证功能已经有很多了,本款表单验证特效看上去更简单,不懂Ajax的朋友,或许直接套用即可实现无刷新表单验证功能. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-table-form-check-c

随机推荐