不用jquery插件，自己用jquery写的表单验证！
例如：让用户输入：用户名、密码、确认密码等。不采用formValidator等这样的插件，自己手写出来的表单验证模式！求大仙们给我写一个demo
[解决办法]
(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
});
});
$.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
});
})(jQuery);
//***************************************************************************************************************************************************
//利用JQuery功能对标签属性设置表达式
//传入的标签ID组必须为"name1:name2:name3"中间用':'分隔.
//对所有需要整数验证的标签进行设置正则表达式
function setIntegeCheck(validatorString) {
var validatorStrings = "";
if (validatorString != "") {
validatorStrings = validatorString.split(":");
for (i = 0; i < validatorStrings.length; i++) {
$("#" + validatorStrings[i]).attr("reg", "^[1-9]\\d*$");
}
}
}
//对所有需要金额验证的标签进行设置正则表达式
function setMoneyCheck(validatorString) {
var validatorStrings = "";
if (validatorString != "") {
validatorStrings = validatorString.split(":");
for (i = 0; i < validatorStrings.length; i++) {
$("#" + validatorStrings[i]).attr("reg", "^(-)?(([1-9]{1}\\d*)
[解决办法]
([0]{1}))(\\.(\\d){1,2})?$");
}
}
}
//对所有需要正浮点验证的标签进行设置正则表达式
function setFloatCheck(validatorString) {
var validatorStrings = "";
if (validatorString != "") {
validatorStrings = validatorString.split(":");
for (i = 0; i < validatorStrings.length; i++) {
$("#" + validatorStrings[i]).attr("reg", "^[0-9]+\\.[0-9]+$");
}
}
}
//对所有需要电子邮件验证的标签进行设置正则表达式
function setMailCheck(validatorString) {
var validatorStrings = "";
if (validatorString != "") {
validatorStrings = validatorString.split(":");
for (i = 0; i < validatorStrings.length; i++) {
$("#" + validatorStrings[i]).attr("reg", "^\\w+((-\\w+)
[解决办法]
(\\.\\w+))*\\@[A-Za-z0-9]+((\\.
[解决办法]
-)[A-Za-z0-9]+)*\\.[A-Za-z0-9]+$");
}
}
}
//对所有需要邮编验证的标签进行设置正则表达式
function setZipcodeCheck(validatorString) {
var validatorStrings = "";
if (validatorString != "") {
validatorStrings = validatorString.split(":");
for (i = 0; i < validatorStrings.length; i++) {
$("#" + validatorStrings[i]).attr("reg", "^\\d{6}$");
}
}
}
//对所有需要手机验证的标签进行设置正则表达式
function setMobileCheck(validatorString) {
var validatorStrings = "";
if (validatorString != "") {
validatorStrings = validatorString.split(":");
for (i = 0; i < validatorStrings.length; i++) {
$("#" + validatorStrings[i]).attr("reg", "^(13
[解决办法]
15)[0-9]{9}$");
}
}
}
//对所有需要身份证验证的标签进行设置正则表达式
function setIDCheck(validatorString) {
var validatorStrings = "";
if (validatorString != "") {
validatorStrings = validatorString.split(":");
for (i = 0; i < validatorStrings.length; i++) {
$("#" + validatorStrings[i]).attr("reg", "^[1-9]([0-9]{14}
[解决办法]
[0-9]{17})$");
}
}
}
//对所有需要登录帐号验证的标签进行设置正则表达式
function setUserIDCheck(validatorString) {
var validatorStrings = "";
if (validatorString != "") {
validatorStrings = validatorString.split(":");
for (i = 0; i < validatorStrings.length; i++) {
$("#" + validatorStrings[i]).attr("reg", "^\\w+$");
}
}
}
//对所有需要非空验证的标签进行设置正则表达式
function setEmptyCheck(validatorString) {
var validatorStrings = "";
if (validatorString != "") {
validatorStrings = validatorString.split(":");
for (i = 0; i < validatorStrings.length; i++) {
$("#" + validatorStrings[i]).attr("reg", '.*\\S.*');
}
}
}
//对所有需要中文验证的标签进行设置正则表达式
function setChineseCheck(validatorString) {
var validatorStrings = "";
if (validatorString != "") {
validatorStrings = validatorString.split(":");
for (i = 0; i < validatorStrings.length; i++) {
$("#" + validatorStrings[i]).attr("reg", "^[\\u4E00-\\u9FA5\\uF900-\\uFA2D]+$");
}
}
}
//对所有需要URL验证的标签进行设置正则表达式
function setURLCheck(validatorString) {
var validatorStrings = "";
if (validatorString != "") {
validatorStrings = validatorString.split(":");
for (i = 0; i < validatorStrings.length; i++) {
$("#" + validatorStrings[i]).attr("reg", "^http[s]?:\\/\\/([\\w-]+\\.)+[\\w-]+([\\w-./?%&=]*)?$");
}
}
}
//匹配国内电话号码(0511-4405222 或 021-87888822)
function setTell(validatorString) {
var validatorStrings = "";
if (validatorString != "") {
validatorStrings = validatorString.split(":");
for (i = 0; i < validatorStrings.length; i++) {
$("#" + validatorStrings[i]).attr("reg", "\\d{3}-\\d{8}
[解决办法]
\\d{4}-\\d{7}");
}
}
}