不用jquery插件,自己用jquery写的表单验证! 例如:让用户输入:用户名、密码、确认密码等。不采用formValidator等这样的插件,自己手写出来的表单验证模式!求大仙们给我写一个demo 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 我自己写了一个通过XML方式 配置来实现 的XML如下<?xml version="1.0" encoding="utf-8" ?><Root> <Data Name="Product"> <Item Name="SKU" IsNull="true" Reg="" Tip="必填项,不能为空"></Item> <Item Name="Mobile" IsNull="true" Reg="^\d{11,}$" Tip="必填项,请输入合法的手机号码" ></Item> <Item Name="ProductName" IsNull="false" Reg="^\d{5,}$" Tip="非必填项,长度必须大于5位" ></Item> </Data></Root> (function ($) { $(document).ready(function () { $('body').append('<table id="tipTable" class="tableTip"><tr><td class="leftImage"></td> <td class="contenImage" align="left"></td> <td class="rightImage"></td></tr></table>'); var dataName = "Product"; var checkSubmit = (function () { $.ajax({ url: "validate.xml", dataType: "xml", type: 'get', error: function (xml) { alert('Error loading XML document' + xml); }, success: function (xml) { $(xml).find("Data[Name='" + dataName + "']").find("Item").each(function () { var name = $(this).attr("Name"); var isNull = $(this).attr("IsNull"); var reg = $(this).attr("Reg"); var tip = $(this).attr("Tip"); //给对应的元素添加focus事件以及blur事件 $("#" + name).mouseover(function () { if (tip != "") { $('#tipTable').css({ left: $.getLeft(this) + 'px', top: $.getTop(this) + 'px' }); $('.contenImage').html(tip); $('#tipTable').fadeIn("fast"); // settipTableOut(name); } }).blur(function () { //根据具体的逻辑判断当前 元素是否输入正确 //如果不允许为空 if (isNull == "true") { //如果条件不允许为这且值为空 if ($("#" + name).val() == "") { settipTableOut(name); } else { //如果条件不允许为空且值也不为空 if (reg != "") { //表示需要启动正则进行验证 var regex = new RegExp(reg); if (!regex.test($("#" + name).val())) { //错误提示 settipTableOut(name); } else { //去除样式 settipTableIn(name); } } else { settipTableIn(name); } } } else { //如果条件为空,且reg 不为空则表示要验证 if ($("#" + name).val() != "" && reg != "") { var regex = new RegExp(reg); if (!regex.test($("#" + name).val())) { //错误提示 settipTableOut(name); } else { settipTableIn(name); } } else { settipTableIn(name); } } }); }); } }); }); var settipTableOut = (function (name) { $("#" + name).removeClass('tooltipinputok').addClass('tooltipinputerr'); $('#tipTable').fadeOut("fast"); }); var settipTableIn = (function (name) { $("#" + name).removeClass('tooltipinputerr').addClass('tooltipinputok'); }); checkSubmit("Product"); $("form").submit(function () { $.ajax({ url: "validate.xml", dataType: "xml", type: 'get', error: function (xml) { alert('Error loading XML document' + xml); }, success: function (xml) { var isSubmit = true; $(xml).find("Data[Name='" + dataName + "']").find("Item").each(function () { var name = $(this).attr("Name"); var isNull = $(this).attr("IsNull"); var reg = $(this).attr("Reg"); var tip = $(this).attr("Tip"); readXmlStatus = true; //给对应的元素添加focus事件以及blur事件 if (tip != "") { $('#tipTable').css({ left: $.getLeft(this) + 'px', top: $.getTop(this) + 'px' }); $('.contenImage').html(tip); $('#tipTable').fadeIn("fast"); // settipTableOut(name); } //根据具体的逻辑判断当前 元素是否输入正确 //如果不允许为空 if (isNull == "true") { //如果条件不允许为这且值为空 if ($("#" + name).val() == "") { settipTableOut(name); isSubmit = false; } else { //如果条件不允许为空且值也不为空 if (reg != "") { //表示需要启动正则进行验证 var regex = new RegExp(reg); if (!regex.test($("#" + name).val())) { //错误提示 settipTableOut(name); isSubmit = false; } else { //去除样式 settipTableIn(name); } } else { settipTableIn(name); } } } else { //如果条件为空,且reg 不为空则表示要验证 if ($("#" + name).val() != "" && reg != "") { var regex = new RegExp(reg); if (!regex.test($("#" + name).val())) { //错误提示 settipTableOut(name); isSubmit = false; } else { settipTableIn(name); } } else { settipTableIn(name); } } }); if (isSubmit == true) alert("可以提交表单"); else { alert("不可以提交表单"); } } }); return false; }); $.extend({ getWidth: function (object) { return object.offsetWidth; }, getLeft: function (object) { var go = object; var oParent, oLeft = go.offsetLeft; while (go.offsetParent != null) { oParent = go.offsetParent; oLeft += oParent.offsetLeft; go = oParent; } return oLeft; }, getTop: function (object) { var go = object; var oParent, oTop = go.offsetTop; while (go.offsetParent != null) { oParent = go.offsetParent; oTop += oParent.offsetTop; go = oParent; } return oTop + $(object).height() + 5; }, onsubmit: true }); }); js空链接 javascript:void(null) 在IE6下会弹出窗口? ActiveX 认证的问题.. 小问题,路过的朋友帮忙看下 验证字符串 我想在图片上实现右键,左健时执行不同的函数,并屏掉在图片上右键上的系统默认菜单 在js中怎么格式化段落,段落是从数据库里读出来的 怎么点一个超链接后回到前一页 如何读取框架页面信息? open是打开窗口,如何让要open的页面在本页打开 应该没出错啊,怎么运行不了? jquery.infinitescroll.min.js 实现图片瀑布流 无限刷新 iframe里的DIV能遮住父层 高手帮个忙!
XML如下<?xml version="1.0" encoding="utf-8" ?>
<Root>
<Data Name="Product">
<Item Name="SKU" IsNull="true" Reg="" Tip="必填项,不能为空"></Item>
<Item Name="Mobile" IsNull="true" Reg="^\d{11,}$" Tip="必填项,请输入合法的手机号码" ></Item>
<Item Name="ProductName" IsNull="false" Reg="^\d{5,}$" Tip="非必填项,长度必须大于5位" ></Item>
</Data>
</Root>
$(document).ready(function () {
$('body').append('<table id="tipTable" class="tableTip"><tr><td class="leftImage"></td> <td class="contenImage" align="left"></td> <td class="rightImage"></td></tr></table>');
var dataName = "Product";
var checkSubmit = (function () {
$.ajax({
url: "validate.xml",
dataType: "xml",
type: 'get',
error: function (xml) {
alert('Error loading XML document' + xml);
},
success: function (xml) { $(xml).find("Data[Name='" + dataName + "']").find("Item").each(function () {
var name = $(this).attr("Name"); var isNull = $(this).attr("IsNull");
var reg = $(this).attr("Reg");
var tip = $(this).attr("Tip");
//给对应的元素添加focus事件以及blur事件
$("#" + name).mouseover(function () {
if (tip != "") {
$('#tipTable').css({ left: $.getLeft(this) + 'px', top: $.getTop(this) + 'px' });
$('.contenImage').html(tip);
$('#tipTable').fadeIn("fast");
// settipTableOut(name);
}
}).blur(function () {
//根据具体的逻辑判断当前 元素是否输入正确
//如果不允许为空
if (isNull == "true") {
//如果条件不允许为这且值为空
if ($("#" + name).val() == "") { settipTableOut(name); } else {
//如果条件不允许为空且值也不为空
if (reg != "") {
//表示需要启动正则进行验证 var regex = new RegExp(reg);
if (!regex.test($("#" + name).val())) {
//错误提示
settipTableOut(name); } else {
//去除样式
settipTableIn(name);
}
} else {
settipTableIn(name);
}
} } else {
//如果条件为空,且reg 不为空则表示要验证
if ($("#" + name).val() != "" && reg != "") {
var regex = new RegExp(reg);
if (!regex.test($("#" + name).val())) {
//错误提示
settipTableOut(name); } else {
settipTableIn(name);
}
} else {
settipTableIn(name);
}
}
});
});
}
}); });
var settipTableOut = (function (name) {
$("#" + name).removeClass('tooltipinputok').addClass('tooltipinputerr');
$('#tipTable').fadeOut("fast"); });
var settipTableIn = (function (name) {
$("#" + name).removeClass('tooltipinputerr').addClass('tooltipinputok');
}); checkSubmit("Product");
$("form").submit(function () { $.ajax({
url: "validate.xml",
dataType: "xml",
type: 'get',
error: function (xml) {
alert('Error loading XML document' + xml);
},
success: function (xml) {
var isSubmit = true;
$(xml).find("Data[Name='" + dataName + "']").find("Item").each(function () {
var name = $(this).attr("Name");
var isNull = $(this).attr("IsNull");
var reg = $(this).attr("Reg");
var tip = $(this).attr("Tip");
readXmlStatus = true;
//给对应的元素添加focus事件以及blur事件
if (tip != "") {
$('#tipTable').css({ left: $.getLeft(this) + 'px', top: $.getTop(this) + 'px' });
$('.contenImage').html(tip);
$('#tipTable').fadeIn("fast");
// settipTableOut(name);
} //根据具体的逻辑判断当前 元素是否输入正确
//如果不允许为空
if (isNull == "true") {
//如果条件不允许为这且值为空
if ($("#" + name).val() == "") {
settipTableOut(name);
isSubmit = false;
} else {
//如果条件不允许为空且值也不为空
if (reg != "") {
//表示需要启动正则进行验证
var regex = new RegExp(reg);
if (!regex.test($("#" + name).val())) {
//错误提示
settipTableOut(name);
isSubmit = false;
} else {
//去除样式
settipTableIn(name);
}
} else {
settipTableIn(name);
}
} } else {
//如果条件为空,且reg 不为空则表示要验证
if ($("#" + name).val() != "" && reg != "") {
var regex = new RegExp(reg);
if (!regex.test($("#" + name).val())) {
//错误提示
settipTableOut(name);
isSubmit = false;
} else {
settipTableIn(name);
}
} else {
settipTableIn(name);
}
}
}); if (isSubmit == true)
alert("可以提交表单");
else {
alert("不可以提交表单");
}
}
});
return false;
}); $.extend({
getWidth: function (object) {
return object.offsetWidth;
}, getLeft: function (object) {
var go = object;
var oParent, oLeft = go.offsetLeft;
while (go.offsetParent != null) {
oParent = go.offsetParent;
oLeft += oParent.offsetLeft;
go = oParent;
}
return oLeft;
}, getTop: function (object) {
var go = object;
var oParent, oTop = go.offsetTop;
while (go.offsetParent != null) {
oParent = go.offsetParent;
oTop += oParent.offsetTop;
go = oParent;
}
return oTop + $(object).height() + 5;
}, onsubmit: true
});
});