您的当前位置：首页 JS实现支持Ajax验证的表单插件_javascript技巧

JS实现支持Ajax验证的表单插件_javascript技巧

来源：凯特情感

本文为大家分享了一个表单验证插件，支持ajax验证，使用起来很简单。
每个需要验证的表单元素下面有一个span标签，这个标签的class有一个valid表示需要验证，如果有nullable则表示可为空；rule表示验证规则，msg表示错误提示信息；to表示要验证的元素的name值，如果元素是单个的，to可以不写。该插件会遍历每个有valid的span标签，找出它前面需要验证的元素，根据rule验证，如果验证不通过，则显示边框为红色，鼠标放在元素上时显示错误信息。

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

插件代码：
CSS：

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

JS：

如何使用：
Edit页面：

@using Model.Suya;
@{
 ViewBag.Title = "Add";
 Layout = "~/Views/Shared/_Layout.cshtml";
}
@{
 List postList = (List)ViewData["postList"];
 sys_post post = (sys_post)ViewData["post"];
}

效果图：