大家好，第一次写有点正规的博客，以前都是随手复制几下。为了打LOL,我写快点，代码我都复制在最下面了，并且写了大量的注释。
首先我写jquery插件，喜欢这么写（好处有很多，以后在讲，哈哈，看过jQuery源码应该知道）：
(function(root,factory,plug,undefined){
factory(root.jQuery,plug)
})(window,function($,plug){
/*
在这里写逻辑
一：默认的参数 var __dEFAULTS__，
二：规则（可根据业务需求自己配置） var __RULES__，
三：原型 var __PROTOTYPE__，
_init: 初始化DOM结构，没什么将的,
_attachEvent: 自定义的事件的机制（其实就是用了jquery的trigger）
_bind: 首先是事件功能的绑定，为每一个input都绑定事件,each循环__RULES__（就是规则），找到所以自定义data的值（也就是每一个input中所需要的规则校验），用if来判断，当前的input中配置了几个data属性，并且通过 rule.call(_$field)（这句话的意思就是调用rule函数的时候，rule函数里的this引用变成了_$field），把input中的rule规则判断一下。如果为false，那么就在input的父元素下面添加一个p标签，那么怎么让p标签中的内容让用户来配置呢？<p class='message'>"+(_$field.data(key+"-message")||_$this.errorMessage)+"</p>，这其中的意思是如果错了，那么就不往下检索rule了，直接return result（因为rule返回为false,所以这里的result也为false），来阻止。并且添加p标签，并且根据result的值来判断input的父元素,来个父元素加上一个success或error。最后还有submit方法：这个方法是用来通过input父元素的class中有没有error，来判断触发哪一个自定义事件
四：$.fn[plug]
一：首先判断当前元素是否是from标签，不是的话，throw一个错误
二：$.extend(this,__dEFAULTS__,options,__PROTOTYPE__); (....貌似有同学面试死在这个上面了，有空讲一下吧)
三：this._init(); this._bind(); return this;
五：根据业务需求，用户自定义添加rule：就是如下添加一个方法，就可以了，（下次有时间还是讲一下extend吧）
$.fn[plug].extendRules = function(news){
$.extend(__RULES__,news);
}
六：ajax
function login() {
var username = $('#username').val(),
password = $('#password').val();
var data = {
"uname": username,
"upwd": password
};
$.ajax({
url: '/login',
type: 'POST',
data: data,
success: function(data, status) {
if (status == 'success') {
location.href = 'home';
}
},
error: function(data, status) {
if (status == "error") {
location.href = 'login'
}
}
});
}
JS：
;
(function(root, factory, plug, undefined) {
factory(root.jQuery, plug);
})(window, function($, plug) {
//默认参数
var __dEFAULTS__ = {
triggerEvent: "keyup",
errorMessage: "You entered a wrong"
};
/*
require(需求) 必填项
regex（正则表达式）正则验证
length 长度验证
minlength 最短的长度
maxlength 最长的长度
between 两者之间的长度
equalto 和xxx相同
greaterThan 大于
lessThan 小于
middle 两者之间的数字
integer 整数
number 必须是数字
email 邮箱地址
mobile 电话号码
phone 手机号码
uri 有效的统一资源标识符
cardId 身份证号码
bankId 银行卡号码
....其他的规则（根据业务规则来）
*/
var __RULES__ = {
require: function() {
return this.val() != "";
}, //(需求) 必填项
regex: function() {
return new RegExp(this.data("regex")).test(this.val());
}, //（正则表达式）正则验证
length: function() {
return this.val().length == Number(this.data("length"));
}, // 长度验证
minlength: function() {
return this.val().length >= Number(this.data("minlength"));
}, // 最短的长度
maxlength: function() {
return this.val().length <= Number(this.data("maxlength"));
}, // 最长的长度
between: function() {
var length = this.val().length;
var between = this.data("between").split("-");
return length >= Number(between[0]) && length <= Number(between[1]);
}, // 两者之间的长度
equalto: function() {
if ($(this.data("equalto")).val() === this.val()) {
$(this.data("equalto")).parent(".mf-line").removeClass('error').addClass('success').next("p").remove();
return true;
}
return false;
}, // 和xxx相同
greaterthan: function() {
return this.val() > Number(this.data("greaterthan"));
}, // 大于
lessthan: function() {
return this.val() < Number(this.data("lessthan"));
}, // 小于
middle: function() {
var length = this.val();
var middle = this.data("middle").split("-");
return length >= Number(middle[0]) && length <= Number(middle[1]);
}, // 两者之间的数字
integer: function() {
return /^\-".mf-line .mf-txt:visible"); //选择可见的input(过滤掉display: none)
},
//自定义事件的触发机制
_attachEvent: function(event, args) {
this.trigger(event, args);
},
//事件
_bind: function() {
var _$this = this;
//事件功能绑定
this.$fields.on(this.triggerEvent, function() {
var _$field = $(this); //需要验证的表单
var $group = _$field.parents(".mf-line"); //拿到input的div
var result = true;
$group.next("p").remove();
$.each(__RULES__, function(key, rule) {
if (_$field.data(key)) {
result = rule.call(_$field);
(!result) && $group.after("<p class='message'>" + (_$field.data(key + "-message") || _$this.errorMessage) + "</p>");
return result;
}
})
$group.removeClass('error success').addClass(result "submit", function() {
var $groups = _$this.$fields.trigger(_$this.triggerEvent).parents(".mf-line");
if ($groups.filter(".error").length > 0) {
_$this._attachEvent("error", {});
} else {
_$this._attachEvent("success", {});
}
return false;
})
}
}
$.fn[plug] = function(options) {
//判断this是否是form标签
if (!this.is("form")) {
throw new Error("the trgger is not form tag");
}
$.fn.extend(this, __dEFAULTS__, options, __PROTOTYPE__);
this._init();
this._bind();
return this;
}
$.fn[plug].extendRules = function(news) { //根据业务需求增加rule
$.extend(__RULES__, news);
}
}, "validator");
//这是调用插件的js
$(function() {
$.fn.validator.extendRules({
cardid: function() {
return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.val());
}
})
$(".member-forms").validator({
triggerEvent: "blur"
})
.on("error", function(event, $errFiles) {
return false;
})
.on("success", function(event) {
this.submit();
return false;
});
});
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>validata</title>
<link rel="stylesheet" type="text/css" href="css/validata.css" rel="external nofollow" />
</head>
<body>
<div class="wrapper mt30">
<form action="##" class="member-forms" method="get">
<div class="mf-head rel tc">
<span class="f24">用户登录</span>
</div>
<div class="mf-line">
<span class="mf-name">帐号：</span>
<input type="text" class="mf-txt" id="username" placeholder="请输入用户名/手机号" data-require="true" data-require-message="用户名必须填写" data-regex="^\w+$" data-regex-message="用户应该是由字母数字下划线所组成" data-between="6-12" data-between-message="用户名长度必须是在6-12位字符之间" />
</div>
<div class="mf-line">
<span class="mf-name">密码：</span>
<input type="password" class="mf-txt" id="password" placeholder="请输入密码" data-require="true" data-require-message="密码必须填写" data-regex="^[a-zA-Z0-9]+$" data-regex-message="密码应该是由字母数组所组成" data-minlength="8" data-minlength-message="密码长度最少8位" data-maxlength="12" data-maxlength-message="密码长度最多12位" />
</div>
<input type="submit" class="mf-btn mt30" id="loginBtn" />
</form>
</div>
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-2.2.4.js">
css：
<style type="text/css">
body,
html {
width: 100%;
height: 100%;
font-family: "Microsoft yahei";
}
* {
margin: 0;
padding: 0;
}
.tc {
text-align: center;
}
.f24 {
font-size: 24px;
}
.rel {
position: relative;
}
.wrapper {
max-width: 1186px;
}
.mt30 {
margin-top: 30px;
}
.member-forms {
max-width: 400px;
margin: 20px auto;
padding: 0 10px;
background-color: #fff;
}
.member-forms .mf-line {
margin-top: 30px;
border: 1px solid #ddd;
line-height: 52px;
position: relative;
padding-left: 110px;
border-radius: 4px;
}
.member-forms .mf-line.error {
border: 1px solid #a94442;
}
.member-forms .mf-line.success {
border: 1px solid #3c763d;
}
.member-forms .mf-line .mf-name {
position: absolute;
left: 0;
right: 0;
text-align: center;
width: 110px;
}
.member-forms .mf-line .mf-txt {
display: block;
height: 50px;
width: 96%;
border: 0px;
padding: 0 2%;
}
.member-forms .message {
width: 400px;
font-size: 12px;
color: red;
}
.member-forms .mf-btn {
height: 52px;
line-height: 52px;
color: #fff;
background-color: #5ba0e5;
width: 100%;
text-align: center;
cursor: pointer;
font-size: 18px;
border: 0px;
}
</style>
以上这篇jQuery validata插件实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
标签：
jquery,validata
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“jQuery validata插件实现方法”评论...
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。