web前端|js教程
javascript,表单验证
web前端-js教程
自己编写了一个表单验证插件，支持ajax验证，使用起来很简单。
linux 服务器源码查看器,安装ubuntu的书籍,怎么看tomcat被占用,世界最大爬虫,php教程项目实战学习,seo 车春霖lzw
每个需要验证的表单元素下面有一个span标签，这个标签的class有一个valid表示需要验证，如果有nullable则表示可为空；rule表示验证规则，msg表示错误提示信息；to表示要验证的元素的name值，如果元素是单个的，to可以不写。该插件会遍历每个有valid的span标签，找出它前面需要验证的元素，根据rule验证，如果验证不通过，则显示边框为红色，鼠标放在元素上时显示错误信息。
ios ui源码,vscode gui框架,小米盒子安装ubuntu有用吗,tomcat11036,c sqlite多维表,导航插件报错,前端用js用什么框架,推荐python爬虫的书,php 字符串html,介休seo推广,佛教 网站模板,网页禁止右键 复制,html5网页登录模板免费下载lzw
验证时机：1、点击提交按钮时显式调用验证方法；2、当元素触发blur时验证。
支付宝付款码源码,pe环境安装ubuntu,北京金融公司爬虫,php linux 输出,vue在seolzw
插件代码：
CSS：
.failvalid{ border: solid 2px red !important;}
JS：
/*** suxiang* 12月22日* 验证插件*/SimpoValidate = { //验证规则 rules: { int: /^[1-9]\d*$/, number: /^[+-]?\d*\.?\d+$/ }, //初始化 init: function () { $(".valid").each(function () { //遍历span if ($(this)[0].tagName.toLowerCase() == "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 () { SimpoValidate.ajaxCheckResult = true; var bl = true; $(".valid").each(function () { //遍历span if ($(this)[0].tagName.toLowerCase() == "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 && SimpoValidate.ajaxCheckResult; }, //单个验证，验证成功返回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"); var ajaxAction = validSpan.attr("ajaxAction"); 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;} } if (ajaxAction) {SimpoValidate.ajaxCheck(target, val, ajaxAction); } } 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;} } if (ajaxAction) {SimpoValidate.ajaxCheck(target, val, ajaxAction); } } } return true; }, ajaxCheckResult: true, ajaxCheck: function (target, value, ajaxAction) { var targetName = target.attr("name"); var data = new Object(); data[targetName] = value; $.ajax({ url: ajaxAction, type: "POST", data: data, async: false, success: function (data) { if (data.data == true) {SimpoValidate.removehilight(target); } else {SimpoValidate.ajaxCheckResult = false;SimpoValidate.hilight(target, data.data); } } }); }, //获取验证规则 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; z-index:99999; left: 0; top: 0; background-color: #dceaf2; padding: 3px; border: solid 1px #6dbde4; visibility: hidden; line-height:20px; font-size:12px;"; $("body").append("
" + text + "
"); 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();});
如何使用：
Edit页面：
@using Model.Suya;@{ ViewBag.Title = "Add"; Layout = "~/Views/Shared/_Layout.cshtml";}@{ List postList = (List)ViewData["postList"]; sys_post post = (sys_post)ViewData["post"];} $(function () { //部门树 $(#dept).combotree({ url: GetDeptTree, required: false, checkbox: true, onLoadSuccess: function () { $(#dept).combotree(setValue, "@(post.depCode)"); } }); //操作结果 $("#ifrm").load(function (data) { var data = eval("(" + $("#ifrm").contents().find("body").html() + ")"); alert(data.msg); if (data.ok) back(); }); $("select[name=postLevel]").find("option[value=@(post.postLevel)]").attr("selected", "selected"); }); //保存 function save() { if (valid()) { $("#frm").submit(); } } //验证 function valid() { var dept = $("input[name=dept]"); if (!dept.val()) { SimpoValidate.hilight(dept.parent(), "请选择所属部门"); } else { SimpoValidate.removehilight(dept.parent()); } return SimpoValidate.valid(); } //返回 function back() { parent.$(#ttTab).tabs(select, "岗位管理"); var tab = parent.$(#ttTab).tabs(getSelected); tab.find("iframe").contents().find("#btnSearch").click(); parent.$("#ttTab").tabs(close, 修改岗位信息); }
基础信息
效果图：
以上所述就是本文的全部内容了，希望大家能够喜欢。
