jquery validate和validform验证插件的对比

合集下载

前端开发中的表单验证框架与插件推荐

前端开发中的表单验证框架与插件推荐随着互联网技术的快速发展，前端开发在网站和应用程序的设计中扮演着越来越重要的角色。

在用户与网站进行交互的过程中，表单验证是必不可少的一环。

为了提高用户体验和数据安全性，前端开发人员需要选择适用的表单验证框架和插件。

本文将介绍一些常用的表单验证框架与插件，并对其进行评价和推荐。

一、表单验证框架推荐1. jQuery ValidationjQuery Validation是一款流行且功能强大的表单验证框架。

它基于jQuery库，支持各种类型的表单验证规则和自定义错误消息。

jQuery Validation具有灵活的配置选项和丰富的API，可以轻松适应各种验证需求。

并且，它还能进行实时验证，为用户提供即时反馈，提高了用户体验。

2. VeeValidateVeeValidate是一个基于Vue.js的易用且功能丰富的表单验证框架。

它提供了简单的API和语义化的验证规则，使开发人员可以轻松地实现表单验证。

VeeValidate支持异步验证、国际化和自定义错误消息，非常适合Vue.js项目中的表单验证需求。

3. FormikFormik是一个与React配合使用的表单验证框架。

它提供了一个高度可定制的表单验证解决方案，并且与React的哲学相契合。

Formik提供了方便的API和生命周期钩子函数，使表单验证变得简单而灵活。

同时，Formik还支持本地化和错误处理，为React开发者提供了一种优雅的表单验证解决方案。

二、表单验证插件推荐1. Parsley.jsParsley.js是一个轻量级、易用且功能强大的表单验证插件。

它支持多种表单验证规则和自定义错误消息，可以通过简单的HTML属性进行配置。

Parsley.js可以与各种前端框架兼容，并且提供了丰富的扩展插件，如日期选择器、颜色选择器等。

通过使用Parsley.js，开发人员可以快速实现表单验证，提高开发效率。

2. Validate.jsValidate.js是一个独立的表单验证库，它可以与任何前端框架配合使用。

Jquery验证插件JqueryValidation动态验证用户名等

Jquery验证插件JqueryValidation动态验证⽤户名等//form1 验证⽤户名$("#form1").validate({focusCleanup: false,focusInvalid: false,errorElement: "span",errorClass: "sss",errorPlacement: function (error, element) {error.appendTo(element.next());},rules: {TextUserName: {required: true,isCharlength6_12: true,jszxolUserName: true,remote: {url: "../mobileApi.asmx/isExistsUserName",type: "post",dataType: "json",async: false,//如果这⾥⽂本框填写完后直接快速点击按钮验证是否⽤户存在的话，此处最好写同步进⾏.data: { user_name: function () { return $("#TextUserName").val(); } }}}}, //rulesmessages: {TextUserName: {required: "请输⼊⽤户名",isCharlength6_12: "⽤户名为6-12位字符",jszxolUserName: "以字母开头，长度在6-12之间",remote: "⽤户名已存在"}}//messages});//form2 验证⼿机号$("#form2").validate({focusCleanup: false,focusInvalid: false,errorElement: "span",errorClass: "sss",errorPlacement: function (error, element) {error.appendTo(element.next());},rules: {TextUserPhone: {required: true,isMobile: true,remote: {url: "../mobileApi.asmx/isExistsPhone",type: "post",dataType: "json",data: { mobile_number: function () { return $("#TextUserPhone").val(); } }}}}, //rulesmessages: {TextUserPhone: {required: "请输⼊⼿机号码",isMobile: "⼿机号码不符合规范", remote: "⼿机号码已存在"}}//messages});。

jQuery表单校验知识点总结

jQuery表单校验知识点总结表单是网页中常见的交互性组件，用于收集用户输入的信息。

在实际开发中，表单校验是非常重要的，能够有效地提高用户体验和数据的准确性。

jQuery是一个流行的JavaScript 库，它可以简化表单校验的编写过程，提供了丰富的插件和方法来实现表单校验功能。

本文将对jQuery表单校验的知识点进行总结。

一、基本概念1. 表单校验的作用表单校验是确保用户输入的数据符合规定格式的一种方法。

它可以有效地防止用户输入不合法的数据，保障数据的有效性和安全性。

2. jQuery表单校验的优势jQuery提供了丰富的插件和方法，使得表单校验的编写变得简单和高效。

它可以减少开发者的工作量，提高开发效率，同时也能够保障校验的逻辑和准确性。

3. 常见的表单校验规则常见的表单校验规则包括：必填项校验、长度限制、格式要求（如邮箱、电话、网址等）、数字范围限制、密码强度校验等。

开发者需要根据实际需求编写相应的校验规则。

二、jQuery表单校验方法1. 使用jQuery.validate插件jQuery.validate是一个流行的表单校验插件，它提供了丰富的方法和选项，可以方便地实现各种表单校验功能。

开发者可以通过引入该插件，然后结合相应的方法和规则，来实现表单校验功能。

2. 设置校验规则在使用jQuery.validate插件时，需要通过设置规则来指定各个表单项的校验方式。

常见的校验规则包括：required（必填项）、maxlength（最大长度）、minlenght（最小长度）、email（邮箱格式）、url（网址格式）、digits（数字格式）等。

3. 自定义校验方法在实际开发中，某些特殊的校验规则可能无法通过指定的方法来实现，这时可以通过自定义校验方法来实现。

开发者可以通过$.validator.addMethod()来添加自定义的校验方法，然后在规则中使用该方法进行校验。

4. 校验提示信息除了校验规则外，表单校验还需要提供相应的提示信息，以便用户知道输入的数据是否合法。

jQuery formValidator表单验证插件

jQuery formValidator表单验证插件是什么?jQuery formValidator表单验证插件，它是基于jQuery类库，实现了js脚本于页面html代码的分离。

你可以划分多个校验组，每个组的校验都是互不影响。

对一个表单对象，你只需要写一行代码就可以轻松实现无数种（理论上）脚本控制。

目前支持5种大的校验方式，分别是：inputValidator（针对input、textarea、select控件的字符长度、值范围、选择个数的控制）、compareValidator（提供2个对象的比较，目前可以比较字符串和数值型）、ajaxValidator（通过ajax到服务器上做数据校验）、regexValidator（提供可扩展的正则表达式库）、functionValidator （可使用外部函数来做校验）本插件于其他校验控件最大的区别有3点：1、校验功能可以扩展。

对中文、英文、数字、整数、实数、Email地址格式、基于HTTP协议的网址格式、电话号码格式、手机号码格式、货币格式、邮政编码、身份证号码、QQ号码、日期等等这些控制，别的表单校验控件是代码里写死的，而formValidator是通过外部js文件来扩展的，你可以通过写正则表达式和函数来无限的扩展这些功能。

2、实现了校验代码于html代码的完全分离。

你的所有信息都无需配置在校验表单元素上，你只要在js上配置你的信息。

使美工（界面）和javascript工程师的工作不交织在一起3、你只需写一行代码就能完成一个表单元素的所有校验。

你只需要写一行代码就能完成一下所有的控制∙支持所有类型客户端控件的校验∙支持jQuery所有的选择器语法，只要控件有唯一ID和type属性∙支持函数和正则表达式的扩展。

提供扩展库formValidatorReg.js，你可以自由的添加、修改里面的内容。

∙支持2种校验模式。

第一种：文字提示(showword模式)；第二种：弹出窗口提示(showalert模式)∙支持多个校验组。

实例详解jQuery表单验证插件validate

实例详解jQuery表单验证插件validatevalidate插件是⼀个基于jquery的表单验证插件了⾥⾯有许多的常⽤的⼀些验证⽅法我们可以直接调⽤，具体的我们⼀起来看看。

例⼦，html代码<!DOCTYPE html><html lang="en"><head><include file="Common/Header" /><meta charset="utf-8"><script src="/jquery.min.js"></script></head><body><form class="form-horizontal" id="form" onsubmit="return false;"><input type="text" name="password_old" class="form-control required" id="password_old" maxlength="20"><input type="password" name="pay_password" class="form-control required" id="pay_password"><input type="password" name="password_Repeat" class="form-control required" id="password_Repeat"><button type="submit" id="submit" class="btn btn-success btn-padding-lr-30 margin-right-15">确定</button></form></body><script src="jquery.validate.min.js"></script><script src="messages_cn.js"></script><script type="text/javascript">$(document).ready(function(){//提交$('#submit').click(function(){var pay_password = $('#pay_password').val();var password_Repeat = $('#password_Repeat').val();var password_old = $('#password_old').val();var data = {'pay_password':pay_password,'password_Repeat':password_Repeat,'password_old':password_old};(data);var v = $('#form').validate({rules : {pay_password : {required : true,minlength : 6,ismypassword : true},password_Repeat : {required : true,minlength : 6,ismypassword : true},password_old : {required : true,minlength : 6,}},messages : {pay_password : {required : "请输⼊密码",minlength : "字符长度不能⼩于6个字符",ismypassword : "密码必须由数字、英⽂字母和特殊字符(!,.@#$%^&*?_~)组成"},password_Repeat : {required : "请输⼊密码",minlength : "字符长度不能⼩于6个字符",ismypassword : "密码必须由数字、英⽂字母和特殊字符(!,.@#$%^&*?_~)组成"},password_old : {required : "请输⼊密码",minlength : "字符长度不能⼩于6个字符",},}});if(pay_password != password_Repeat){alert("密码不⼀致，请重新输⼊确认！");return false;}//---------------------------------if(!v.form())return false;$.ajax({url:'{:U("Merchant/ajax_pw")}',data: data,beforeSend:function(){},success:function(res){if(res == 1){alert("密码修改成功");}if(res == 0){alert("两次密码⼀样，未做修改");}if(res != 0 && res != 1){alert(res);}}});//------------------------});})</script></html>messages_cn.js⽂件如下jQuery.extend(jQuery.validator.messages, {required: "必选字段",remote: "请修正该字段",email: "请输⼊正确格式的电⼦邮件",url: "请输⼊合法的⽹址",date: "请输⼊合法的⽇期",dateISO: "请输⼊合法的⽇期 (ISO).",number: "请输⼊合法的数字",digits: "只能输⼊整数",creditcard: "请输⼊合法的信⽤卡号",equalTo: "请再次输⼊相同的值",accept: "请输⼊拥有合法后缀名的字符串",maxlength: jQuery.validator.format("请输⼊⼀个长度最多是 {0} 的字符串"), minlength: jQuery.validator.format("请输⼊⼀个长度最少是 {0} 的字符串"), rangelength: jQuery.validator.format("请输⼊⼀个长度介于 {0} 和 {1} 之间的字符串"), range: jQuery.validator.format("请输⼊⼀个介于 {0} 和 {1} 之间的值"),max: jQuery.validator.format("请输⼊⼀个最⼤为{0} 的值"),min: jQuery.validator.format("请输⼊⼀个最⼩为{0} 的值")});关于validator插件详解主要分⼏部分jquery.validate 基本⽤法jquery.validate API说明jquery.validate ⾃定义jquery.validate 常见类型的验证代码下载地址jquery.validate插件的⽂档地址jquery.validate插件的主页jquery.validate插件主页上提供的demo验证规则下⾯是默认校验规则，也可以⾃定义规则(1)required:true 必输字段(2)remote:"check.php" 使⽤ajax⽅法调⽤check.php验证输⼊值(3)email:true 必须输⼊正确格式的电⼦邮件(4)url:true 必须输⼊正确格式的⽹址(5)date:true 必须输⼊正确格式的⽇期(6)dateISO:true 必须输⼊正确格式的⽇期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性(7)number:true 必须输⼊合法的数字(负数，⼩数)(8)digits:true 必须输⼊整数(9)creditcard: 必须输⼊合法的信⽤卡号(10)equalTo:"#field" 输⼊值必须和#field相同(11)accept: 输⼊拥有合法后缀名的字符串（上传⽂件的后缀）(12)maxlength:5 输⼊长度最多是5的字符串(汉字算⼀个字符)(13)minlength:10 输⼊长度最⼩是10的字符串(汉字算⼀个字符)(14)rangelength:[5,10] 输⼊长度必须介于 5 和 10 之间的字符串")(汉字算⼀个字符)(15)range:[5,10] 输⼊值必须介于 5 和 10 之间(16)max:5 输⼊值不能⼤于5(17)min:10 输⼊值不能⼩于10验证提⽰下⾯是默认的验证提⽰，官⽹有简体中⽂版的验证提⽰下载，或者通过jQuery.extend(jQuery.validator.messages⾃定义错误提⽰信息，可以将⽹站的验证提⽰⽂本统⼀到⼀个⽂件⾥。

js中validate的使用方法

js中validate的使用方法
一、什么是Validate？
Validate是一种前端表单验证技术，它是用来检查用户输入的
格式是否正确的一种技术，它经常用来检查用户输入的是否符合要求，以及输入的内容是否有效。

二、Validate的使用
Validate通常通过JavaScript，jQuery，HTML5，CSS3或服务
器端语言来实现。

1、JavaScript：Validate可以通过JavaScript的onblur，onchange，onfocus等事件来实现，它在用户操作输入框时，会自动检查输入的内容是否正确，并及时反馈给用户以实现表单的验证功能。

2、jQuery：Validate可以通过jQuery的插件来实现。

它支持
通过JavaScript和HTML手动指定校验规则，或者使用从服务器端获取到的校验规则。

3、HTML5：HTML5提供的新特性可以支持Validate，它可以通过input元素的新特性，如type，required，pattern等来实现Validate，可以简化用户输入的正确性检查操作，提高用户体验。

4、CSS3：CSS3也可以支持Validate，它可以通过设置input元素的占位符，placeholder，使用focus/blur属性来在输入框输入时实现检查操作。

5、服务器端语言：Validate还可以通过服务器端语言来实现，可以在服务器上检查用户输入的内容是否有效，从而避免用户非法输
入导致的损害。

以上就是Validate的使用方法，Validate可以有效的提高用户体验，减少非法输入的情况，同时还可以提高表单的保密性。

jquery.validate表单验证框架详细讲解

jQuery验证框架Html代码<script type="text/javascript" src="js/jquery-min.js"></script><script type="text/javascript" src="js/jquery.validate.pack.js"></script><script type="text/javascript">$<document>.ready<function<> {$<"#textForm">.validate<>;}>;</script><form class="cmxform" id="commentForm" method="get" action="">Name<input id="cname" name="name" size="25" class="required" minlength="2" /><input class="submit" type="submit" value="Submit" /></form>此文谨以以上js片段开始介绍jQuery Validation。

验证从这个方法开始：validate< [options] >〔一、可选项< options >[1] debug类型：Boolean 默认：false说明：开启调试模式。

jQuery常用插件

第十一章：jQuery常用插件（一）jQuery插件概述：插件（Plugin）也被称为扩展，是一种遵循一定规范的应用程序接口编写出来的程序。

jQuery有大量现成的插件，他们遵循了jQuery官方所规定的编写规范，通过各种功能的插件我们可以简单轻松的完成许多复杂的功能！PS:一句话，jQuery插件就是别人依照jQuery官方规范写好的各种功能，我们可以拿过来直接用，而不需要再去慢慢写！表单验证插件一、jQuery Validation概述1、介绍Validation是一个十分优秀的表单验证插件，它历史悠久，全球使用率超高，好评不断，下面我们一起简单的了解一下它的诸多优点：丰富的内置验证规则：经常用到的验证比如必填，是否是数字，电子邮件格式，url 等这一类验证都已内置，使用简单方便！可自定义验证规则：对于一些不是很常用的验证如果插件没有内置，大家可以自己定义，也很方便！验证的用户提示可定制型相当强：对于验证不通过时的用户提示，可以方便的修改以及修改错误提示信息的显示位置！网址：/2、主要方法这个插件有3个主要方法1、validate()用于验证表单，也是该插件最核心的方法2、valid()验证表单是否通过验证3、rules()为一个表单控件，查看、新增、移除规则3、增加了一些选择器:blank选择所有没有值或者值为空白的表单控件:filled选择所有填写了非空值的表单控件:unchecked与jQuery提供的:checked选择器相反4、使用初探<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script> <script type="text/javascript"src="js/jqueryvalidation/jquery.validate.min.js"></script>jQuery表单对象.validate();二、validate()方法1、常用配置选项1）rules$('#form1').validate({rules:{控件一:{验证规则一,验证规则二,验证规则三,....},控件二:{验证规则一},控件三:{验证规则一,验证规则二,...},.....}});2）messages提示：修改默认的提示信息最简单的办法引入messages_zh.js文件即可！如果需要在validate()方法内修改提示则可以使用本选项说明：自定义的提示信息，key:value 的形式，key 是要验证的元素，value 可以是字符串或函数使用：messages: {username: "请注意你的用户名",//此方法在username控件上的所有验证规则提示都是设置的这个字符串email: {required: "必须填写这个字段",email: "请填写真确的邮件格式"}}3）submitHandler类型: Function(form)说明：通过验证后运行的函数，默认添加该函数则不会再提交除非手动提交或者使用return true;函数参数：该函数接受一个参数表示当前表单 DOM对象4）invalidHandler类型: Function(event,validator)说明：当一个无效的表单（即验证不通过的时候）被提交的时候触发这个函数函数参数：当前验证的表单validator对象5）errorClass (默认值: error)说明：指定错误提示与验证不通过的控件的 css 类名6）validClass (默认值: "valid")类型: String说明：在验证成功的控件上加上传入的css类7）errorElement (默认值: "label")类型: String说明：用什么标签标记错误8）errorPlacement (默认值: 在无效的元素之后)类型: Function(error, element)说明：自定义错误信息放到哪里9）errorContainer类型：选择器字符串说明：有错误信息出现时把选择器匹配的元素变为显示，无错误时隐藏 10）errorLabelContainer类型：选择器字符串说明：把错误信息统一放在一个容器里面11）wrapper类型：String说明：用什么标签再把上边的 errorELement 包起来12）success类型：String or Function(label,element)说明：每个字段验证通过执行函数函数参数：label：信息提示标签的jQuery对象。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

此文在jquery的验证插件（下文以jquery代替）和validform验证插件之间作如下对比：1、样式2、普通验证：3、自定义验证：4、Ajax验证：一、样式1、Jquery（可自定义提示信息样式，下图摘自官方文档）：2、Validform（提供七种内置方案并支持自定义，以下为七种内置的较常用的三种）：二、普通验证1、Jquery：Jquery支持两种方式验证：1、直接将规则绑定到元素上。

2、将规则写在初始化js 中1、直接将规则绑定到元素上。

<form class="cmxform" id="form2" method="get" action=""><fieldset><legend>验证一个完整的表单</legend><p><label for="email">Email</label><input id="email" name="email" required type="email"></p><p><label for="agree">喜欢的颜色</label><select id="color" name="color" title="请选择您喜欢的颜色！" required><option></option><option>红色</option><option>蓝色</option><option>黄色</option></select></p><p><label for="phone">电话</label><input id="phone" name="phone" required type="number" rangelength="[2,8]"> </p><p><label for="address">地址</label><input id="address" name="address" required minlength="3"></p><p><label for="avatar">头像</label><input type="file" id="avatar" name="avatar" required></p><p><label for="agree">请同意我们的条款</label><input type="checkbox" class="checkbox" id="agree" title="请同意我们的条款！" name="agree" required></p><p><input class="submit" type="submit" value="提交"/><input class="cancel" type="submit" value="取消"/></p></fieldset></form>2、将规则下载初始化js中$().ready(function() {$("#signupForm").validate({rules: {firstname: "required",email: {required: true,email: true},password: {required: true,minlength: 5},confirm_password: {required: true,minlength: 5,equalTo: "#password"}},messages: {firstname: "请输入姓名",email: {required: "请输入Email地址",email: "请输入正确的email地址"},password: {required: "请输入密码",minlength: jQuery.format("密码不能小于{0}个字符")},confirm_password: {required: "请输入确认密码",minlength: "确认密码不能小于5个字符",equalTo: "两次输入密码不一致不一致"}}});});2、Validform：Validform也支持两种：1、直接将规则绑定到元素上。

2、将规则写在初始化js中1、直接将规则绑定到元素上<input type="password" value="" name="userpassword" datatype="*6-15" errormsg="密码范围在6~15位之间！" /><input type="password" value="" name="userpassword2" datatype="*" recheck="userpassword" errormsg="您两次输入的账号密码不一致！" /><textarea tip="请在这里输入您的意见。

" errormsg="很感谢您花费宝贵时间给我们提供反馈，请填写有效内容！" datatype="s" altercss="gray" class="gray" name="msg" value="">请在这里输入您的意见。

</textarea><input type="text" plugin="swfupload" class="inputxt" disabled="disabled" value=""><input type="hidden" value="" pluginhidden="swfupload"><input type="password" errormsg="密码至少6个字符,最多18个字符！" datatype="*6-18" plugin="passwordStrength" class="inputxt" name="password" value=""><div class="passwordStrength" style="display:none;"><b>密码强度：</b> <span>弱</span><span>中</span><span class="last">强</span></div><input type="text" plugin="datepicker" class="inputxt" name="birthday" value="">2、将规则写在初始化js中demo.addRule([{ele:"#name",datatype:"s6-18",ajaxurl:"valid.php",nullmsg:"请输入昵称！",errormsg:"昵称至少6个字符,最多18个字符！"},{ele:"#userpassword",datatype:"*6-16",nullmsg:"请设置密码！",errormsg:"密码范围在6~16位之间！"},{ele:"#userpassword2",datatype:"*",recheck:"userpassword",nullmsg:"请再输入一次密码！",errormsg:"您两次输入的账号密码不一致！"}]);三、自定义验证1、Jquery：addMethod(name,method,message)方法参数name 是添加的方法的名字。