这段时间在公司一直做项目的同时,也学了下js,感觉有必要做一些什么东西出来。思来想去就做了最简单的一个验证插件。我很清楚这个东西市面上已经很多了,但我的目的也很清楚,检验我的学习成果。所以也就无所谓了。

因为我并没有看别人的插件是如何写的,所以对于插件里面的东西要遵循什么原则或是有什么潜在的规则至少目前是没有遵循的。先上代码吧。

; (function () {
//插件开始
$.fn.mwValidat = function () {
var $all_v = this.find("[data-validate]"); var $self = this;//保存当前jq对象 var haveNoError = true;;//没有错误
$all_v.each(function (index, item) {
var $target = $(item);
var validateFlag = $target.data("validate");
var cType = $target[0].localName;
var name = $target.attr("name");
var v = $target.val().trim();
var tipEl = "[data-validate-tip='" + name + "']";
//解析验证表达式
var res = JeamyValidate.InitStr(validateFlag);
//非空判断
if (res.express == "notnull") {
if (cType == "input" || cType == "textarea") {
var s = JeamyValidate.CheckNull(v);
$self.find(tipEl).html(s);
if (s) haveNoError = false;
}
//select 默认值处理
if (cType == "select") {
var s = JeamyValidate.IsDefualt(v, -1);
$self.find(tipEl).html(s);
if (s) haveNoError = false;
}
}
//长度判断
if (res.express == "strlen") {
var s = JeamyValidate.CheckLen(v, res.first, res.second);
$self.find(tipEl).html(s);
if (s) haveNoError = false;
}
//大小范围判断
if (res.express == "int") {
var s = JeamyValidate.CheckRang(v, res.first, res.second);
$self.find(tipEl).html(s);
if (s) haveNoError = false;
}
//正则验证
if (res.express == "strreg") { if (res.first == "email") {
var s = JeamyValidate.IsEmail(v);
$self.find(tipEl).html(s);
if (s) haveNoError = false;
}
if (res.first == "idcard") {
var s = JeamyValidate.IsIDCard(v);
$self.find(tipEl).html(s);
if (s) haveNoError = false;
}
if (res.first == "phone") {
var s = JeamyValidate.IsPhone(v);
$self.find(tipEl).html(s);
if (s) haveNoError = false;
}
} })
return haveNoError;
}; //定义一个链式调用验证的类
var Methods = function () { };
Methods.prototype.addMethod = function (fn_name, fn) {
this[fn_name] = fn;
return this;
} //实现验证类
var JeamyValidate = new Methods();
JeamyValidate.addMethod("CheckNull", function (value) {
if (value == null || value.trim() === "") {
return JeamyValidate_Info.Null;
}
return "";
}).addMethod("IsEmail", function (value) {
var re = /^\w+@\w+\.\w{2,3}/;
var r = value.match(re);
if (r == null)
return JeamyValidate_Info.Email;
return "";
}).addMethod("IsPhone", function (value) {
var re = /^(([0-9]+)-)?\d{7,11}$/;
var r = value.match(re);
if (r == null)
return JeamyValidate_Info.Phone;
return "";
}).addMethod("IsIDCard", function (value) {
var _re15 = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/; // 15位
var _re18 = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4}$/; // 18位
var r = value.match(_re15);
var r1 = value.match(_re18);
if (r == null && r1 == null)
return JeamyValidate_Info.IDCard;
return "";
}).addMethod("IsDefualt", function (value, defval) {
if (value == defval) {
return JeamyValidate_Info.DefaultErr;
}
return "";
}).addMethod("CheckLen", function (value, min, max) {
//字符串长度验证
if (value.length < min) {
return JeamyValidate_Info.StrShort;
}
if (value.length > max) {
return JeamyValidate_Info.StrLong;
}
return "";
}).addMethod("CheckRang", function (value, start, end) {
if (!value.match(/^\d+$/)) {
return JeamyValidate_Info.LegalInteger;
}
if (parseInt(value) < parseInt(start)) {
return JeamyValidate_Info.IntegerSmall;
}
if (parseInt(value) > parseInt(end)) {
return JeamyValidate_Info.IntegerBigger;
}
return "";
}).addMethod("InitStr", function (str) {
var splitArr = str.split(',');
if (splitArr.length == 1) {
splitArr[1] = "";
splitArr[2] = "";
}
if (splitArr.length == 2) {
splitArr[2] = "";
}
return {
express: splitArr[0],
first: splitArr[1],
second: splitArr[2]
}; }); //提示信息
var JeamyValidate_Info = {
Null: "<span style='color:red;font-size:12px;'>不能为空!<span>",
Email: "<span style='color:red;font-size:12px;'>电子邮件格式不正确!<span>",
Phone: "<span style='color:red;font-size:12px;'>不是合法的手机号码!<span>",
IDCard: "<span style='color:red;font-size:12px;'>不是合法的身份证号码!<span>",
DefaultErr: "<span style='color:red;font-size:12px;'>请选择!<span>",
StrShort: "<span style='color:red;font-size:12px;'>字符串长度太小!<span>",
StrLong: "<span style='color:red;font-size:12px;'>字符串太长!<span>",
IntegerSmall: "<span style='color:red;font-size:12px;'>数字太小!<span>",
IntegerBigger: "<span style='color:red;font-size:12px;'>数字太大!<span>",
LegalInteger: "<span style='color:red;font-size:12px;'>请输入合法数字!<span>",
}
})();

以上是插件代码。如何使用呢?

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="Scripts/jquery-1.8.3.min.js"></script>
<script src="Manage/Scripts/jeamy.validate-1.0.js?v=21"></script>
</head>
<body>
<div id="box">
<input data-validate="notnull" name="username" type="text" value="123" /><label data-validate-tip="username"></label>
<br/>
<input data-validate="notnull" type="text" name="password" value="" /><span data-validate-tip="password"></span> <br/>
<select data-validate="notnull" name="choose">
<option value="-1">请选择</option>
<option value="1">A</option>
<option value="2">B</option>
</select><label data-validate-tip="choose"></label> <br/>
<input data-validate="strlen,3,10" type="text" name="title" /><span data-validate-tip="title" ></span> <br/>
<input data-validate="strreg,email" type="text" name="email" /><span data-validate-tip="email"></span> <br/>
<input data-validate="strreg,phone" type="text" name="phone" /><span data-validate-tip="phone"></span> <br/>
<input data-validate="strreg,idcard" type="text" name="idcard" /><span data-validate-tip="idcard"></span> <br/>
<input data-validate="int,200,99999" type="text" name="money" /><span data-validate-tip="money"></span> <br/>
<input data-validate="int,200,99999" type="text" name="money1" /><span data-validate-tip="money1"></span> <br/>
<input data-validate="int,200,99999" type="text" name="money2" /><span data-validate-tip="money2"></span> <br/>
<input type="button" value="验证" onclick="validate()" /><br/>
</div> <script type="text/javascript">
function validate() {
console.log($('#box').mwValidat());
}
</script>
</body> </html>

这里需要解释下插件的支持:插件使用HTML5的新特性,寻找的是带有 data-validate的标签。标签的内容是需要验证的表达式。

如:

  <input data-validate="strlen,3,10" type="text" name="title" /><span data-validate-tip="title" ></span> 

此时 data-validate的值是 strlen,3,10 此时代表,需要验证 input输入的内容的字符串长度为 必须大于3 小于10 (注意这里没有等于,其实代码在上面,可以自己改的)。如果用户输入的内容与我们的规则不相符,则系统会返回一个string。此时这个string是在插件内部的,并没有返回出来。所以,插件用了一个 data-validate-tip 这个标签来表示需要显示的提示信息。而这个tip的值对应的就是 这个表单控件的name属性。

支持的验证模式
notnull   不为空验证
strlen,3,10 字符串长度验证,字符串长度必须大于3小于10
strreg,email 正则验证,后面的email代表,用email的正则去匹配输入
strreg,phone 正则验证,后面的phonel代表,用手机号的正则去匹配输入
strreg,idcard 正则验证,后面的idcard代表,用身份证(支持15和18位的身份证)的正则去匹配输入
int,200,99999 int范围验证,输入的值必须大于200,小于99999.具体使用可以自定义。

注:1、如果是select 标签加上notnul验证,则需要添加默认选择项-1,当select的value=-1 的时候,插件认为用户没有做出选择。

2、如果使用notnull以外的其他验证方式,插件会自动加上非空验证。

如何调用?

在上述HTML中只需要

$('#box').mwValidat();

即可调用,插件返回 true,false。如果全部的验证通过则返回true,否则为false。

上述HTML的使用效果如下:


最后:

这个插件还存在一些问题,或许还有一些BUG,但目前使用上来说够用了。但是,有个弊端就是,验证的提示不能根据业务来自定义。第二个版本,我会对这个问题进行解决。

mwValidate.js验证插件的更多相关文章

  1. jquery-validation.js验证插件使用详解

    jquery-validation 使用 一.用前必备 官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: ...

  2. validate.plugin.js 验证插件

    /*编写时间:2015-6-4*/ (function ($) { $.fn.isValidate = function (obj) { if ($(this).val()!="" ...

  3. 表单验证插件之jquery.validate.js

    提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...

  4. JS表单验证插件(支持Ajax验证)

    自己编写了一个表单验证插件,支持ajax验证,使用起来很简单. 每个需要验证的表单元素下面有一个span标签,这个标签的class有一个valid表示需要验证,如果有nullable则表示可为空:ru ...

  5. 表单验证代码实例:jquery.validate.js表单验证插件

    jquery.validate.js是JQuery旗下的一个验证插件,借助JQuery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法.使用前请先下载必要的JQuery插件:jq ...

  6. jQuery Validate 表单验证插件----通过name属性来关联字段来验证,改变默认的提示信息,将校验规则写到 js 代码中

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二. 添加一个另外一个插件jquery.validate.messages_cn.js. ...

  7. jQuery Validate 表单验证插件----利用jquery.metadata.js将校验规则直接写在class属性里面并定义错误信息的提示

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二. 添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面 ...

  8. Jquery.validate.js表单验证插件的使用

    作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...

  9. jQuery插件 -- 表单验证插件jquery.validate.js, jquery.metadata.js

    原文地址:http://blog.csdn.net/zzq58157383/article/details/7718352   最常使用JavaScript的场合就是表单的验证,而jQuery作为一个 ...

随机推荐

  1. Linux useradd

    在 linux 中,如果我们想添加一个用户,那么使用的命令如下: useradd  [ 用户名 ] 实例如下: 那么添加密码如下: passwd   [ 用户名 ] 实例如下: 然后输入密码,学过一点 ...

  2. Visual Studio中将打开的代码与类文件进行关联

  3. Django的设计模式

    MVC模式 MVC将应用程序分解为三个组成部分:mode(模型).view(视图).control(控制器),其中: M 管理应用程序的状态(通常存储到数据库中),并榆树改变状态的行为(或者叫&quo ...

  4. 数据分析与展示——Pandas数据特征分析

    Pandas数据特征分析 数据的排序 将一组数据通过摘要(有损地提取数据特征的过程)的方式,可以获得基本统计(含排序).分布/累计统计.数据特征(相关性.周期性等).数据挖掘(形成知识). .sort ...

  5. iOS 用户密码 数字字母特殊符号设置 判断

    //直接调用这个方法就行 -(int)checkIsHaveNumAndLetter:(NSString*)password{ //数字条件 NSRegularExpression *tNumRegu ...

  6. ABP .Net Core API和Angular前端APP集成部署

    前言:在ABP官网(https://aspnetboilerplate.com)生成的.Net Core + Angular项目前后端是两个独立的项目,我们可以分开部署,也可以将前端和Web API一 ...

  7. 【model模型传入view的数据类型错误】传入字典的模型项的类型为“System.Data.Entity.Infrastructure.DbQuery`1[MapScience.PovertyAlleviation.Web.Models.Qu

    出现这个问题的原因是控制器中传给view的数据类型与View中设置的model类型不一致导致,比如控制器返回的IList类型的,而你在View里面model设置的是IEnumerable<> ...

  8. 使用Vue2完成“小红书” app

    小红书项目说明 整体页面格调.功能和原版 app 无限接近.具体页面细节可以下载 “小红书” app查看. 图片素材:https://pan.baidu.com/s/1qYOcx7e 整体要求: · ...

  9. js的Date对象

    1.构造Date对象 var dt = new Date(); //获取当地包含日期和时间的对象,格式为:Thu Aug 31 2017 09:15:43 GMT+0800 (中国标准时间) 2.使用 ...

  10. HTML5学习知识点

    一.文档问题 1.html5新标签:section.header.footer.nav.aside.blockquote.q.fieldest.figure.address.article.detai ...