拥有一个属于自己的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 相关文章推荐
jquery动态更换设置背景图的方法
Mar 25 Javascript
用unescape反编码得出汉字示例
Apr 24 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
May 02 Javascript
vue实现todolist单页面应用
Apr 11 Javascript
微信小程序开发教程之增加mixin扩展
Aug 09 Javascript
详解vue表单——小白速看
Apr 08 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
Aug 23 Javascript
javascript动态创建对象的属性详解
Nov 07 Javascript
uni-app之APP和小程序微信授权方法
May 09 Javascript
Vue.js实现tab切换效果
Jul 24 Javascript
vue实现节点增删改功能
Sep 26 Javascript
利用JS判断元素是否为数组的方法示例
Jan 08 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
DOTA2 6.87版本后新眼位详解攻略
2020/04/20 DOTA
用javascript实现无刷新更新数据的详细步骤 asp
2006/12/26 Javascript
jquery 多行滚动代码(附详细解释)
2010/06/17 Javascript
Jquery 选中表格一列并对表格排序实现原理
2012/12/15 Javascript
jQuery的animate函数实现图文切换动画效果
2015/05/03 Javascript
基于JavaScript实现文字超出部分隐藏
2016/02/29 Javascript
jqGrid 学习笔记整理——进阶篇(一 )
2016/04/17 Javascript
使用JS读取XML文件的方法
2016/11/25 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
2017/01/22 Javascript
一次围绕setTimeout的前端面试经验分享
2017/06/15 Javascript
基于js 本地存储(详解)
2017/08/16 Javascript
NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】
2017/09/06 NodeJs
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
node.js读取Excel数据(下载图片)的方法示例
2018/08/02 Javascript
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
2018/09/19 Javascript
javascript canvas API内容整理
2020/02/16 Javascript
[01:02:05]LGD vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[00:56]跨越时空加入战场 全新祈求者身心“失落奇艺侍祭”展示
2019/07/20 DOTA
Python中函数的基本定义与调用及内置函数详解
2019/05/13 Python
Django框架创建mysql连接与使用示例
2019/07/29 Python
实现ECharts双Y轴左右刻度线一致的例子
2020/05/16 Python
解决Keras使用GPU资源耗尽的问题
2020/06/22 Python
Django nginx配置实现过程详解
2020/09/10 Python
python的数学算法函数及公式用法
2020/11/18 Python
网络工程系信息安全技术专业大学生求职信
2013/10/22 职场文书
厂办主管岗位职责范本
2014/02/28 职场文书
六个一活动实施方案
2014/03/21 职场文书
四议两公开实施方案
2014/03/28 职场文书
民政局个人整改措施
2014/09/24 职场文书
社区灵活就业证明
2014/11/03 职场文书
党员思想汇报材料
2014/12/19 职场文书
工作态度检讨书范文
2015/05/06 职场文书
关于食品安全的演讲稿范文(三篇)
2019/10/21 职场文书
详解如何用Python实现感知器算法
2021/06/18 Python
Node.js实现爬取网站图片的示例代码
2022/04/04 NodeJs
微软发布Windows 11今年最大更新22H2(附 ISO 镜像官方下载)
2022/09/23 数码科技