拥有一个属于自己的javascript表单验证插件


Posted in Javascript onMarch 24, 2016

自己编写了一个表单验证插件,使用起来很简单,以后还可以扩展更多的功能,比如ajax验证。

每个需要验证的表单元素下面有一个span标签,这个标签的class有一个valid表示需要验证,如果有nullable则表示可为空;rule表示验证规则,msg表示错误提示信息;to表示要验证的元素的name值,如果元素是单个的,to可以不写。该插件会遍历每个有valid的span标签,找出它前面需要验证的元素,根据rule验证,如果验证不通过,则显示边框为红色,鼠标放在元素上时显示错误信息。

 验证时机:1、点击提交按钮时显式调用验证方法;2、当元素触发blur时验证。

插件代码:

CSS:

.failvalid
{
 border: solid 2px red !important;
}

JS:

/**
* 验证插件
*/

SimpoValidate = {
 //验证规则
 rules: {
 int: /^[1-9]\d*$/,
 number: /^[+-]?\d*\.?\d+$/
 },

 //初始化
 init: function () {
 $("span[class*='valid']").each(function () { //遍历span
 var validSpan = $(this);
 var to = validSpan.attr("to");
 var target;
 if (to) {
 target = $("input[name='" + to + "'],select[name='" + to + "'],textarea[name='" + to + "']");
 } else {
 var target = validSpan.prev();
 }
 if (target) {
 target.blur(function () {
  SimpoValidate.validOne(target, validSpan);
 });
 }
 });
 },

 //验证全部,验证成功返回true
 valid: function () {
 var bl = true;

 $("span[class*='valid']").each(function () { //遍历span
 var validSpan = $(this);
 var to = validSpan.attr("to");
 var target;
 if (to) {
 target = $("input[name='" + to + "'],select[name='" + to + "'],textarea[name='" + to + "']");
 } else {
 target = validSpan.prev();
 }
 if (target) {
 if (!SimpoValidate.validOne(target, validSpan)) {
  bl = false;
 }
 }
 });

 return bl;
 },

 //单个验证,验证成功返回true
 validOne: function (target, validSpan) {
 SimpoValidate.removehilight(target, msg);

 var rule = SimpoValidate.getRule(validSpan);
 var msg = validSpan.attr("msg");
 var nullable = validSpan.attr("class").indexOf("nullable") == -1 ? false : true; //是否可为空
 var to = validSpan.attr("to");

 if (target) {
 //checkbox或radio
 if (target[0].tagName.toLowerCase() == "input" && target.attr("type") && (target.attr("type").toLowerCase() == "checkbox" || target.attr("type").toLowerCase() == "radio")) {
 var checkedInput = $("input[name='" + to + "']:checked");
 if (!nullable) {
  if (checkedInput.length == 0) {
  SimpoValidate.hilight(target, msg);
  return false;
  }
 }
 }

 //input或select
 if (target[0].tagName.toLowerCase() == "input" || target[0].tagName.toLowerCase() == "select") {
 var val = target.val();
 if (!nullable) {
  if ($.trim(val) == "") {
  SimpoValidate.hilight(target, msg);
  return false;
  }
 }
 else {
  if ($.trim(val) == "") {
  SimpoValidate.removehilight(target, msg);
  return true;
  }
 }

 if (rule) {
  var reg = new RegExp(rule);
  if (!reg.test(val)) {
  SimpoValidate.hilight(target, msg);
  return false;
  }
 }
 }
 else if (target[0].tagName.toLowerCase() == "textarea") {
 var val = target.text();
 if (!nullable) {
  if ($.trim(val) == "") {
  SimpoValidate.hilight(target, msg);
  return false;
  }
 }
 else {
  if ($.trim(val) == "") {
  SimpoValidate.removehilight(target, msg);
  return true;
  }
 }

 if (rule) {
  var reg = new RegExp(rule);
  if (!reg.test(val)) {
  SimpoValidate.hilight(target, msg);
  return false;
  }
 }
 }
 }

 return true;
 },

 //获取验证规则
 getRule: function (validSpan) {
 var rule = validSpan.attr("rule");
 switch ($.trim(rule)) {
 case "int":
 return this.rules.int;
 case "number":
 return this.rules.number;
 default:
 return rule;
 break;
 }
 },

 //红边框及错误提示
 hilight: function (target, msg) {
 target.addClass("failvalid");
 target.bind("mouseover", function (e) {
 SimpoValidate.tips(target, msg, e);
 });
 target.bind("mouseout", function () {
 SimpoValidate.removetips();
 });
 },

 //取消红边框及错误提示
 removehilight: function (target) {
 target.unbind("mouseover");
 target.unbind("mouseout");
 target.removeClass("failvalid");
 SimpoValidate.removetips();
 },

 //显示提示
 tips: function (target, text, e) {
 var divtipsstyle = "position: absolute; left: 0; top: 0; background-color: #dceaf2; padding: 3px; border: solid 1px #6dbde4; visibility: hidden; line-height:20px; ";
 $("body").append("<div class='div-tips' style='" + divtipsstyle + "'>" + text + "</div>");

 var divtips = $(".div-tips");
 divtips.css("visibility", "visible");

 var top = e.clientY + $(window).scrollTop() - divtips.height() - 18;
 var left = e.clientX;
 divtips.css("top", top);
 divtips.css("left", left);

 $(target).mousemove(function (e) {
 var top = e.clientY + $(window).scrollTop() - divtips.height() - 18;
 var left = e.clientX;
 divtips.css("top", top);
 divtips.css("left", left);
 });
 },

 //移除提示
 removetips: function () {
 $(".div-tips").remove();
 }
};

$(function () {
 SimpoValidate.init();
});

如何使用:

1、引用CSS和JS(必须引用jQuery):

<link type="text/css" href="~/Scripts/SimpoValidate.css" rel="stylesheet" />
<script type="text/javascript" src="~/Scripts/jquery-1.8.2.js"></script>
<script type="text/javascript" src="~/Scripts/ValidateUtil.js"></script>

2、表单HTML代码(部分代码):

<table class="table-test" cellpadding="0" cellspacing="0" style="border-collapse: collapse; width: 100%;">
 <tr>
 <td>
 <input name="c" value="" type="text" />
 <span class="valid nullable" rule="int" msg="可为空,请填写正整数"></span>
 </td>
 </tr>
 <tr>
 <td>
 <input name="d" value="" type="text" />
 <span class="valid" rule="number" msg="必填,请填写数字"></span>
 </td>
 </tr>
 <tr>
 <td>
 <select>
 <option value="-1">==请选择==</option>
 <option value="1">是</option>
 <option value="2">否</option>
 </select>
 <span class="valid" rule="^(?!-1$).+$" msg="必选"></span>
 </td>
 </tr>
 <tr>
 <td>
 <input name="a" value="1" type="checkbox" />
 <span>多</span>
 <input name="a" value="2" type="checkbox" />
 <span>少</span>
 <span class="valid" rule="" msg="必选" to="a"></span>
 </td>
 </tr>
 <tr>
 <td>
 <input name="b" value="1" type="radio" />
 <span>狗</span>
 <input name="b" value="2" type="radio" />
 <span>猫</span>
 <span class="valid" rule="" msg="必选" to="b"></span>
 </td>
 </tr>
 <tr>
 <td>
 <textarea cols="20" rows="5" style="height: 50px; width: 300px;"></textarea>
 <span class="valid nullable" rule="^(.|\n){5,100}$" msg="可为空,长度必须大于等于5小于等于100"></span>
 </td>
 </tr>
</table>

3、执行验证JS代码:

//保存数据
function save() {
 if (SimpoValidate.valid()) { //执行验证
 $("#frm").submit(); //提交表单
 }
}

效果图:

拥有一个属于自己的javascript表单验证插件

以上就是作者自己动手编写的javascript表单验证插件,希望能够帮助到大家。

Javascript 相关文章推荐
JavaScript 面向对象的 私有成员和公开成员
May 13 Javascript
深入分析Cookie的安全性问题
Mar 01 Javascript
JavaScript的类型、值和变量小结
Jul 09 Javascript
JavaScript实现的类字典插入或更新方法实例
Jul 10 Javascript
JavaScript类型系统之基本数据类型与包装类型
Jan 06 Javascript
EasyUI学习之Combobox下拉列表(1)
Dec 29 Javascript
jQuery实现三级联动效果
Mar 02 Javascript
Mongoose实现虚拟字段查询的方法详解
Aug 15 Javascript
bootstrap下拉框动态赋值方法
Aug 10 Javascript
Vue3.0结合bootstrap创建多页面应用
May 28 Javascript
vue element 生成无线级左侧菜单的实现代码
Aug 21 Javascript
AngularJS动态生成select下拉框的方法实例
Nov 17 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
Mar 24 #Javascript
js+css实现select的美化效果
Mar 24 #Javascript
基于jQuery Ajax实现上传文件
Mar 24 #Javascript
Angular.js如何从PHP读取后台数据
Mar 24 #Javascript
JavaScript驾驭网页-获取网页元素
Mar 24 #Javascript
JavaScript驾驭网页-CSS与DOM
Mar 24 #Javascript
JavaScript驾驭网页-DOM
Mar 24 #Javascript
You might like
全国FM电台频率大全 - 28 甘肃省
2020/03/11 无线电
php基于SQLite实现的分页功能示例
2017/06/21 PHP
php写入mysql中文乱码的实例解决方法
2019/09/17 PHP
JS Range HTML文档/文字内容选中、库及应用介绍
2011/05/12 Javascript
JS 日期比较大小的简单实例
2014/01/13 Javascript
整理Javascript基础语法学习笔记
2015/11/29 Javascript
javascript HTML5 canvas实现打砖块游戏
2020/06/18 Javascript
微信小程序 支付简单实例及注意事项
2017/01/06 Javascript
深入理解Angular.JS中的Scope继承
2017/06/04 Javascript
p5.js入门教程和基本形状绘制
2018/03/15 Javascript
JavaScript实现微信红包算法及问题解决方法
2018/04/26 Javascript
详解ES6实现类的私有变量的几种写法
2021/02/10 Javascript
python微信跳一跳系列之色块轮廓定位棋盘
2018/02/26 Python
下载python中Crypto库报错:ModuleNotFoundError: No module named ‘Crypto’的解决
2018/04/23 Python
pycharm 主题theme设置调整仿sublime的方法
2018/05/23 Python
Python-Seaborn热图绘制的实现方法
2019/07/15 Python
阿里云ECS服务器部署django的方法
2019/08/29 Python
利用PyQt中的QThread类实现多线程
2020/02/18 Python
python多进程使用函数封装实例
2020/05/02 Python
python语言中有算法吗
2020/06/16 Python
最新Python idle下载、安装与使用教程图文详解
2020/11/28 Python
html5读取本地文件示例代码
2014/04/22 HTML / CSS
华为的Java面试题
2014/03/07 面试题
服装销售人员求职自我评价
2013/09/26 职场文书
小学生班会演讲稿
2014/01/09 职场文书
2015年元旦文艺汇演主持词
2014/03/26 职场文书
《傅雷家书》教学反思
2014/04/20 职场文书
艺术设计专业求职自荐信
2014/05/19 职场文书
合同纠纷调解书
2015/05/20 职场文书
党支部培养考察意见
2015/06/02 职场文书
2016社区平安家庭事迹材料
2016/02/26 职场文书
某某幼儿园的教育教学管理调研分析报告
2019/11/29 职场文书
python实现进度条的多种实现
2021/04/29 Python
Python如何解决secure_filename对中文不支持问题
2021/07/16 Python
PostGIS的安装与入门使用指南
2022/01/18 PostgreSQL
PostgreSQL数据库去除重复数据和运算符的基本查询操作
2022/04/12 PostgreSQL