jQuery擴(kuò)展+xml實現(xiàn)表單驗證功能的方法
更新時間：2016年12月25日 09:37:18 作者：碉堡貓
這篇文章主要介紹了jQuery擴(kuò)展+xml實現(xiàn)表單驗證功能的方法,涉及jQuery操作xml格式數(shù)據(jù)及表單驗證相關(guān)操作技巧,需要的朋友可以參考下
本文實例講述了jQuery擴(kuò)展+xml實現(xiàn)表單驗證功能的方法。分享給大家供大家參考，具體如下：
此處表單驗證jQuery 引用jquery.1.8.2.js,md5.js
擴(kuò)展提示信息,擴(kuò)展驗證方法(如果有正則表達(dá)式的話可以用默認(rèn)方法)
String.prototype.trim=function(){return this.replace(/(^\s*)|(\s*$)/g,"");};//ie下解決trim 方法問題
(function($) {
$.elementVal = new Array();
/**
********************************************************************************************************************************************
* ========自定義提示語==============================================================================================================
* ========regex、如果有正則表達(dá)式的話===============================================================================================
* ========successMsg、驗證成功時====================================================================================================
* ========errorMsg、驗證失敗時======================================================================================================
* promptMsg、提示語=================================================================================================================***********************
**/
$.vfData = {
errorhtml:'<img src="images/cuo_biao.png"> ',
successhtml:'<img src="images/dui_biao.png" /> ',
pormpthtml:'<img src="images/tishi_biao.png"> ',
_null : {
//successMsg : "",
errorMsg : "不能為空！",
promptMsg : "不能為中文"
},
_firstpwd:{
regex:/^[a-z0-9_-]{6,18}$/,
//successMsg : "",
errorMsg : "密碼格式不正確！",
promptMsg : "6-16位字符(字母或數(shù)字),區(qū)分大小寫"
},
_code:{
regex:/^[a-z0-9_-]{6,18}$/,
//successMsg : "",
errorMsg : "機(jī)構(gòu)代碼不正確！",
promptMsg : "機(jī)構(gòu)代碼為自填項！"
},
_secondpwd:{
//successMsg : "",
errorMsg : "兩次密碼不一致！,請確保初次密碼格式正確",
promptMsg : "請再次輸入密碼"
},
_email : {
regex:/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
//successMsg : "",
errorMsg : "郵箱地址格式不正確！",
promptMsg : "郵箱格式為www@xxx.com"
},
_companyname : {
//successMsg : "",
errorMsg : "沒有你輸入的機(jī)構(gòu)！",
promptMsg : "請在所在的機(jī)構(gòu)中選擇"
},
_phone:{
regex :/^1[3|4|5|8][0-9]\d{4,8}$/,
successMsg : "",
errorMsg : "你輸入的手機(jī)號格式不正確！",
promptMsg : "輸入你的的手機(jī)號碼！"
},
_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位字符(字母、數(shù)字、漢字),首位必須為字母,區(qū)分大小寫"
},
_captcha:{
regex:/^[a-z0-9A-Z]{4}$/,
successMsg : "",
errorMsg : "你輸入的驗證碼格式不正確！",
promptMsg : "請輸入驗證碼！"
}
};
/**
* ============================================================================================================================
* =========自定義驗證方法驗證方法==============================================================================================
* ============================================================================================================================
* */
$.firstpwd="";
$.verification = {
// 提示信息 0:正常、1:錯誤 、2:提示
_def:{//如果沒有自定義的驗證的話直接調(diào)用就可以了$.verification._def(obj);
vf:function(obj){
var num = 0;
if ($.utilfun.regexcheck(obj)) {
num = 0;
} else {
num = 1;
}
return $.utilfun.showPrompt(num, obj);
}
},
_null : {//判斷是否為空
vf:function(obj){
var num=0;
if(obj.val.trim() == ""){
num=1;
}
return $.utilfun.showPrompt(num, obj,$.vfData["_null"]);
}
},
//===================================================需要特殊判斷的=================================================================
_companyname : {// 機(jī)構(gòu)名稱驗證
vf : function(obj) {
var num = 1;
for(var key in $.indexdata){
if(obj.val.trim()==key){
num=0;
break;
}
}
return $.utilfun.showPrompt(num, obj);
}
},
_firstpwd:{
vf : function(obj) {
var num = 0;
if ($.utilfun.regexcheck(obj)) {
$.firstpwd=obj.val;
num = 0;
}else{
num=1;
}
return $.utilfun.showPrompt(num, obj);
}
},
_secondpwd:{
vf : function(obj) {
var num = 0;
var md5val=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)){//先驗證格式
var params={type:1,value:obj.val};
var num=$.utilfun.ajaxvf("/registeruserverify.go",params);
var msg={errorMsg : "用戶名已存在！"};
return $.utilfun.showPrompt(num, obj,msg);
}
}
},
_email : {
vf : function(obj) {//校驗郵箱的的唯一性
if($.verification._def.vf(obj)){//先驗證格式
var params={type:2,value:obj.val};
var num=$.utilfun.ajaxvf("/registeruserverify.go",params);
var msg={errorMsg : "此郵箱已經(jīng)注冊,請更換郵箱！"};
return $.utilfun.showPrompt(num, obj,msg);
}
}
},
_phone:{
vf:function(obj){//驗證手機(jī)號的唯一性
if($.verification._def.vf(obj)){//先驗證格式
var params={type:3,value:obj.val};
var num=$.utilfun.ajaxvf("/registeruserverify.go",params);
var msg={errorMsg : "此手機(jī)號已經(jīng)注冊,請更換手機(jī)號！"};
return $.utilfun.showPrompt(num, obj,msg);
}
}
},
//===================================================能夠直接用正則表達(dá)式判斷的=====================================================
_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);//獲取提示信息
var formElement = $("#" + obj.id).parent().parent().find("p");
try {
switch (re) {
case 0:
formElement.html($.vfData.successhtml+(vfData.successMsg==null?"":vfData.successMsg));
return true;
case 1:
formElement.css("color", "red");
formElement.html($.vfData.errorhtml+vfData.errorMsg+"<a id='"+obj.id+"' name='"+obj.id+"'></a>");
return false;
case 2:
formElement.css("color", "green");
formElement.html($.vfData.pormpthtml+vfData.promptMsg);
break;
default:
formElement.html("");
return true;
}
} catch (e) {
}
},
regexcheck : function(obj) {// 正則表達(dá)式驗證
var regex = $.vfData[obj.fun].regex;
if (regex == null)
return false;
regex = new RegExp(regex);
return regex.test(obj.val.trim());
return regex.test(obj.val);
},
createElementJson : function(obj) {// 根據(jù)表單的屬性創(chuàng)建json對象以便以調(diào)用
var json = eval("({'val':'" + obj.val() + "'," + "'id':'"
+ obj.attr("id") + "'," + "'regex':'" + obj.attr("regex")
+ "'," + "'fun':'" + obj.attr("fun") + "','must':'"
+ obj.attr("must") + "'})");
return json;
},
getFormElement : function(obj) {// 把需要驗證的表單元素加到數(shù)組中
$.elementVal = new Array();
obj.find("input[id*='reg_']").each(function() {
$.elementVal.push($.utilfun.createElementJson($(this)));
});
},
verification : function() {// 遍歷驗證
var size = $.elementVal.length;
var vfresult=true;
for (var i = size - 1; i >= 0; i--) {
var elementJson = $.elementVal[i];
var elementvfresult=$.utilfun.doverification(elementJson);
console.info(elementJson.id);
if(!elementvfresult){//給錯誤的表單元素添加錨點(diǎn)
$("#point").attr("href","#"+elementJson.id);
}
vfresult=vfresult&&elementvfresult;
}
return vfresult;
},
evalmodth : function(obj) {
var funpakger = "$.verification.";
var thispakger = obj.fun;
var thismodth = ".vf(obj)";
var themodth = funpakger + thispakger + thismodth;
return eval(themodth);
},
doverification : function(obj) {// 執(zhí)行驗證方法
if(obj.must == "true"){//為必填項時
var valisnull=$.verification._null.vf(obj);
if(valisnull&&obj.fun != "undefined"){//如果有驗證方法的話
if($.utilfun.defaultverification(obj)){
return $.utilfun.evalmodth(obj);
}
}else {
if(obj.val.trim()==""){
return false;
}else{
return true;
}
}
}else{//不為必填項時
if(obj.fun != "undefined"){//如果有驗證方法的話
if(obj.val.trim()!=""){
if($.utilfun.defaultverification(obj)){
return $.utilfun.evalmodth(obj);
}
}else{
$.utilfun.showPrompt(3, obj,$.vfData["_null"]);
return true;
}
}else{
return true;
}
}
},
defaultverification : function(obj) {// 必須驗證的方法
var vfresult = true;
// vfresult = $.verification._null.vf(obj);//添加每個表單必須檢驗的方法
return vfresult;
},
ajaxvf:function(url,params){//需要接口請求驗證的
var num=0;
$.ajax({
type :"post",
url : url,
dataType:"xml",
async : false,
data : params,
// contentType : "application/x-www-form-urlencoded; charset=utf-8",
success:function(data){
var xmlobj= $.xml(data);
var result= $.getnode("CODE",xmlobj.find("RETURNINFO"));
if("0"!=result){
num=1;
}
}
});
return num;
}
};
/**
* ===============================================================================================================
* ========== 驗證入口 =================================================================================
* ===============================================================================================================
*
* */
$.fn.regattrs = function() {
$.utilfun.getFormElement($(this));
var vfresult=$.utilfun.verification();
if(vfresult){
$(this).submit();
}else{
$("#point")[0].click();
}
};
/*
* 單個驗證
*/
$.fn.regattr = function() {
$(this).blur(function() {
var elementJson = $.utilfun.createElementJson($(this));
$.utilfun.doverification(elementJson);
});
$(this).find("input[type!='password']").keyup(function() {
var elementJson = $.utilfun.createElementJson($(this));
$.utilfun.doverification(elementJson);
});
};
/*
* 獲取光表時提示
*/
$.fn.prompt = function() {
$(this).focus(function() {
var elementJson = $.utilfun.createElementJson($(this));
if (elementJson.must) {
$.utilfun.showPrompt(2, elementJson);
}
});
};
/**
* ===============================================================================================================
* ========== 解決xml加載問題 =================================================================================
* ===============================================================================================================
*
* */
$.xml=function(data){
var xmlobj=null;
if(window.ActiveXObject){
var xml;
xml = new ActiveXObject("Microsoft.XMLDOM");
xml.async = false;
xml.loadXML(data);
xmlobj=$(xml);
}else{
xmlobj=$(data);
}
return xmlobj;
};
//獲取節(jié)點(diǎn)
$.getnode=function(key,obj){
var nodevalue=obj.children(key).text();
return nodevalue;
};
}(jQuery));
調(diào)用方式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>表單驗證</title>
=====引入=======表單驗證 js
</head>
<body>
<!-- 錨點(diǎn) -->
<a id="aaa" name="aaa"></a>
<!-- 錨點(diǎn) -->
<div id="content">
<div class="content_top">
<div class="register_jigou">機(jī)構(gòu)用戶注冊</div>
<div class="content_top_login">我已經(jīng)注冊，現(xiàn)在就<a href="/zzlc/jsp/login/login.jsp">登錄</a></div>
</div>
<!-- 表單開始 -->
<form id="regform" method="post" action="/userregister.go">
<div class="form_item">
<span class="label fl">機(jī)構(gòu)簡稱：</span>
<div class="item_input fl">
<input disabled="disabled" autocomplete="off" id="reg_companysimplename" name="JGJC_SV" type="text" class="text" />
<input type="hidden" autocomplete="off" id="reg_companysimplename_form" name="JGJC_SV"/>
</div>
<p class="dui fl"></p>
</div>
<div class="form_item">
<span class="label fl">組織機(jī)構(gòu)代碼：</span>
<div class="item_input fl">
<input disabled="disabled" autocomplete="off" id="reg_companycode" name="ZZJGDM_SV" type="text" class="text" />
<input type="hidden" autocomplete="off" id="reg_companycode_form" name="ZZJGDM_SV"/>
<a name="ZCDZ_SV"></a>
</div>
<p class="cuo fl"></p>
</div>
<div class="form_item">
<span class="label fl">機(jī)構(gòu)類別：</span>
<div class="item_input fl" >
<input disabled="disabled" autocomplete="off" id="reg_companytype" name="DWLX_SV" type="text" class="text"/>
<input type="hidden" autocomplete="off" id="reg_companytype_form" name="DWLX_SV"/>
</div>
<p class="dui fl"></p>
</div>
<div class="form_item">
<span class="label fl">注冊地址：</span>
<div class="item_input fl">
<input disabled="disabled" autocomplete="off" id="reg_regaddress" name="ZCDZ_SV" type="text" class="text" />
<input type="hidden" autocomplete="off" id="reg_regaddress_form" name="ZCDZ_SV"/>
</div>
<p class="dui fl"></p>
</div>
<h3>個人信息</h3>
<div class="form_item">
<span class="label fl"><b>*</b>登錄名：</span>
<div class="item_input fl">
<input id="reg_loginname" fun="_loginname" value="wangjunadmin" name="YHM" must="true" type="text" class="text" />
</div>
<p class="dui fl"></p>
</div>
<input id="YHMM" value="" type="hidden" name="YHMM"></input>
<div class="form_item">
<span class="label fl"><b>*</b>登錄密碼：</span>
<div class="item_input fl">
<input id="reg_pwd" autocomplete="off" value="" type="password" fun="_firstpwd" must="true" class="text" />
</div>
<p class="dui fl"></p>
</div>
<div class="form_item">
<span class="label fl"><b>*</b>密碼確認(rèn)：</span>
<div class="item_input fl">
<input md5="" autocomplete="off" id="reg_secondpwd" value="" fun="_secondpwd" must="true" type="password" class="text" />
</div>
<p class="dui fl"></p>
</div>
<div class="form_item">
<span class="label fl"><b>*</b>姓名：</span>
<div class="item_input fl">
<input name="XM" id="reg_name" value="" must="true" type="text" class="text" />
</div>
<p class="dui fl"></p>
</div>
<div class="form_item">
<span class="label fl"><b>*</b>性別：</span>
<div class="item_input fl" style="text-align: center;">
<input type="hidden" class="text" value="男" name="XB_SV" id="XB_SV"/>
<select name="XB" id="reg_sex">
<option value="1">男</option>
<option value="2">女</option>
</select>
</div>
<p class="dui fl"></p>
</div>
<div class="form_item">
<span class="label fl"><b>*</b>電話：</span>
<div class="item_input fl">
<input name="DH" must="true" value="010-888888888" id="reg_tel" fun="_tel" type="text" class="text" />
</div>
<p class="dui fl"></p>
</div>
<div class="form_item">
<span class="label fl"><b>*</b>手機(jī)：</span>
<div class="item_input fl">
<input name="PHONE" must="true" value="18610740826" id="reg_phone" fun="_phone" type="text" class="text" />
</div>
<p class="dui fl"></p>
</div>
<div class="form_item">
<span class="label fl"><b>*</b>電子郵箱：</span>
<div class="item_input fl">
<input id="reg_email" fun="_email" value="wj_dreamfly@163.com" name="MAIL" must="true" type="text" class="text" />
</div>
<p class="dui fl"></p>
</div>
<div class="form_item">
<span class="label fl"><b>*</b>聯(lián)系地址：</span>
<div class="item_input fl">
<input id="reg_homeaddress" name="LXDZ" type="text" value="朝陽區(qū)" must="true" class="text" />
</div>
<p class="dui fl"></p>
</div>
<div class="form_item">
<span class="label fl"><b>*</b>部門：</span>
<div class="item_input fl">
<input id="reg_emp" name="BM" type="text" value="信息部" must="true" class="text" />
</div>
<p class="dui fl"></p>
</div>
<div class="form_item">
<span class="label fl"><b>*</b>職務(wù)：</span>
<div class="item_input fl">
<input id="reg_duty" name="ZW" type="text" value="開發(fā)" must="true" class="text" />
</div>
<p class="dui fl"></p>
</div>
<div class="form_item">
<span class="label fl" style="color:#FFF">。</span>
<div class="login_btn fl">
<a href="javascript:void(0)" id="submit">
<span style="width:270px; line-height:3em; text-align: center; background-image:url(images/regbut1216.png); display:block;color: white; ">提交</span>
</a>
</div>
</div>
</form>
<!-- 表單結(jié)束 -->
<a href="#aaa" id="point"></a>
</div>
<div id="footer"></div>
</body>
</html>
$(document).ready(function() {
$("#point").click();//用錨點(diǎn)自動定位第一個驗證失敗的表單
$("#submit").click(function() {//提交按鈕
$("#regform").regattrs();//注冊方法自動驗證表單中所有的元素
});
$("input").regattr();//失去光標(biāo)時驗證
$("input").prompt();//獲取光標(biāo)是提示信息
});
PS：這里再為大家提供幾款關(guān)于xml操作的在線工具供大家參考使用：
在線XML/JSON互相轉(zhuǎn)換工具：
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
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery操作xml技巧總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
您可能感興趣的文章:
- jQuery 表單驗證擴(kuò)展(四)
- jQuery 表單驗證擴(kuò)展(三)
- jQuery 表單驗證擴(kuò)展代碼(二)
- jQuery 表單驗證擴(kuò)展代碼(一)
- jquery validate.js表單驗證的基本用法入門
- jquery表單驗證使用插件formValidator
- 基于Bootstrap+jQuery.validate實現(xiàn)Form表單驗證
- jQuery 表單驗證插件formValidation實現(xiàn)個性化錯誤提示
- jquery表單驗證插件（jquery.validate.js）的3種使用方式
- jQuery基于xml格式數(shù)據(jù)實現(xiàn)模糊查詢及分頁功能的方法
- jQuery解析XML 詳解及方法總結(jié)
- jQuery+ajax讀取并解析XML文件的方法
相關(guān)文章
本文給大家介紹的是一種檢測返回值的數(shù)據(jù)類型的方法，有需要的小伙伴可以參考下。2015-07-07
Javascript 鏈?zhǔn)秸{(diào)用實現(xiàn)代碼(參考jquery)
謂的鏈?zhǔn)秸{(diào)用無非是一個語法技巧而已，我就學(xué)Jquery寫了一個粗淺的庫。2010-05-05
這篇文章主要介紹了jQuery中的類名選擇器（.class）用法,簡單介紹了jQuery類名選擇器的概念、原理并結(jié)合實例形式分析了類選擇器的簡單使用方法,需要的朋友可以參考下2018-05-05
這篇文章主要為大家詳細(xì)介紹了jquery實現(xiàn)具有嵌套功能的選項卡的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-02-02
jQuery的animate函數(shù)學(xué)習(xí)記錄
jQuery.animate的每種動畫過渡效果都是通過easing函數(shù)實現(xiàn)的，下面是自己研究之后對其的基本認(rèn)識2014-08-08
jQuery+Ajax+PHP彈出層異步登錄效果(附源碼下載)
本文我們給大家介紹如何使用jQuery+Ajax+PHP彈出層異步登錄的應(yīng)用。感興趣的朋友通過本文學(xué)習(xí)吧2016-05-05
給jqGrid數(shù)據(jù)行添加修改和刪除操作鏈接（之一）
我這里用的不是jqGrid的自帶的編輯和刪除操作，我已經(jīng)把分頁導(dǎo)航欄下的編輯，刪除，搜索都取消掉了2011-11-11
打造基于jQuery的高性能TreeView(asp.net)
項目中經(jīng)常會遇到樹形數(shù)據(jù)的展現(xiàn)，包括導(dǎo)航，選擇等功能，所以樹控件在大多項目中都是必須的。那一個實用的樹應(yīng)該具備什么功能呢？2011-02-02
要想使用該jQuery插件，需要把$(selector).boxy();放在document.ready中。2011-02-02
這篇文章主要介紹了jquery輪播的實現(xiàn)方式，文中分享了jQuery輪播完整實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-07