jQuery.validator.js和jquery.metadata.js使用详解

最新推荐文章于 2024-08-10 07:08:10 发布
最新推荐文章于 2024-08-10 07:08:10 发布
阅读量1.4k 收藏
点赞数 1
分类专栏： 前端学习笔记 文章标签： jQuery.validator.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ITzhongzi/article/details/77651166
版权

jQuery.validator.js使用demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns= "http://www.w3.org/1999/xhtml">
< head>
< meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" />
< title>jquery validate表单验证插件制作注册表单验证提交</ title>
< meta name= "description" content= "jquery validate表单验证插件制作用户注册页面表单提交验证，用户名、手机、密码、邮箱等表单验证。通过这款validate表单验证插件能制作多种表单提交验证。" />
< script language= "javascript" type= "text/javascript" src= "./jquery.js"></ script>
< script language= "javascript" type= "text/javascript" src= "./jquery.validate.js"></ script>
< script type= "text/javascript">
$(document). ready( function(){
$( "#signupForm"). validate({
rules: {
"firstname":{
required: true,
rangelength: [ 4, 20]
},
"email":{
required: true,
email: true
},
"password":{
required: true,
rangelength: [ 4, 20]
},
"confirm_password":{
required: true,
equalTo: "#password"
}
},
messages: {
"firstname":{
required: "请输入用户名",
rangelength: "请输入4-20位字母开头的字母或数字和下划线"
},
"email":{
required: "请输入邮箱地址",
email: "请输入正确的email地址"
},
"password":{
required: "请输入密码",
rangelength: "请输入4-20位字母开头的字母或数字和下划线"
},
"confirm_password":{
required: "请再次输入密码",
equalTo: "两次输入密码不一致",
}
}
});
});
</ script>
</ head>
< body>
< form id= "signupForm" method= "post" action= "">
< table width= "100%">
< tr>
< td class= "tdcon">用户名:</ td>
< td>
< input type= 'text' name= "firstname" id= "firstname" value= "" />
< div class= "tipinfo"></ div>
</ td>
</ tr>
< tr>
< td class= "tdcon">邮箱:</ td>
< td>
< input type= 'text' name= "email" id= "email" value= "" />
< div class= "tipinfo"></ div>
</ td>
</ tr>
< tr>
< td class= "tdcon">密码:</ td>
< td>
< input type= 'text' name= "password" id= "password" value= "" />
< div class= "tipinfo"></ div>
</ td>
</ tr>
< tr>
< td class= "tdcon">确认密码:</ td>
< td>
< input type= 'text' name= "confirm_password" id= "confirm_password" value= "" />
< div class= "tipinfo"></ div>
</ td>
</ tr>
< tr>
< td></ td>
< td>< button name= "Submit" type= "submit">同意以下服务条款并注册</ button></ td>
</ tr>
</ table>
</ form>
</ body>
</ html>

jquery.metadata.js

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns= "http://www.w3.org/1999/xhtml">

< head>
< meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" />
< title>jquery.metadata.js</ title>
< script language= "javascript" type= "text/javascript" src= "./jquery.js"></ script>
< script language= "javascript" type= "text/javascript" src= "./jquery.validate.js"></ script>
< script src= "./jquery.metadata.js" type= "text/javascript"></ script>
< SCRIPT type= "text/javascript">
$(document). ready( function () {
jQuery.validator. addMethod( "phone", function ( val, element) {
var tel = / ^ ( \d {3,4} - ? ) ? \d {7,9}$ / g;
return this. optional(element) || (tel. test(val));
}, "请正确填写您的电话号码");

var validator = $( '#jqueryForm'). validate();
</ SCRIPT>

</ head>

< body>

< form id= "jqueryForm" name= "jqueryForm" method= "post" action= "">

< table cellspacing= "0" cellpadding= "0">
< tr>
< td>用户名</ td>
< td>< input type= "text" name= "username" class= "{required:true,minlength:6,maxlength:10}" /></ td>
< td></ td>
</ tr>
< tr>
< td>密码</ td>
< td>< input type= "password" name= "password" id= "password" class= "{required:true,minlength:6,maxlength:10}" /></ td>
< td></ td>
</ tr>
< tr>
< td>确认密码</ td>
< td>< input type= "password" name= "repass" class= "{required:true,minlength:6,maxlength:10,equalTo:'#password'}" /></ td>
< td></ td>
</ tr>
< tr>
< td>手机号码</ td>
< td>< input type= "text" name= "phone" id= "phone" class= "{required:true,phone:true}" /></ td>
< td></ td>
</ tr>
< tr>
< td>邮箱</ td>
< td>< input type= "text" name= "email" class= "{required:true,minlength:6,maxlength:50,email:true}" /></ td>
< td></ td>
</ tr>
< tr>
< td>< input type= "submit" id= "btn" value= "提交" /> < input type= "reset" value= "重置" /></ td>
</ tr>
</ table>
</ form>
</ body>

</ html>

这里把验证规则  都写在结构  的 class 属性里，也可以设置写在其他属性里，使用这个方法：

$.metadata. setType( 'attr', 'validate');



加入这个代码之后，就可以写在validate属性中了，如下：

< tr>
< td>手机号码</ td>
< td>< input type= "text" name= "phone" id= "phone" validate= "{required:true,phone:true}" /></ td>
< td></ td>
</ tr>


写的不是很详细， 其中 jquery.js  jquery.validate.js  jquery.meta.js  这三个类库自己去网上找资源下载，也可以去我的github下载。

github地址：

https://github.com/MrITzhongzi/class-lib/tree/master




ITzhongzi
关注
专栏目录
自定义jQValidate校验规则
Optimistic
08-24 6721
自定义jQ Validate校验规则
jquery.metadata.js
12-29
jquery验证控件 使用class="{}"的方式，必须引入包：jquery.metadata.js 可以使用如下的方法，修改提示内容： class="{required:true,minlength:5,messages:{required:'请输入内容'}}" 在使用equalTo关键字时，后面的内容必须加上引号，如下代码： class="{required:true,minlength:5,equalTo:'#password'}"
jQuery metadata.js
didiaidada的专栏
04-25 836
＃jQuery metadata.js＃＃metadata.js 是一种支持固定格式解析的jQuery插件，即从DOM对象中提取元数据并返回此对象。
Validator.js 教程
最新发布
gitblog_00750的博客
08-10 288
Validator.js 教程 validatorjsA data validation library in JavaScript for the browser and Node.js, inspired by Laravel's Validator.项目地址:https://gitcode.com/gh_mirrors/va/validatorjs 1. 项目介绍 Validator.j...
jquery.metadata.js 方式验证用户输入框功能
a1091220321的专栏
10-13 3529
Jquery+Jquery.metadata.js 的验证方式，这种验证方式可减少代码量，并且重用性高，因为有部分验证的代码是封装好的我们直接拿来用就可以了，如果封装好的验证不能够满足需求的话还可以自己自定义验证函数，之前公司用的是struts2自带的验证方式，用起来感觉很臃肿而且重用性不高，并且每次修改了xml文件的话还需要重启服务器，所以我自己找资料写了个jquery.metadata.js的
jQuery表单验证大全
11-17
`jquery.metadata.js`是jQuery Validate的一个补充插件，允许开发者通过元数据（metadata）来定义验证规则，例如将规则写在CSS类名或自定义属性中，使得HTML结构更加清晰。 5. **额外验证方法** `additional-...
jQuery验证
12-18
### jQuery验证知识点详解 #### 一、概述 在前端开发中，进行表单验证是非常重要的一个环节，它能够确保用户提交的数据格式正确且符合预期。jQuery作为一种轻量级的JavaScript库，提供了强大的DOM操作能力，并简化...
JQuery验证框架
08-02
### JQuery验证框架详解 #### 一、概述 JQuery验证框架是基于JQuery的一个轻量级插件，用于简化Web表单验证的过程。它提供了一系列的内置验证规则和自定义验证逻辑，使得开发者无需编写复杂的JavaScript代码即可...
别让我再手写前端有效性验证
一名系统架构师的征途
09-21 7590
$(document).ready( function() { /**  * 身份证号码验证  *  */ function isIdCardNo(num) {  var factorArr = new Array(7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2,1);  var parityBit=new
jquery.metadata.js和jquery.validate.js
02-02
页面，表单校验必备js文件,如注册，登录界面
jquery.validate.js jquery.metadata.js
07-29
jquery validate用于前台验证，里面的remote异步验证，jquery.metadata.js加载后可以直接在控件旁写class{}
jquery.metadata.js下载
08-19
jquery.metadata.js下载
jQuery.Validator
12-11
个人感觉非常好用且NB的验证控件。 支持多语言， 支持数字、字母、电话等常规验证 支持ajax认证 支持自定义 。 还有巨多好用的功能等待发现
jQuery.metadata.js
07-20
jQuery插件——jQuery.metadata.js
jquery MetaData.js 源文件
feiyuncheng的专栏
06-28 3219
/*�örn Zaefferer, Paul McLanahan  *  * Dual licensed under the MIT and GPL licenses:  *   http://www.opensource.org/licenses/mit-license.php  *   http://www.gnu.org/licenses/gpl.html  *  * Revis
jQuery Validate 表单验证插件----利用jquery.metadata.js将校验规则直接写在class属性里面并定义错误信息的提示...
weixin_34357962的博客
01-16 305
一、下载依赖包   网盘下载：https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224   二、 添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面。   三、需要改写触发校验的方式。   $("#commentForm").validate({meta: "validate"});   四、详细代码如下： ...
jQuery验证控件jquery.validate.js使用说明+中文API
热门推荐
lhzjj的专栏
12-17 3万+
一导入js库   二、默认校验规则 (1)required:true                必输字段 (2)remote:"check.php"      使用ajax方法调用check.php验证输入值 (3)email:true                    必须输入正确格式的电子邮件 (4)url:true                        必
jQuery.validator表单验证工具详解与常用规则
jQuery.validator是一种强大的JavaScript插件，用于简化HTML表单验证工作，它与jQuery库紧密结合，提供了易于理解和使用的API。该插件在1.5.5版本中，要求的jQuery版本至少为1.2.6以上，兼容性包括1.3.2。通过集成...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ITzhongzi

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值