jQuery扩展+xml实现表单验证功能的方法
本文实例讲述了jQuery扩展+xml实现表单验证功能的方法。分享给大家供大家参考，具体如下：
此处表单验证jQuery引用jquery.1.8.2.js,md5.js
扩展提示信息,扩展验证方法(如果有正则表达式的话可以用默认方法)
String.prototype.trim=function(){returnthis.replace(/(^\s*)|(\s*$)/g,"");};//ie下解决trim方法问题
(function($){
$.elementVal=newArray();
/**
********************************************************************************************************************************************
*========自定义提示语==============================================================================================================
*========regex、如果有正则表达式的话===============================================================================================
*========successMsg、验证成功时====================================================================================================
*========errorMsg、验证失败时======================================================================================================
*promptMsg、提示语=================================================================================================================***********************
**/
$.vfData={
errorhtml:'<imgsrc="images/cuo_biao.png">',
successhtml:'<imgsrc="images/dui_biao.png"/>',
pormpthtml:'<imgsrc="images/tishi_biao.png">',
_null:{
//successMsg:"",
errorMsg:"不能为空！",
promptMsg:"不能为中文"
},
_firstpwd:{
regex:/^[a-z0-9_-]{6,18}$/,
//successMsg:"",
errorMsg:"密码格式不正确！",
promptMsg:"6-16位字符(字母或数字),区分大小写"
},
_code:{
regex:/^[a-z0-9_-]{6,18}$/,
//successMsg:"",
errorMsg:"机构代码不正确！",
promptMsg:"机构代码为自填项！"
},
_secondpwd:{
//successMsg:"",
errorMsg:"两次密码不一致！,请确保初次密码格式正确",
promptMsg:"请再次输入密码"
},
_email:{
regex:/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
//successMsg:"",
errorMsg:"邮箱地址格式不正确！",
promptMsg:"邮箱格式为www@xxx.com"
},
_companyname:{
//successMsg:"",
errorMsg:"没有你输入的机构！",
promptMsg:"请在所在的机构中选择"
},
_phone:{
regex:/^1[3|4|5|8][0-9]\d{4,8}$/,
successMsg:"",
errorMsg:"你输入的手机号格式不正确！",
promptMsg:"输入你的的手机号码！"
},
_tel:{
//regex:/^[0][1-9]{2,3}[-][1-9]{1}[0-9]{8}$/,
regex:/^[0-9]{3,4}[-]?[0-9]{9}$/,
successMsg:"",
errorMsg:"你输入的电话格式不正确！",
promptMsg:"格式固定例如010-88888888！"
},
_loginname:{
regex:/^[a-zA-Z]{1,1}[a-z0-9A-Z]{5,16}$/,
successMsg:"",
errorMsg:"你输入的用户名格式不正确！",
promptMsg:"6-12位字符(字母、数字、汉字),首位必须为字母,区分大小写"
},
_captcha:{
regex:/^[a-z0-9A-Z]{4}$/,
successMsg:"",
errorMsg:"你输入的验证码格式不正确！",
promptMsg:"请输入验证码！"
}
};
/**
*============================================================================================================================
*=========自定义验证方法验证方法==============================================================================================
*============================================================================================================================
**/
$.firstpwd="";
$.verification={
//提示信息0:正常、1:错误、2:提示
_def:{//如果没有自定义的验证的话直接调用就可以了$.verification._def(obj);
vf:function(obj){
varnum=0;
if($.utilfun.regexcheck(obj)){
num=0;
}else{
num=1;
}
return$.utilfun.showPrompt(num,obj);
}
},
_null:{//判断是否为空
vf:function(obj){
varnum=0;
if(obj.val.trim()==""){
num=1;
}
return$.utilfun.showPrompt(num,obj,$.vfData["_null"]);
}
},
//===================================================需要特殊判断的=================================================================
_companyname:{//机构名称验证
vf:function(obj){
varnum=1;
for(varkeyin$.indexdata){
if(obj.val.trim()==key){
num=0;
break;
}
}
return$.utilfun.showPrompt(num,obj);
}
},
_firstpwd:{
vf:function(obj){
varnum=0;
if($.utilfun.regexcheck(obj)){
$.firstpwd=obj.val;
num=0;
}else{
num=1;
}
return$.utilfun.showPrompt(num,obj);
}
},
_secondpwd:{
vf:function(obj){
varnum=0;
varmd5val=hex_md5(obj.val);
if($.firstpwd!=obj.val&&$.firstpwd!=""){
num=1;
}else{
$("#YHMM").val(md5val.toUpperCase());
}
return$.utilfun.showPrompt(num,obj);
}
},
_loginname:{//校验登录名的唯一性
vf:function(obj){
if($.verification._def.vf(obj)){//先验证格式
varparams={type:1,value:obj.val};
varnum=$.utilfun.ajaxvf("/registeruserverify.go",params);
varmsg={errorMsg:"用户名已存在！"};
return$.utilfun.showPrompt(num,obj,msg);
}
}
},
_email:{
vf:function(obj){//校验邮箱的的唯一性
if($.verification._def.vf(obj)){//先验证格式
varparams={type:2,value:obj.val};
varnum=$.utilfun.ajaxvf("/registeruserverify.go",params);
varmsg={errorMsg:"此邮箱已经注册,请更换邮箱！"};
return$.utilfun.showPrompt(num,obj,msg);
}
}
},
_phone:{
vf:function(obj){//验证手机号的唯一性
if($.verification._def.vf(obj)){//先验证格式
varparams={type:3,value:obj.val};
varnum=$.utilfun.ajaxvf("/registeruserverify.go",params);
varmsg={errorMsg:"此手机号已经注册,请更换手机号！"};
return$.utilfun.showPrompt(num,obj,msg);
}
}
},
//===================================================能够直接用正则表达式判断的=====================================================
_code:{
vf:function(obj){
return$.verification._def.vf(obj);
}
},
_captcha:{
vf:function(obj){
return$.verification._def.vf(obj);
}
},
_tel:{
vf:function(obj){
return$.verification._def.vf(obj);
}
}
};
/**
*=================================================================================================================================
*================公共方法=========================================================================================================
*=================================================================================================================================
*/
$.utilfun={
//显示提示信息
showPrompt:function(re,obj,vfData){
vfData=(vfData==null?$.vfData[obj.fun]
:vfData);//获取提示信息
varformElement=$("#"+obj.id).parent().parent().find("p");
try{
switch(re){
case0:
formElement.html($.vfData.successhtml+(vfData.successMsg==null?"":vfData.successMsg));
returntrue;
case1:
formElement.css("color","red");
formElement.html($.vfData.errorhtml+vfData.errorMsg+"<aid='"+obj.id+"'name='"+obj.id+"'></a>");
returnfalse;
case2:
formElement.css("color","green");
formElement.html($.vfData.pormpthtml+vfData.promptMsg);
break;
default:
formElement.html("");
returntrue;
}
}catch(e){
}
},
regexcheck:function(obj){//正则表达式验证
varregex=$.vfData[obj.fun].regex;
if(regex==null)
returnfalse;
regex=newRegExp(regex);
returnregex.test(obj.val.trim());
returnregex.test(obj.val);
},
createElementJson:function(obj){//根据表单的属性创建json对象以便以调用
varjson=eval("({'val':'"+obj.val()+"',"+"'id':'"
+obj.attr("id")+"',"+"'regex':'"+obj.attr("regex")
+"',"+"'fun':'"+obj.attr("fun")+"','must':'"
+obj.attr("must")+"'})");
returnjson;
},
getFormElement:function(obj){//把需要验证的表单元素加到数组中
$.elementVal=newArray();
obj.find("input[id*='reg_']").each(function(){
$.elementVal.push($.utilfun.createElementJson($(this)));
});
},
verification:function(){//遍历验证
varsize=$.elementVal.length;
varvfresult=true;
for(vari=size-1;i>=0;i--){
varelementJson=$.elementVal[i];
varelementvfresult=$.utilfun.doverification(elementJson);
console.info(elementJson.id);
if(!elementvfresult){//给错误的表单元素添加锚点
$("#point").attr("href","#"+elementJson.id);
}
vfresult=vfresult&&elementvfresult;
}
returnvfresult;
},
evalmodth:function(obj){
varfunpakger="$.verification.";
varthispakger=obj.fun;
varthismodth=".vf(obj)";
varthemodth=funpakger+thispakger+thismodth;
returneval(themodth);
},
doverification:function(obj){//执行验证方法
if(obj.must=="true"){//为必填项时
varvalisnull=$.verification._null.vf(obj);
if(valisnull&&obj.fun!="undefined"){//如果有验证方法的话
if($.utilfun.defaultverification(obj)){
return$.utilfun.evalmodth(obj);
}
}else{
if(obj.val.trim()==""){
returnfalse;
}else{
returntrue;
}
}
}else{//不为必填项时
if(obj.fun!="undefined"){//如果有验证方法的话
if(obj.val.trim()!=""){
if($.utilfun.defaultverification(obj)){
return$.utilfun.evalmodth(obj);
}
}else{
$.utilfun.showPrompt(3,obj,$.vfData["_null"]);
returntrue;
}
}else{
returntrue;
}
}
},
defaultverification:function(obj){//必须验证的方法
varvfresult=true;
//vfresult=$.verification._null.vf(obj);//添加每个表单必须检验的方法
returnvfresult;
},
ajaxvf:function(url,params){//需要接口请求验证的
varnum=0;
$.ajax({
type:"post",
url:url,
dataType:"xml",
async:false,
data:params,
//contentType:"application/x-www-form-urlencoded;charset=utf-8",
success:function(data){
varxmlobj=$.xml(data);
varresult=$.getnode("CODE",xmlobj.find("RETURNINFO"));
if("0"!=result){
num=1;
}
}
});
returnnum;
}
};
/**
*===============================================================================================================
*==========验证入口=================================================================================
*===============================================================================================================
*
**/
$.fn.regattrs=function(){
$.utilfun.getFormElement($(this));
varvfresult=$.utilfun.verification();
if(vfresult){
$(this).submit();
}else{
$("#point")[0].click();
}
};
/*
*单个验证
*/
$.fn.regattr=function(){
$(this).blur(function(){
varelementJson=$.utilfun.createElementJson($(this));
$.utilfun.doverification(elementJson);
});
$(this).find("input[type!='password']").keyup(function(){
varelementJson=$.utilfun.createElementJson($(this));
$.utilfun.doverification(elementJson);
});
};
/*
*获取光表时提示
*/
$.fn.prompt=function(){
$(this).focus(function(){
varelementJson=$.utilfun.createElementJson($(this));
if(elementJson.must){
$.utilfun.showPrompt(2,elementJson);
}
});
};
/**
*===============================================================================================================
*==========解决xml加载问题=================================================================================
*===============================================================================================================
*
**/
$.xml=function(data){
varxmlobj=null;
if(window.ActiveXObject){
varxml;
xml=newActiveXObject("Microsoft.XMLDOM");
xml.async=false;
xml.loadXML(data);
xmlobj=$(xml);
}else{
xmlobj=$(data);
}
returnxmlobj;
};
//获取节点
$.getnode=function(key,obj){
varnodevalue=obj.children(key).text();
returnnodevalue;
};
}(jQuery));
调用方式
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>
<title>表单验证</title>
=====引入=======表单验证js
</head>
<body>
<!--锚点-->
<aid="aaa"name="aaa"></a>
<!--锚点-->
<divid="content">
<divclass="content_top">
<divclass="register_jigou">机构用户注册</div>
<divclass="content_top_login">我已经注册，现在就<ahref="/zzlc/jsp/login/login.jsp">登录</a></div>
</div>
<!--表单开始-->
<formid="regform"method="post"action="/userregister.go">
<divclass="form_item">
<spanclass="labelfl">机构简称：</span>
<divclass="item_inputfl">
<inputdisabled="disabled"autocomplete="off"id="reg_companysimplename"name="JGJC_SV"type="text"class="text"/>
<inputtype="hidden"autocomplete="off"id="reg_companysimplename_form"name="JGJC_SV"/>
</div>
<pclass="duifl"></p>
</div>
<divclass="form_item">
<spanclass="labelfl">组织机构代码：</span>
<divclass="item_inputfl">
<inputdisabled="disabled"autocomplete="off"id="reg_companycode"name="ZZJGDM_SV"type="text"class="text"/>
<inputtype="hidden"autocomplete="off"id="reg_companycode_form"name="ZZJGDM_SV"/>
<aname="ZCDZ_SV"></a>
</div>
<pclass="cuofl"></p>
</div>
<divclass="form_item">
<spanclass="labelfl">机构类别：</span>
<divclass="item_inputfl">
<inputdisabled="disabled"autocomplete="off"id="reg_companytype"name="DWLX_SV"type="text"class="text"/>
<inputtype="hidden"autocomplete="off"id="reg_companytype_form"name="DWLX_SV"/>
</div>
<pclass="duifl"></p>
</div>
<divclass="form_item">
<spanclass="labelfl">注册地址：</span>
<divclass="item_inputfl">
<inputdisabled="disabled"autocomplete="off"id="reg_regaddress"name="ZCDZ_SV"type="text"class="text"/>
<inputtype="hidden"autocomplete="off"id="reg_regaddress_form"name="ZCDZ_SV"/>
</div>
<pclass="duifl"></p>
</div>
<h3>个人信息</h3>
<divclass="form_item">
<spanclass="labelfl"><b>*</b>登录名：</span>
<divclass="item_inputfl">
<inputid="reg_loginname"fun="_loginname"value="wangjunadmin"name="YHM"must="true"type="text"class="text"/>
</div>
<pclass="duifl"></p>
</div>
<inputid="YHMM"value=""type="hidden"name="YHMM"></input>
<divclass="form_item">
<spanclass="labelfl"><b>*</b>登录密码：</span>
<divclass="item_inputfl">
<inputid="reg_pwd"autocomplete="off"value=""type="password"fun="_firstpwd"must="true"class="text"/>
</div>
<pclass="duifl"></p>
</div>
<divclass="form_item">
<spanclass="labelfl"><b>*</b>密码确认：</span>
<divclass="item_inputfl">
<inputmd5=""autocomplete="off"id="reg_secondpwd"value=""fun="_secondpwd"must="true"type="password"class="text"/>
</div>
<pclass="duifl"></p>
</div>
<divclass="form_item">
<spanclass="labelfl"><b>*</b>姓名：</span>
<divclass="item_inputfl">
<inputname="XM"id="reg_name"value=""must="true"type="text"class="text"/>
</div>
<pclass="duifl"></p>
</div>
<divclass="form_item">
<spanclass="labelfl"><b>*</b>性别：</span>
<divclass="item_inputfl"style="text-align:center;">
<inputtype="hidden"class="text"value="男"name="XB_SV"id="XB_SV"/>
<selectname="XB"id="reg_sex">
<optionvalue="1">男</option>
<optionvalue="2">女</option>
</select>
</div>
<pclass="duifl"></p>
</div>
<divclass="form_item">
<spanclass="labelfl"><b>*</b>电话：</span>
<divclass="item_inputfl">
<inputname="DH"must="true"value="010-888888888"id="reg_tel"fun="_tel"type="text"class="text"/>
</div>
<pclass="duifl"></p>
</div>
<divclass="form_item">
<spanclass="labelfl"><b>*</b>手机：</span>
<divclass="item_inputfl">
<inputname="PHONE"must="true"value="18610740826"id="reg_phone"fun="_phone"type="text"class="text"/>
</div>
<pclass="duifl"></p>
</div>
<divclass="form_item">
<spanclass="labelfl"><b>*</b>电子邮箱：</span>
<divclass="item_inputfl">
<inputid="reg_email"fun="_email"value="wj_dreamfly@163.com"name="MAIL"must="true"type="text"class="text"/>
</div>
<pclass="duifl"></p>
</div>
<divclass="form_item">
<spanclass="labelfl"><b>*</b>联系地址：</span>
<divclass="item_inputfl">
<inputid="reg_homeaddress"name="LXDZ"type="text"value="朝阳区"must="true"class="text"/>
</div>
<pclass="duifl"></p>
</div>
<divclass="form_item">
<spanclass="labelfl"><b>*</b>部门：</span>
<divclass="item_inputfl">
<inputid="reg_emp"name="BM"type="text"value="信息部"must="true"class="text"/>
</div>
<pclass="duifl"></p>
</div>
<divclass="form_item">
<spanclass="labelfl"><b>*</b>职务：</span>
<divclass="item_inputfl">
<inputid="reg_duty"name="ZW"type="text"value="开发"must="true"class="text"/>
</div>
<pclass="duifl"></p>
</div>
<divclass="form_item">
<spanclass="labelfl"style="color:#FFF">。</span>
<divclass="login_btnfl">
<ahref="javascript:void(0)"id="submit">
<spanstyle="width:270px;line-height:3em;text-align:center;background-image:url(images/regbut1216.png);display:block;color:white;">提交</span>
</a>
</div>
</div>
</form>
<!--表单结束-->
<ahref="#aaa"id="point"></a>
</div>
<divid="footer"></div>
</body>
</html>
$(document).ready(function(){
$("#point").click();//用锚点自动定位第一个验证失败的表单
$("#submit").click(function(){//提交按钮
$("#regform").regattrs();//注册方法自动验证表单中所有的元素
});
$("input").regattr();//失去光标时验证
$("input").prompt();//获取光标是提示信息
});
PS：这里再为大家提供几款关于xml操作的在线工具供大家参考使用：
在线XML/JSON互相转换工具：
http://tools.jb51.net/code/xmljson
在线格式化XML/在线压缩XML：
http://tools.jb51.net/code/xmlformat
XML在线压缩/格式化工具：
http://tools.jb51.net/code/xml_format_compress
XML代码在线格式化美化工具：
http://tools.jb51.net/code/xmlcodeformat
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery操作xml技巧总结》、《jquery中Ajax用法总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。