首页 / JAVA / java开发之js网页校验
java开发之js网页校验
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了java开发之js网页校验，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5948字，纯文字阅读大概需要9分钟。
内容图文
在web开发中，我们经常需要进行用户的输入校验，因此产生了下面的一个js插件：
控件源码：
//网页输入校验工具
//version：2.0
//作者：潘攀(1871870808@qq.com)
//时间：2012-10-10
//需要依赖：jquery-1.7.2.js
//支持校验类型：不为空、数字、非数字、邮箱、最大长度、最小长
度、起始字符、终止字符、AJAX验证
//显示错误信息
//obj 校验失败的控件对象
//msg 错误信息
function showErr(obj,msg){
//假设页面中不存在与当前控件"name"属性相同的控件的
时候，隐藏之前的错误提示
hideErr(obj);
// var offset = obj.offset();
// var left = offset.left+obj.width()+10;
// var div = document.createElement('<div
id="errDiv'+obj.prop("validateId")+'" style="z-
index:2000;position: absolute;left:'+left
+'px;top:'+offset.top+'px;color:black;width:">');
// var img = document.createElement('<img
id="errImg'+obj.prop("validateId")+'"
src="/rdfweb/mysoftlife/view/images/flag.png" style="z-
index:3000;left:'+left+'px;top:'+(offset.top
+5)+'px;width:10px;height:13px;position:absolute;">');
// var span = document.createElement('<span
id="errSpan'+obj.prop("validateId")+'" style="z-
index:2000;padding:5px;margin-left:-5px;border:1px solid
#92c85a;left:'+(left+14)+'px;top:'+offset.top
+'px;background-color:#f5fcee;font-
size:9pt;position:absolute;">');
// span.innerHTML=msg;
// document.body.appendChild(div);
// document.body.appendChild(img);
// document.body.appendChild(span);
// var span = $("<span>").html(msg);
$(obj).after($("<span style='color:red;margin-
left:20px;' id='err"+$(obj).attr("validateId")+"'>"+msg
+"</span>"));
}
//隐藏错误信息
//obj 校验失败的控件对象
function hideErr(obj){
errorCount--;
var validateId = obj.attr("validateId");
$("#err"+validateId).remove();
}
$(function(){
getValidate();
});
//给当前页面绑定验证函数
function getValidate(){
//初始化参数
input=0;
errors = 0;
//设置表单拦截
interceptForm("false");
//隐藏所有错误信息
hideAllErr();
//文本框校验
$("input[type=text],input
[type=password],textarea").each(function(){
$(this).attr("validateId",input+"");
input++;
//按键按下时调用检查函数
$(this).keyup(function(){
boundProp($(this));
});
//失去焦点时也调用检查函数
$(this).blur(function(){
boundProp($(this));
});
}
);
}
var errorCount = 0;
function boundProp(obj){
//不为空
if(setProp(obj,"notnull",obj.val()=="",obj.attr
("notnull"),"不能为空！")) return;
//不为纯数字
if(setProp(obj,"notnum",isDigit(obj.val
()),obj.attr("notnum"),"不能是纯数字！")) return;
//只能是数字
if(setProp(obj,"num",!isDigit(obj.val
()),obj.attr("num"),"只能是数字！")) return;
//起始字符校验
if(setProp(obj,"startwith",obj.val().indexOf
(obj.attr("startwith"))!=0,"只能以"+obj.attr
("startwith")+"开头！","")) return;
//终止字符校验
if(setProp(obj,"endwith",obj.val().indexOf
(obj.attr("endwith"))!=obj.val().length,"只能以"+obj.attr
("endwith")+"结尾！")) return;
//邮箱地址
if(setProp(obj,"email",!checkMail(obj.val
()),obj.attr("email"),"邮箱格式不正确！")) return;
//字母开头
if(setProp(obj,"letterStart",!letterStart
(obj.val()),obj.attr("letterStart"),"只能以字母开头！"))
return;
//密码参照校验
if(setProp(obj,"refer",obj.val()!=$("#"+obj.attr
("refer")).val(),"两次密码不一致！","")) return;
//最大长度
if(setProp(obj,"max",lengthOf(obj.val())>eval
(obj.attr("max")),"最多输入"+obj.attr("max")+"个字
符,"+parseInt(obj.attr("max")/2)+"个汉字！","")) return;
//最小长度
if(setProp(obj,"min",lengthOf(obj.val())
>0&&lengthOf(obj.val())<eval(obj.attr("min")),"最少输
入"+obj.attr("min")+"个字符,","")) return;
//以上判断都通过，即隐藏错误信息
//ajax验证
var str = obj.val();
var params;
if(obj.attr("ajax")!=null) {
params = obj.attr("ajax").split(",");
//校验地址
var url = params[0];
//后台接受参数的名字
var keywordName = params[1];
//后台判定通过回传的字符串
var correctStr = params[2];
//验证失败的提示语句
var msg = params[3];
$.ajax({
url:url,
data:keywordName+"="+obj.val(),
dataType:"text",
success:function(data){
if(setProp(obj,"ajax",data!
=correctStr,msg,"校验失败，已存在！")) return;
}
});
}
hideErr(obj);
}
//检查表单是否可提交
function checkSub(form,callback){
//重新绑定页面校验，避免使用js动态添加控件的时候检
测不到
getValidate();
//遍历表单的输入框和输入域，检查表单是否所有输入都
已合法
checkForm(form);
if(errors==0){
if(callback){
callback();
return false;
}
return true;
}else{
return false;
}
}
//检查表单
function checkForm(form){
//先取消表单拦截，如果校验失败，拦截会再次加上
interceptForm("true");
//遍历
form.find("input[type=text],input
[type=password],textarea").each(function(){
if($(this).attr("notnull")!=null||
$(this).attr("num")!=null||$(this).attr("notnum")!
=null||$(this).attr("max")!=null||$(this).attr("min")!
=null||$(this).attr("email")!=null){
// $(this).attr("name",""+input);
// input++;
$(this).keyup();
}
});
}
//
//设置表单拦截
function interceptForm(flag){
$("form").each(function(){
$(this).attr("subFlag",flag);
});
}
//错误数量，用作标识出第一个出错的位置
var errors = 0;
//页面中需要监控的输入控件的数量
var input = 0;
//设置监控属性
function setProp(obj,prop,flag,msg,defaultMsg){
if(obj.attr(prop)!=null&&flag){
if(msg==""){
msg=defaultMsg;
}
if(errors==0){
//使第一个校验失败的控件获取焦点
obj.focus();
//控件获取焦点后，若控件不在当前显
示屏幕内，
//页面会自动找到控件，显示在最顶端
//让滚动条上移200像素，使控件靠近
屏幕中央
document.documentElement.scrollTop =
document.documentElement.scrollTop - 200;
}
errors++;
showErr(obj,msg);
//出错，拦截表单提交
interceptForm("false");
return true;
}
return false;
}
//隐藏所有错误信息
function hideAllErr(){
var errs = $("span");
for(var i=0;i<errs.length;i++){
if(errs.id!=null&&errs.id.indexOf("err")
>-1){
$(errs[i]).remove();
}
}
}
//验证输入参数是否是数字
function isDigit(s)
{
var patrn=/^[0-9]{1,20}$/;
if (!patrn.exec(s)) return false
return true
}
//验证邮箱
function checkMail(mail) {
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0
-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (filter.test(mail)) return true;
else {
return false;
}
}
//以字母开头
function letterStart(str){
var filter = /^[a-zA-z]/;
if (filter.test(str)) return true;
else {
return false;
}
}
function lengthOf(str){
var strlen = 0;
for(var i = 0;i < str.length;i++)
{
if(str.charCodeAt(i) > 128){
strlen += 2;
}else{
strlen++;
}
}
return strlen;
}
内容总结
以上是互联网集市为您收集整理的java开发之js网页校验全部内容，希望文章能够帮你解决java开发之js网页校验所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】