哈哈 手工馒头好吃，今天小编跟大家分享手工js表单验证代码，感兴趣的朋友快来吧。
因为是自定义样式，所以兼容所有浏览器版本，个人认为非常漂亮：网址wuxi.rongzi.com
css
前台：
js:
function submitOneClickApply() {
var username = $("#userName").val();
if (username == "" || username == "请输入您的姓名") {
$("#userName").rzAlertTips({ flagInfo: \'请输入联系人\', isAnimate: true });
}调用的js:
(function ($) {
jQuery.fn.extend({
rzAlertTips: function (settings) {
$(this).each(function () {
//初始化配置信息
var options = jQuery.extend({
flagCss: "tip",
flagWidth: $(this).outerWidth(),
flagInfo: $(this).attr("title"),
isAnimate: false
},
settings);
if (!options.flagInfo) {
return;
}
$(this).removeAttr("title");
var obj = $(this);
var oToolTip = null;
var fun_show = function () {
//设置提示信息最小宽度为
options.flagWidth = "auto"; // (parseInt(options.flagWidth) < ) ? : parseInt(options.flagWidth);+ "px"
var oTip = $("
");
var oPointer = $("
");
var oTipInfo = $("
" + options.flagInfo + "
").attr("class", options.flagCss).css("width", options.flagWidth);
//合并提示信息
oToolTip = $(oTip).append(oTipInfo).append(oPointer);
if ($("#tipWrap_" + $(this).attr("id")).length > ) $("#tipWrap_" + $(this).attr("id")).remove();
//添加淡入效果
if (options.isAnimate) {
$(oToolTip).fadeIn("slow");
}
$(obj).after(oToolTip);
//计算提示信息的top、left和width //position.top
var position = $(obj).position();
var oTipTop = eval(position.top - $(oTip).outerHeight() - );
var oTipLeft = position.left;
$(oToolTip).css("top", oTipTop + "px").css("left", oTipLeft + "px");
};
fun_show();
$(\'.error\').removeClass(\'error\');
$(this).addClass("error");
setTimeout(function () { $(oToolTip).remove(); }, );
});
return this;
}
})(jQuery);
以上内容就是小编给大家分享的纯手写漂亮的表单验证，希望大家喜欢。
本文地址：https://www.stayed.cn/item/148
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我
