拥有一个属于自己的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使用jxl插件导出excel示例
Apr 14 Javascript
正则表达式优化JSON字符串的技巧
Dec 24 Javascript
jquery动态创建div与input的实例代码
Oct 12 Javascript
数组Array的一些方法(总结)
Feb 17 Javascript
深入理解AngularJS中的ng-bind-html指令
Mar 27 Javascript
微信小程序利用co处理异步流程的方法教程
May 20 Javascript
js防刷新的倒计时代码 js倒计时代码
Sep 06 Javascript
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
js的对象与函数详解
Jan 21 Javascript
js实现图片局部放大效果详解
Mar 18 Javascript
微信小程序错误this.setData报错及解决过程
Sep 18 Javascript
Openlayers绘制聚合标注
Sep 28 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
PDO版本问题 Invalid parameter number: no parameters were bound
2013/01/06 PHP
PHP设计模式之迭代器模式的深入解析
2013/06/13 PHP
php的数组与字符串的转换函数整理汇总
2013/07/18 PHP
三种php连接access数据库方法
2013/11/11 PHP
php源码分析之DZX1.5字符串截断函数cutstr用法
2015/06/17 PHP
10个php函数实用却不常见
2015/10/13 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
JavaScript 页面编码与浏览器类型判断代码
2010/06/03 Javascript
js关闭模态窗口刷新父页面或跳转页面
2012/12/13 Javascript
js抽奖实现随机抽奖代码效果
2013/12/02 Javascript
Array 重排序方法和操作方法的简单实例
2014/01/24 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
2014/10/22 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
2015/04/12 Javascript
基于nodejs+express(4.x+)实现文件上传功能
2015/11/23 NodeJs
js调出上下文菜单的实例
2015/12/17 Javascript
json传值以及ajax接收详解
2016/05/24 Javascript
js实现功能比较全面的全选和多选
2017/03/02 Javascript
Vue实现virtual-dom的原理简析
2017/07/10 Javascript
nuxt.js中间件实现拦截权限判断的方法
2018/11/21 Javascript
[01:52]PWL S2开团时刻第四期——DOTA2成语故事
2020/12/03 DOTA
windows下安装Python和pip终极图文教程
2017/03/05 Python
Python与C/C++的相互调用案例
2021/03/04 Python
纯HTML+CSS3制作导航菜单(附源码)
2013/04/24 HTML / CSS
定制iPhone和Macbook保护壳:Slick Case
2018/11/21 全球购物
学生喝酒检讨书
2014/02/06 职场文书
高中毕业生的个人自我评价
2014/02/21 职场文书
班组长竞聘书
2014/03/31 职场文书
安全生产承诺书范文
2014/05/22 职场文书
农民工预备党员思想汇报
2014/09/14 职场文书
2014年化妆品销售工作总结
2014/12/01 职场文书
邀请书模板
2015/02/02 职场文书
奖学金发言稿(范文)
2019/08/21 职场文书
创业计划书之珠宝饰品
2019/08/26 职场文书
解决Pytorch dataloader时报错每个tensor维度不一样的问题
2021/05/28 Python
纯CSS3实现div按照顺序出入效果
2021/07/15 HTML / CSS
利用 SQL Server 过滤索引提高查询语句的性能分析
2021/07/15 SQL Server