当前位置:Gxlcms > JavaScript > JS实现支持Ajax验证的表单插件_javascript技巧

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

时间:2021-07-01 10:21:17 帮助过:5人阅读

本文为大家分享了一个表单验证插件,支持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"];
}

效果图:

以上就是本文的全部内容,希望对大家的学习有所帮助。

人气教程排行