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动态验证用户名等

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表单校验知识点总结表单是网页中常见的交互性组件,用于收集用户输入的信息。

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

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 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表单验证插件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的使用方法

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.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常用插件(一)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对象。

jQuery验证插件validate使用方法详解

jQuery验证插件validate使用方法详解

jQuery验证插件validate使⽤⽅法详解1. 写在前⾯ 我们知道,⽤户在注册的时候,会有个表单页⾯,然后有些选项是必填的,有些要填的内容是有规范的,这些都要在⽤户提交之前进⾏验证才⾏,如果不符合要求,需要在右边显⽰⼀个友好的提⽰,让⽤户修改。

记得以前在学习Servlet的时候,实现⼀个简单的⽤户注册功能的验证是在后台做的,有些⽤了正则表达式,有些没⽤,但是都⽐较简单。

流程是这样的,前台提交表单数据后,servlet获取数据先进⾏验证,如果不符合要求,将提⽰信息放到⼀个List中,然后再把List存到session中,跳转到⼀个新的页⾯做回显,把错误信息也显⽰出来,但是⽐较繁琐。

前⾯做⽹上商城项⽬的时候,⽤EasyUI做后台商品添加时,也做了验证的功能,EasyUI⾃带了验证的功能,还是很强⼤的,效果也不错。

感兴趣的话不妨来看⼀下。

但是前台⽤户注册的页⾯我们该如何做呢?这就是本⽂所要介绍的主要内容了,我们可以使⽤jQuery的Validate插件来做注册的验证功能,jQuery我也没有系统的学习,只是⽤到什么学什么,⽤到什么了解什么,所以如有错误之处,欢迎留⾔指正~下⾯我⼀步步通过代码详细介绍⼀下jQuery-Validate验证插件的使⽤步骤。

2. 效果展⽰ ⾸先来看⼀下最后实现的效果,先有个直观的感受,个⼈感觉还算可以的~能接受。

从图中可以看出,包括输⼊前的提⽰,输⼊正确和错误的提⽰的功能,都已经完成。

再看⼀下我的⼯程: 总共有6个jsp⽂件,之所以写成6个是为了⼀步步解说做这个效果的步骤,最后terminal.jsp是最终版的。

运⾏的时候也只需要运⾏这个terminal.jsp即可。

下⾯我详细分析⼀下使⽤jQurey-Validate验证插件的过程。

3. Validate环境的搭建 环境搭建,肯定少不了jar包,我使⽤的是jQuery-validate-1.15,官⽅上给出了依赖的⼏个版本的jQuery,我下了jQuery-1.11.1。

jquery.validate+jquery.form提交的三种方式

jquery.validate+jquery.form提交的三种方式

jquery.validate+jquery.form提交的三种⽅式概述:本篇主要讨论jquery.validate结合jquery.form实现对表单的验证和提交⽅案。

⽅式⼀:是通过jquery.validate的submitHandler选项,即当表单通过验证时执⾏回调函数。

在这个回调函数中通过jquery.form来提交表单;⽅式⼆:是通过jquery.form的beforeSubmit,即在提交表单前执⾏的回调函数,这个函数如果返回true,则提交表单,如果返回false,则终⽌提交表单。

根据jquery.validate插件的valid()⽅法,就可以通过jquery.form提交表单时来对表单进⾏验证。

⽅式三:是通过jquery.validate验证表单的validate⽅法。

这个⽅法的好处是对表单验证的控制更加⾃由实例:下⾯通过三个实例分别阐述上⾯的三种⽅式载⼊CSS样式⽂件<link rel="stylesheet" type="text/css" media="screen" href="style.css"/>CSS样式⽂件内容input{height:25px;line-height:25px;padding-left:4px;}span.checked{padding: 0px 5px 0px 25px;margin-left: 10px;margin-top: 0px;margin-bottom: 3px;height: 25px;line-height:25px;font-size: 12px;white-space: nowrap;text-align: left;color: #E6594E;background: url("images/acion2.png") no-repeat 3px; /* #FCEAE8 */}span.unchecked{padding: 0px 5px 0px 25px;margin-left: 10px;margin-top: 0px;margin-bottom: 3px;height: 23px;line-height:23px;font-size: 12px;border: 1px solid #E6594E;white-space: nowrap;text-align: left;color: #E6594E;background: #FCEAE8 url("images/acion.png") no-repeat 3px;}载⼊javascript⽂件<script language="JavaScript" type="text/JavaScript" src="js/jQuery1.6.2.js"></script><script language="JavaScript" type="text/JavaScript" src="js/jquery.form.js"></script><script language="JavaScript" type="text/JavaScript" src="js/jquery.validate.js"></script><script language="JavaScript" type="text/JavaScript" src="js/localization/messages_tw.js"></script>HTML内容<body><span id="result"></span><form id='commentForm'><fieldset><legend>jquery.validate+jquery.form提交的三种⽅式</legend><p><label for='cusername'>姓名</label><em>*</em><input id='cusername' name='username' size='25' /></p><p><label for='cemail'>电⼦邮件</label><em>*</em><input id='cemail' name='email' size='25' /></p><p><input class='submit' type='submit' value='提交'></p></fieldset></form></body>jquery.validate+jquery.form提交⽅式1的javascript内容<script language="javascript">function showResponse(responseText,statusText) {if(statusText=='success'){$("#result").html(responseText);}}$(document).ready(function(){$('#commentForm').validate({focusCleanup:true,focusInvalid:false,errorClass: "unchecked",validClass: "checked",errorElement: "span",submitHandler:function(form){$(form).ajaxSubmit({type:"post",url:"test_save.php?time="+ (new Date()).getTime(),//beforeSubmit: showRequest,success: showResponse});},errorPlacement:function(error,element){var s=element.parent().find("span[htmlFor='" + element.attr("id") + "']");if(s!=null){s.remove();}error.appendTo(element.parent());},success: function(label) {//label.addClass("valid").text("Ok!")label.removeClass("unchecked").addClass("checked");},rules:{username:{required:true,minlength:3},email:{required:true}}});});</script>jquery.validate+jquery.form提交⽅式2的javascript内容<script language="javascript">function showResponse(responseText,statusText) {if(statusText=='success'){$("#result").html(responseText);}}function showRequest(formData,jqForm,options){return $("#commentForm").valid();}$(document).ready(function(){$('#commentForm').submit(function(){$(this).ajaxSubmit({type:"post",url:"test_save.php?time="+ (new Date()).getTime(),beforeSubmit:showRequest,success:showResponse});return false; //此处必须返回false,阻⽌常规的form提交});$('#commentForm').validate({focusCleanup:true,focusInvalid:false,errorClass: "unchecked",validClass: "checked",errorElement: "span",errorPlacement:function(error,element){var s=element.parent().find("span[htmlFor='" + element.attr("id") + "']");if(s!=null){s.remove();}error.appendTo(element.parent());},success: function(label) {//label.addClass("valid").text("Ok!")label.removeClass("unchecked").addClass("checked");},rules:{username:{required:true,minlength:3},email:{required:true}}});});</script>jquery.validate+jquery.form提交⽅式3的javascript内容<script language="javascript">var options={focusCleanup:true,focusInvalid:false,errorClass: "unchecked",validClass: "checked",errorElement: "span",errorPlacement:function(error,element){var s=element.parent().find("span[htmlFor='" + element.attr("id") + "']");if(s!=null){s.remove();}error.appendTo(element.parent());},success: function(label) {//label.addClass("valid").text("Ok!")label.removeClass("unchecked").addClass("checked");},rules:{username:{required:true,minlength:3},email:{required:true}}};function showResponse(responseText,statusText) {if(statusText=='success'){$("#result").html(responseText);}}function showRequest(formData,jqForm,options){return $("#commentForm").valid();}$(document).ready(function(){validator=$('#commentForm').validate(options);$("#reset").click(function(){validator.resetForm();});$("button").click(function(){validator.form();});$('#commentForm').submit(function(){$(this).ajaxSubmit({type:"post",url:"test_save.php?time="+ (new Date()).getTime(),beforeSubmit:showRequest,success:showResponse});return false; //此处必须返回false,阻⽌常规的form提交});});</script>DEMO源码:⼀些问题1、其实这个问题在昨天晚上写这篇⽂章的时候就有发现,即我在HTML⽂件头使⽤<!DOCTYPE html>时,输⼊框及错误信息的样式似乎有些问题。

jQuery常用插件

jQuery常用插件

表单验证插件
一、表单验证Validation jQuery Validation是一个很好的表单校验插件。可 以到下边这个网址下载: http://bassistance.de/jquery-plugins/jqueryplugin-validation/ 下面我们用如下三个例子来说明如何使用该插件:
一、jQuery UI
jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、 特效和可更换主题的可视控件。
jQuery UI插件
二、jQuery UI插件使用 jQuery UI中包含好多优秀的插件,我们引入后即 可以使用了。 下面是一些UI使用的实例,包括:对话框效果、 放大镜效果、日历、手风琴效果、鼠标拖拽、选菜单Accordion Menu Accordion Menu是一个可折叠菜单插件。可以到 下边这个网址下载: /dynamicindex17/d daccordionmenu.htm 这个插件使用比较简单。 1、引入jquery类库和手风琴插件(包含js和css以及 一些图片资源)。 2、实例化插件,设置插件的属性信息。
弹出窗插件
一、弹出窗Colorbox Colorbox弹出窗插件。可以到下边这个网址下载: /colorbox/ 1、引入jquery类库和弹出窗插件(包含js和css以及 一些图片资源)。 2、实例化插件,设置插件的属性信息。
jQuery UI插件
表单验证插件
一、表单验证Validation
添加自定义验证规则
1)增加IP地址验证规则。
$.validator.addMethod("ip", function(value, element) { return this.optional(element) || (/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/.test(value) && (RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256));}, "Please enter a valid ip address."); 调用validator的addMethod方法,这里用到“正则表达式”进行校验。

jquery常用插件

jquery常用插件

jquery常用插件表单验证插件——validate该插件自带包含必填、数字、URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下:$(form).validate({options})其中form参数表示表单元素名称,options参数表示调用方法时的配置对象,所有的验证规则和异常信息显示的位置都在该对象中进行设置。

例如,当点击表单中的“提交”按钮时,调用validate插件验证用户名输入是否符合规则,并将异常信息显示在页面中,如下图所示:在浏览器中显示的效果:从图中可以看出,在页面中导入了validate插件,当用户在输入框中录入用户名时,自动根据规则进入验证,并显示提示信息,验证成功后,表单才能提交。

表单插件——form通过表单form ajax方式向服务器提交表单数据,并通过方法中的options对象获取服务器返回数据,调用格式如下:$(form). ajaxForm ({options})其中form参数表示表单元素名称;options是一个配置对象,用于在发送ajax请求过程,设置发送时的数据和参数。

例如,在页面中点击“提交”按钮,调用form插件的示:在浏览器中显示的效果:从图中可以看出,当点击“提交”按钮时,调用form表单插件中的ajaxForm()方法向指定的服务器以aj ax方式发送数据,服务器接收后返回并将数据显示。

图片灯箱插件——lightBox该插件可以用圆角的方式展示选择中的图片,使用按钮查看上下张图片,在加载图片时自带进度条,还能以自动播放的方式浏览图片,调用格式如下:$(linkimage).lightBox({options})其中linkimage参数为包含图片的<a>元素名称,options为插件方法的配置对象。

例如,以列表的方式在页面中展示全部的图片,当用户单击其中某张图片时,通过引入的图片插件,采用“灯箱”的方式显示所选的图片,如下图所示:在浏览器中显示的效果:图片放大镜插件——jqzoom在调用jqzoom图片放大镜插件时,需要准备一大一小两张一样的图片,在页面中显示小图片,当鼠标在小图片中移动时,调用该插件的果,调用格式如下:$(linkimage).jqzoom({options})其中linkimage参数为包含图片的<a>元素名称,options为插件方法的配置对象。

jquery中validator的用法

jquery中validator的用法

jquery中validator的用法1.引言1.1 概述概述部分的内容可以包括以下内容:jQuery中的Validator是一个强大的表单验证插件,它可以帮助开发者对用户输入的表单数据进行有效的验证和过滤。

通过使用Validator,开发者可以轻松地验证用户输入的数据是否符合预期的格式和规则,从而提高应用程序的可靠性和安全性。

Validator的核心理念是基于规则和验证器,开发者可以定义各种验证规则,并将其应用到表单字段上。

当用户提交表单时,Validator会自动触发验证规则,并根据规则中定义的条件和要求对用户输入的数据进行验证。

如果输入数据符合规则要求,Validator将返回验证通过的结果,否则将返回相应的错误信息。

除了基本的验证功能,Validator还提供了丰富的扩展功能,如自定义错误消息、条件验证、异步验证等。

开发者可以根据实际需求进行配置和定制,使其更适应各种复杂的业务场景。

在使用Validator时,开发者只需简单地引入相应的脚本文件,并通过一些简单的代码片段即可实现表单的验证功能。

Validator提供了一系列方便的API和方法,可以帮助开发者更加灵活地控制和管理验证过程。

总之,通过使用jQuery中的Validator,开发者可以轻松地实现表单验证,并有效地提高应用程序的可靠性和用户体验。

在接下来的文章中,我们将详细介绍Validator的常用方法和用法,以及其优势和局限性。

文章结构部分应该介绍本文的整体结构和各个部分的内容概要。

可以按照以下方式编写1.2 文章结构的内容:1.2 文章结构本文分为引言、正文和结论三个部分。

引言部分主要介绍了本文的概述、文章结构和目的。

在概述中,简要介绍了将要讨论的主题——jquery中Validator的用法。

接下来,讲解了本文的文章结构,包括引言、正文和结论三个部分。

最后,明确了本文的目的,即介绍jquery中Validator的基本概念、常用方法和用法,以及讨论其优势和局限性。

网站开发常用jQuery插件总结(四)验证插件validation

网站开发常用jQuery插件总结(四)验证插件validation

网站开发常用jQuery插件总结(四)验证插件validation在网站开发过程中,有时我们需要验证用户输入的信息是否符合我们的要求,所以我们会对用户提交的数据进行验证。

验证分两次进行,一次是在客户端,一次是在服务端。

客户端的验证可以提升用户的体验。

jquery验证插件有很多,实现的功能也基本相同。

本文介绍的只是jquery验证插件中的一种jquery.validate1.jquery.validate插件功能简单实现客户端信息验证,过滤不符合要求的信息2.jquery.validate官方地址官方地址:/,有详细的插件使用说明官方demo:http://jquery.bassistance.de/validate/demo/3.jquery.validate使用方法1.引用js<script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="jquery.validate.js"></script>2.css样式,可自定义,简单的只需要添加error样式,也可使用官方demo中的样式。

.error{color:red;margin-left:8px;}3.js代码$(document).ready(function() {// validate signup form on keyup and submitvar validator = $("#signupform").validate({rules: {firstname: "required",username: {required: true,minlength: 2},password: {required: true,minlength: 5},password_confirm: {required: true,minlength: 5,equalTo: "#password"},email: {required: true,email: true,},dateformat: "required",terms: "required"},messages: {firstname: "姓名不能为空",username: {required: "用户名不能为空",minlength: jQuery.format("用户名只少由{0} 字符组成") },password: {required: "密码不能为空",minlength: jQuery.format("密码只少由{0} 字符组成") },password_confirm: {required: "确认密码不能为空",minlength: jQuery.format("确认密码只少由{0} 字符组成"),equalTo: "秘密与确认密码不一致"},email: {required: "邮箱不能为空",email: "邮箱格式不正确"},dateformat: "请选择性别",terms: " "},// the errorPlacement has to take the table layout into account errorPlacement: function(error, element) {if ( element.is(":radio") )error.appendTo( element.parent().next().next());else if ( element.is(":checkbox") )error.appendTo ( element.next());elseerror.appendTo( element.parent().next());},// specifying a submitHandler prevents the default submit, good for the demosubmitHandler: function() {alert("submitted!");},// set this class to error-labels to indicate valid fieldssuccess: function(label) {// set &nbsp; as text for IElabel.html("&nbsp;").addClass("checked");},highlight: function(element, errorClass) {$(element).parent().next().find("." + errorClass).removeClass("checked");}});});以上的代码只使用了插件提供的属性和方法。

jQueryformValidator3.3表单验证文档说明

jQueryformValidator3.3表单验证文档说明

jQueryformValidator3.3表单验证文档说明jQuery formValidator3.3表单验证文档说明一、前言jQuery formValidator表单验证插件,它是基于jQuery类库,实现了js脚本于页面html代码的分离。

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

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

二、验证方式1、inputValidator(针对input、textarea、select控件的字符长度、值范围、选择个数的控制);2、compareValidator(提供2个对象的比较,目前可以比较字符串和数值型;3、ajaxValidator(通过ajax到服务器上做数据校验);4、regexValidator(提供可扩展的正则表达式库);5、functionValidator(可使用外部函数来做校验);三、如何引用到页面1、加载jQuery类库;2、加载插件的样式库//前面两步不分先后,如果你是自动构建提示层,请加载validatorAuto.css;3、加载验证插件//这步引用必须在jQuery-1.4.2.js之后;4、加载扩展库//建议将所有有关正则验证方面的格式,其它扩展的验证函数统一写到该文件中;四、具体实战界面效果:五、属性参照initConfig:参数详解主要是设置全局参数和判断是否通过校验函数名函数说明$.formValid ator.initCon fig 参数:配置类型属性默认值说明validatorgroup"1" 你要针对哪个组进行配置formid "" 要自动注册pageIsValid函数的表单ID号alertmessagefalse 是否弹出窗口autotip false 是否自动构建提示层errorfocustrue发生错误的时候,第一个出错控件是否获得焦点forcevalid true 是否一直输入正确为止才允许离开焦点wideword true 是否把一个全角字符当做2个长度onsuccess null 该组校验通过后的回调函数,返回false,阻止表单的提交submitoncefalse 校验通过后,是否灰掉所有的提交按钮onerror null该组校验失败后的回调函数,有两个参数参数1一个校验没有通过的错误信息参数2 一个校验没有通过的元素对象debug false 是否处于调试模式。

jQuery表单验证插件FormValidation实现个性化错误提示

jQuery表单验证插件FormValidation实现个性化错误提示
jQuery表单验证插件formValidation实现个性化错误提示
上期在[jQuery插件Validate验证表单实现javascript表单验证功能]和[jQuery插件Validation验证表单实现javascript表单智能验证功能]中分别介绍了两个实现表单验证的jQuery插件,这里介绍另外一个表单验证插件formValidation,这个插件与前面两个插件的最大区别在于它实现了个性化的错误提示信息,显示在表单元素右上角类似于提示条
<option value="4">biuuu_4</option>
</select>
四,验证电话号码
<input class="validate[required,custom[telephone]] text-input" type="text" name="telephone"/>
<script src="jquery.validationEngine.js" type="text/javascript"></script>
<link rel="stylesheet" href="validationEngine.jquery.css" type="text/css" media="screen" />
<input class="validate[required] radio" type="radio" name="radiogoupe" value="9"/>

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

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/jquery.validate.js"></script><script type="text/javascript" src="js/jquery.metadata.js"></script><script type="text/javascript" src="js/messages_zh.js"></script>第⼆步:定义表单的错误输出:复制代码代码如下:<style type="text/css">#frm label.error {color: Red;}</style>第三步:添加错误处理⽅法;jquery验证,需要有:1:定义验证⽅法2:添加验证规则下⾯贴出常⽤的验证⼩例⼦,⼀看就明⽩了。

先看效果图:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><script type="text/javascript" src="js/jquery-1.6.1.min.js"></script><script type="text/javascript" src="js/jquery.validate.js"></script><script type="text/javascript" src="js/jquery.metadata.js"></script><script type="text/javascript" src="js/messages_zh.js"></script><style type="text/css">#frm label.error {color: Red;}</style></head><script type="text/javascript">$(document).ready(function(){$("#clickme").click(function(){alert("Hello World");});$( "#frm" ).validate({rules: {username: {required: true,minlength: 4,maxlength: 20,byteMaxLength:20,valiEnglish:true},postcode: {postcodeVal:true},number: {byteMaxLength:5,numFormat:5},identifier: {sfzhValidate:true}},messages: {username: {required: "请输⼊⽤户名4--20个英⽂字符",minlength: $.format("Keep typing, at least {0} characters required!"), maxlength: $.format("Whoa! Maximum {0} characters allowed!")},number: {numFormat: $.format("请输⼊{0}数字")}}});jQuery.validator.addMethod("byteMaxLength", function(value,element, param) {var length = value.length;for ( var i = 0; i < value.length; i++) {if (value.charCodeAt(i) > 127) {length++;}}return this.optional(element) || (length <= param);}, $.validator.format("不能超过{0}个字节(⼀个中⽂字算2个字节)"));jQuery.validator.addMethod("numFormat",function(value,element,param){return this.optional(element) || /^\d*$/.test(value);}//,$.validator.format("请输⼊数字{0}位以内"));//number(9,3)jQuery.validator.addMethod("numFormat63",function(value,element){return this.optional(element) || /^[0-9]{1,6}(\.\d{1,3})$/.test(value);},$.validator.format("请输⼊合法数字,精度格式123456.0"));jQuery.validator.addMethod("postcodeVal",function(value,element){return this.optional(element) || /^[0-9]\d{5}(?!\d)$/.test(value);},$.validator.format("请输⼊合法的邮编"));jQuery.validator.addMethod("numberAndLettersVal",function(value,element){ return this.optional(element) || /^[a-zA-Z0-9]+$/.test(value);},$.validator.format("请输⼊字母或数字"));jQuery.validator.addMethod("sfzhValidate",function(value,element){return this.optional(element) || /^(\d{14}|\d{17})(\d|[xX])$/.test(value);},$.validator.format("请输⼊合法⾝份证号"));jQuery.validator.addMethod("valiEnglish",function(value,element){return this.optional(element) || /^[a-zA-Z ]*$/.test(value);},$.validator.format("请输⼊字母或者空格"));});</script><body><form id="frm" name="frm" method="post" action=""><label>⽤户名:<input type="text" name="username" id="username" /></label><p><label>邮编 :<label></label></label><label><input type="text" name="postcode" id="postcode" /><br /></label></p><p><label>数字 :<input type="text" name="number" id="number" /></label><br /><label>⾝份证号:<input type="text" name="identifier" id="identifier" /></label>&nbsp;<label><input type="button" name="clickme" id="clickme" value="click me" /></label></p></form></body></html>这是⼀个完整的验证⽰例,关于引⼊的代码已经上传,可以下⾯讲解其中的重点⽅法:jQuery.validator.addMethod("byteMaxLength", function(value,element, param) {var length = value.length;for ( var i = 0; i < value.length; i++) {if (value.charCodeAt(i) > 127) {length++;}}return this.optional(element) || (length <= param);}, $.validator.format("不能超过{0}个字节(⼀个中⽂字算2个字节)"));jQuery.validator.addMethod() ⽅法,有三个参数,第⼀个参数: “byteMaxLength” 是定义⽅法名,必须保证⽅法名唯⼀,是⼀个identifier标志。

详解jqueryvalidate实现表单验证(正则表达式)

详解jqueryvalidate实现表单验证(正则表达式)

详解jqueryvalidate实现表单验证(正则表达式)⼀、⽬的为了更好地实现⼈机交互,使⽤jQuery封装库中的validate插件,在⽤户填写表单时,可以快速地对⽤户填写的数据进⾏验证,并做出反馈。

⼆、validate插件简介validate()是插件的核⼼⽅法,定义了基本的校验规则和⼀些有⽤的配置项。

rule:设置表单的验证规则;messages:设置表单不符合验证规则的提⽰信息;debug:如果这个参数为true,那么表单还会提交,只进⾏检查,调试时⼗分⽅便。

required:必填minlength:最⼩长度maxlength:最⼤长度rangelength:长度范围,以数组呈现[2,10],表⽰表单输⼊长度为2到10位remote:可以通过发现GET或者POST请求进⾏远程验证,与Ajax的验证进⾏⽐较。

就是通过ajax实现的{url:type:默认为GET请求data:发送的数据}发送GET请求例⼦:check:{required:true,remote:{url:"__CONTROLLER__/check?check="+$("#icode").val//__CONTROLLER__表⽰当前控制器}}基本的校验规则序号规则描述1required:true必须输⼊的字段。

2remote:"check.php"使⽤ ajax ⽅法调⽤ check.php 验证输⼊值。

3email:true必须输⼊正确格式的电⼦邮件。

4url:true必须输⼊正确格式的⽹址。

5date:true必须输⼊正确格式的⽇期。

⽇期校验 ie6 出错,慎⽤。

6dateISO:true必须输⼊正确格式的⽇期(ISO),例如:2009-06-23,1998/01/22。

只验证格式,不验证有效性。

7number:true必须输⼊合法的数字(负数,⼩数)。

8digits:true必须输⼊整数。

validated和valid实现原理

validated和valid实现原理

Validated和Valid实现原理详解在软件开发中,数据验证是非常重要的一环。

它用于确保输入数据的合法性和有效性,以防止错误和安全漏洞。

在这个过程中,我们经常听到两个相关的术语:validated和valid。

本文将详细解释这两个术语的基本原理,并探讨它们在软件开发中的应用。

1. 什么是数据验证?数据验证是对输入数据进行检查和评估的过程,以确定其是否满足特定的规则、要求或约定。

这些规则可以是预定义的,也可以是自定义的。

通过对输入数据进行验证,我们可以确保其合法性、完整性、准确性和一致性。

在开发过程中,我们经常需要验证各种类型的数据,包括但不限于以下几种:•用户输入:例如表单字段、密码等。

•文件上传:例如图片、文档等。

•API请求和响应:例如JSON对象。

2. 数据验证的目标数据验证有以下几个主要目标:2.1 防止错误通过对输入数据进行验证,我们可以捕获并阻止可能导致错误或异常情况发生的无效数据。

例如,在一个表单中,如果用户未填写必填字段,则该字段将被认为是无效的,并提示用户进行填写。

2.2 提高数据质量通过对输入数据进行验证,我们可以确保其质量和一致性。

这有助于避免在后续处理过程中出现问题,并提高系统的可靠性和稳定性。

2.3 防止安全漏洞数据验证还可以用于防止安全漏洞的出现。

例如,在用户登录过程中,对密码进行验证可以防止未经授权的访问。

3. validated 和 valid 的基本原理在软件开发中,validated和valid是两个常用的术语。

它们表示数据是否通过了验证过程。

下面我们将详细解释这两个术语的基本原理。

3.1 validatedvalidated是一个动词,表示对数据进行验证的过程。

它通常由一个验证器(validator)或一组验证规则(validation rules)执行。

验证器接受输入数据作为参数,并根据预定义的规则对其进行检查。

在执行验证过程时,验证器可能会执行以下操作:•检查必填字段是否已填写。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 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><!--使用swfupload插件--><input type="text" plugin="swfupload" class="inputxt" disabled="disabled" value=""><input type="hidden" value="" pluginhidden="swfupload"><!--使用passwordStrength插件--><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><!--使用DatePicker插件--><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 是添加的方法的名字。

相关文档
最新文档