https://github.com/1456745460/my_validate_publish/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表单校验插件</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="layer/layer.js"></script>
<script type="text/javascript" src="js/my_validate_1.1.js"></script>
</head>
<body>
<form action="192.168.0.28:8080/test/HelloWorld.action" method="post" id="formId">
<table border="1" cellspacing="1" cellpadding="1">
<tr>
<th colspan="2">表单校验插件</th>
<th width="200px"></th>
</tr>
<tr>
<td>*用户名：</td>
<td><input type="text" id="uname" name="uname" style="width: 233px;"></td>
<td><span id="tuname"></span></td>
</tr>
<tr>
<td>*密码：</td>
<td><input type="password" id="pswd" name="pswd" style="width: 233px;"></td>
<td><span id="tpswd"></span></td>
</tr>
<tr>
<td>*确认密码：</td>
<td><input type="password" id="pswd2" style="width: 233px;"></td>
<td><span id="tpswd2"></span></td>
</tr>
<tr>
<td>*年龄：</td>
<td><input type="text" id="age" name="age" style="width: 233px;"></td>
<td><span id="tage"></span></td>
</tr>
<tr>
<td>*性别：</td>
<td>男：<input type="radio" id="sex1" name="sex" checked="checked"> 女：<input type="radio" id="sex2" name="sex"></td>
<td><span id="tsex"></span></td>
</tr>
<tr>
<td>*简介：</td>
<td><textarea id="mainBody" rows="10" cols="30" name="mainBody"></textarea></td>
<td><span id="tmainBody"></span></td>
</tr>
</table>
<button type="button" id="subId">提交</button>
</form>
</body>
<script>
function checkJson() {
var checkJson = [{
id: "uname",
tid: "tuname",
rules: [{
reg: zz.notNull(),
tips: "用户名不能为空"
}, {
longest: "10",
shortest: "2",
tips: "用户名长度限制在2-10个字符"
}]
},
{
id: "pswd",
tid: "tpswd",
rules: [{
reg: zz.notNull(),
tips: "密码不能为空"
}]
}, {
id: "pswd2",
tid: "tpswd2",
rules: [{
custom: checkPswd,
tips: "两次密码输入不一致"
}]
}, {
id: "age",
tid: "tage",
rules: [{
reg: zz.notNull(),
tips: "年龄不能为空"
}, {
reg: zz.ffzs(),
tips: "请输入正确的年龄"
}]
}, {
id: "mainBody",
tid: "tmainBody",
rules: [{
reg: zz.notNull(),
tips: "简介不能为空"
}, {
longest: "10",
shortest: "0",
tips: "简介长度限制在10个字符以内"
}]
}
];
return checkJson;
}
function checkPswd() {
if($("#pswd").val() == $("#pswd2").val()) {
return true;
} else {
return false;
}
}
// 提交特殊参数
function specialData() {
var fileData={nihao:"你好"};
var circulaterData={woyehao:"我也好"};
return {
'fileData': JSON.stringify(fileData),
'circulaterData': JSON.stringify(circulaterData)
};
}
$(function() {
$().my_validate({
subId: "subId", // 提交按钮 id
formId: "formId", // form 表单 id
ifAjax: true, // 是否使用ajax 提交 true/false/ 跨域ajax jsonp
realTime: true, // 实时 onblur 校验 true/false
ifLayer: true, // 是否 使用 layer true/false
ifImg: true, // 提示语 是否使用感叹号图标 true/false
ImgUrl: "img/error.png", // 感叹号图标url地址
AutoScroll:[true,270], // 第一个不通过校验的文本框，自动滚动到该位置 true/false ,第二个参数，距离顶部像素
submitSpecialData: true // ajax提交时，另外加的特殊参数,true/false 写一个 function specialData(){return {'a':'asd','b':'sdf'}}
});
});
</script>
</html>;
(function($) { // 开启沙箱模式
$(function() {
var CanSubmit = true; // 是否可以提交开关
$.fn.my_validate = function(obj) {
var subId = obj["subId"];
var formId = obj["formId"];
var ifAjax = obj["ifAjax"]!=undefined?obj["ifAjax"]:false;
var realTime = obj["realTime"]!=undefined?obj["realTime"]:true;
var ifLayer = obj["ifLayer"]!=undefined?obj["ifLayer"]:false;
var ifImg = obj["ifImg"]!=undefined?obj["ifImg"]:false;
var ImgUrl = obj["ImgUrl"]!=undefined?obj["ImgUrl"]:false;
var submitSpecialData = obj["submitSpecialData"]!=undefined?obj["submitSpecialData"]:false;
var AutoScroll=obj["AutoScroll"]!=undefined?obj["AutoScroll"]:[false,0];
if(document.getElementById(subId) == null) {
alert("subId配置错误!!!");
return false;
}
if(document.getElementById(formId) == null) {
alert("formId配置错误!!!");
return false;
}
var myJSON = checkJson();
if(realTime) { // 实时的校验
var nowTime=new Date().getTime();
$("#" + formId).addClass('myValidateForm_'+nowTime);
for(var i = 0; i < myJSON.length; i++) {
$("#" + myJSON[i].id).addClass("vali_"+nowTime);
}
$(".myValidateForm_"+nowTime+" .vali_"+nowTime).on('blur', function() {
var t = $(this);
layer.closeAll();
for(var i = 0; i < myJSON.length; i++) {
if(t.attr("id") == myJSON[i].id) {
var getId = t.attr("id");
var val = $("#" + getId).val();
eachVali(val, i);
}
}
})
}
// 检验函数
function eachVali(val, i) {
var ScrollCount=0;
for(var j = 0; j < myJSON[i].rules.length; j++) {
// 校验不通过提示函数
function errorTips(str) {
if(ifLayer) {
layer.tips(str, "#" + myJSON[i].id, {
tipsMore: true
});
} else {
if(ifImg){
$("#" + myJSON[i].tid).html("<img src='"+ImgUrl+"'>"+str);
}else{
$("#" + myJSON[i].tid).html(str);
}
}
if(AutoScroll&&ScrollCount==0){
$("html, body").animate({scrollTop: $("#" + myJSON[i].id).offset().top-obj["AutoScroll"][1] },0);
ScrollCount++;
}
CanSubmit = false;
}
// 校验通过,如果没用layer 提示,置空校验错误提示
function removeHtml() {
$("#" + myJSON[i].tid).html("");
}
// 第一种,正则校验
if(typeof(myJSON[i].rules[j].reg) != 'undefined') {
// 在判断是否为空
if(myJSON[i].rules[j].reg.toString() == "/^.+$/") {
if(myJSON[i].rules[j].reg.test(val)) {
removeHtml();
} else {
errorTips(myJSON[i].rules[j].tips);
break;
}
} else {
if(myJSON[i].rules[j].reg.test(val) && val != "") {
removeHtml();
} else {
errorTips(myJSON[i].rules[j].tips);
break;
}
}
}
// 第二种,长度校验
else if(typeof(myJSON[i].rules[j].longest) != 'undefined') {
if(val.length > parseInt(myJSON[i].rules[j].longest) || val.length < parseInt(myJSON[i].rules[j].shortest)) {
errorTips(myJSON[i].rules[j].tips);
break;
} else {
removeHtml();
}
}
// 第三种,自定义校验
else if(typeof(myJSON[i].rules[j].custom) != 'undefined') {
if(!myJSON[i].rules[j].custom()) {
errorTips(myJSON[i].rules[j].tips);
break;
} else {
removeHtml();
}
}
// 以上情况都不存在,书写有误
else {
CanSubmit = false;
alert("校验json配置错误!!!");
break;
}
}
}
// 点击提交按钮
$("#" + subId).on('click', function() {
CanSubmit = true;
layer.closeAll();
for(var i = 0; i < myJSON.length; i++) {
var getId = myJSON[i].id;
var val = $("#" + getId).val();
eachVali(val, i);
}
if(CanSubmit) {
// ajax 提交
if(ifAjax) {
var mydata = '';
if(submitSpecialData) {
mydata = $.param(specialData()) + '&' + $("#" + formId).serialize();
} else {
mydata = $("#" + formId).serialize();
}
$.ajax({
url: $("#" + formId).attr("action"),
type: $("#" + formId).attr("method"),
data: mydata,
dataType: "json",
success: function(data) {
getAjax(data);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
console.log("ajax 提交表单报错了! 错误代码:" + XMLHttpRequest.status);
}
});
}
// 表单 提交
else if(ifAjax == false) {
$("#" + formId).submit();
}
// 跨域ajax 提交
else if(ifAjax == 'jsonp') {
$.ajax({
url: $("#"+formId).attr("action"),
type: "get",
data: $("#"+formId).serialize(),
dataType: "jsonp",
jsonp: "jsoncallback",
success: function(data) {
getAjax(data);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
console.log("ajax 跨域 提交表单报错了! 错误代码:" + XMLHttpRequest.status);
}
});
}
}
});
}
});
// 快捷调用常用正则
zz = { // 定义一个 名为 zz 的方法,在这里添加常用正则, 例如 zz.notNull() 调用
notNull: function() {
return /^.+$/;
},
// 不能为空
chinese: function() {
return /^[\u4e00-\u9fa5]+$/;
}, // 中文
email: function() {
return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
}, // 邮箱
post: function() {
return /^[1-9][0-9]{0,}$/;
}, //邮政编码
num: function() {
return /^[0-9]*$/;
}, // 数字
ffzs: function() {
return /^\d+$/;
}, // 非负整数
aBc123: function() {
return /^[A-Za-z0-9]+$/;
}, //数字和英文
mobile: function() {
return /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
}, //手机号
tel: function() {
return /^1[0-9]{10}$/;
}, // 手机号
fax: function() {
return /^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$/;
} //传真
}
})(jQuery);
// @且听风吟
1844
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
