php好看的表单验证码,分享纯手写漂亮的表单验证

哈哈 手工馒头好吃，今天小编跟大家分享手工js表单验证代码，感兴趣的朋友快来吧。

因为是自定义样式，所以兼容所有浏览器版本，个人认为非常漂亮：网址wuxi.rongzi.com

css

/*tooltip*//* CSS属性顺序按照 字母首字母 排列*/

.ui-slider-tooltip{ background:#fa; border:px solid #fa; color:#fff; display: block; text-align: left; padding: px px px px; position: absolute; z-index:; }

.ui-corner-all { border-radius: px; -moz-border-radius-bottomleft:px; -moz-border-radius-bottomright:px; -moz-border-radius-topleft:px; -moz-border-radius-topright:px; -webkit-border-top-left-radius:px px; -webkit-border-top-right-radius:px px;-webkit-border-bottom-right-radius:px px; -webkit-border-bottom-left-radius:px px;}

.ui-tooltip-pointer-down { border-bottom-width: ; border-left: px dashed transparent; border-right: px dashed transparent; border-top: px solid #fa; bottom: -px; display: block; height:; left: %; margin-left: -px; position: absolute; width:;}

.ui-tooltip-pointer-down-inner { border-left: px dashed transparent; border-right: px dashed transparent; border-top: px solid #fa; left: -px; top: -px; position: absolute; }

.tip{ font-size:pt; line-height:px;}

.error{ border: px solid rgb(, , );}

前台：

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);

以上内容就是小编给大家分享的纯手写漂亮的表单验证，希望大家喜欢。