jQuery扩展+xml实现表单验证功能的方法
本文实例讲述了jQuery扩展+xml实现表单验证功能的方法。分享给大家供大家参考，具体如下：
此处表单验证jQuery 引用jquery.1.8.2.js,md5.js
扩展提示信息,扩展验证方法(如果有正则表达式的话可以用默认方法)
String.prototype.trim=function(){return this.replace(/(^\s*)|(\s*$)/g,"");};//ie下解决trim 方法问题
(function($) {
$.elementVal = new Array();
/**
********************************************************************************************************************************************
* ========自定义提示语==============================================================================================================
* ========regex、如果有正则表达式的话===============================================================================================
* ========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位字符(字母或数字),区分大小写"
},
_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){
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 : {// 机构名称验证
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 : "此邮箱已经注册,请更换邮箱！"};
return $.utilfun.showPrompt(num, obj,msg);
}
}
},
_phone:{
vf:function(obj){//验证手机号的唯一性
if($.verification._def.vf(obj)){//先验证格式
var params={type:3,value:obj.val};
var num=$.utilfun.ajaxvf("/registeruserverify.go",params);
var msg={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);//获取提示信息
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) {// 正则表达式验证
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) {// 根据表单的属性创建json对象以便以调用
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) {// 把需要验证的表单元素加到数组中
$.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){//给错误的表单元素添加锚点
$("#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) {// 执行验证方法
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;
};
//获取节点
$.getnode=function(key,obj){
var nodevalue=obj.children(key).text();
return nodevalue;
};
}(jQuery));
调用方式
<!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>
<!-- 锚点 -->
<a id="aaa" name="aaa"></a>
<!-- 锚点 -->
<div id="content">
<div class="content_top">
<div class="register_jigou">机构用户注册</div>
<div class="content_top_login">我已经注册，现在就<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">机构简称：</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">组织机构代码：</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">机构类别：</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>密码确认：</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>手机：</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>联系地址：</span>
<div class="item_input fl">
<input id="reg_homeaddress" name="LXDZ" type="text" value="朝阳区" 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>职务：</span>
<div class="item_input fl">
<input id="reg_duty" name="ZW" type="text" value="开发" 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>
<!-- 表单结束 -->
<a href="#aaa" id="point"></a>
</div>
<div id="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程序设计有所帮助。
赞 (0)
相关推荐
-
jquery表单验证插件（jquery.validate.js）的3种使用方式
jquery 验证非常简单,下面总结常用的三种方式: 第一种方式:也是比较标准的方式: 首先引入jquery 插件和 jquery 验证插件: 第一步:引入插件 复制代码 代码如下: <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="js/jq
-
jQuery 表单验证扩展代码(一)
再次申明,插件问题比较多,后期一个个来解决,请不要恶言相向.希望各位多多提好的建议善言. 一. 分析表单验证的基本情况 在我们做web开发的过程中,会遇到各种各样的验证.归纳一下基本可以分为一下几类: (1). 是否必填项 [这个是非常基本的] (2). 输入参数中的范围校验 (3). 输入参数与另外一个控件值的比较 (4). 输入的参数正则表达式验证 二. 是否必填项验证 有如下几种情况: (1) 输入框获得焦点提示 (2)输入框失去焦点验证错误提示 (3)输入框失去焦点验证正确提示 首先确定
-
jQuery 表单验证插件formValidation实现个性化错误提示
其效果图如下:使用说明 需要使用jQuery库文件和formValidation库文件[下载实例代码] http://jquery.com/ 同时需要自定义显示提示错误信息的CSS样式 使用实例 一,包含文件部分 复制代码 代码如下: <script src="jquery.js" type="text/javascript"></script> <script src="jquery.validationEngine.js&
-
jQuery+ajax读取并解析XML文件的方法
本文实例讲述了jQuery+ajax读取并解析XML文件的方法.分享给大家供大家参考,具体如下: ajax.xml: <?xml version="1.0" encoding="UTF-8"?> <stulist> <student email="1@1.com"> <name>zhangsan</name> <id>1</id> </student>
-
jQuery 表单验证扩展(四)
周末写的 jQuery 表单验证扩展(三) 这篇文章点击率过低,不知道是文章太失水准还是什么其他原因,这里写文章只是为了分享一下自己写代码的心得,同时也是巩固自己所学的东西!如果文章中存在问题,请大家多多斧正!本篇文章介绍jQuery 表单验证扩展中的控件值的比较 (一). 存在的问题 这篇文章和第一篇中提到的控件值之间的比较没有多大的区别,唯一更近的就是在样式的处理.同时就是对代码进行了简化.但是这里还是单独拿出来讲解一下,此文非常简单,所以不会有大篇幅的讲解. (二). 参数介绍 onFoc
-
jQuery解析XML 详解及方法总结
XML和HTML都是标记语言,语法形式非常相似,同属于一个语言体系.对于HTML的解析,我是使用jQuery非常方便,其实,我们也可以用jquery解析XML,也是同样的方便. 如果你用过Java.PHP等语言解析过XML,相信会跟我有相同的感觉,那就是很麻烦.改用jQuery来读取.分析.操作XML后,给人意想不到的轻松感.下面我们来看看使用jQuery处理XML文件的几种形式方法. 使用JavaScript常规方法解析XML var xmlDoc = request.responseXML;
-
jquery validate.js表单验证的基本用法入门
这里转载一篇前辈写的文章,在我自己的理解上修改了一下,仅作记录. 先贴一个国内某大公司的代码: 复制代码 代码如下: <script type="text/javascript"> function lang(key) { mylang = { 'ls_input_myb': '请输入您的账户', 'ls_myb_email': '漫游币账户为邮箱地址', 'ls_login_password': '请输入您的登录密码', 'ls_password_length': '密码
-
jQuery 表单验证扩展(三)
在看这篇文章之前, 可以看看前两篇文章,表单验证输入范围验证是在原有的基础上改写的. (一). 输入范围验证存在问题 在第二篇上提到的问题,在原有的验证中也存在相同的问题.当然在这次改写中也解决了一些这些问题.同时也添加了对radio,checkbox,select 元素的验证.当然对于时间的验证仍没有解决,后续过程中会继续补充! (二). 验证参数的设计 onEmptyText: 当输入内容为空的时候显示文本 onEmptyClass: 当输入内容为空的时候显示样式 onSuccessText
-
jQuery 表单验证扩展代码(二)
一. 存在的问题 在上篇中我已经提到过,验证提示打算用文本和样式两种方式来显示提示消息,这两种提示都只能单独使用,于是新的跟新内容做了一些扩展,使得两者可以共用.前一篇写的是否必填项这个验证只是正对 Text, TextArea 这两个表单元素,在新的扩展中同时也支持了radio,checkbox 两个元素. 二. 验证参数的设计 基于多重选择的考虑,扩展了一些有必要的参数,参数列表如下: required: 是否为必填项,true 和 false ,true 表示为必填项 (*) onFocu
-
jQuery基于xml格式数据实现模糊查询及分页功能的方法
本文实例讲述了jQuery基于xml格式数据实现模糊查询及分页功能的方法.分享给大家供大家参考,具体如下: 1.此代码只支持xml 格式数据,根据不同需求修改ajax的success方法就ok了 2.此代码只是针对ajax只需一次请求的情况下 String.prototype.trim=function(){return this.replace(/(^\s*)|(\s*$)/g,"");};//解决ie trim问题 (function($) { /** * ============
-
基于Bootstrap+jQuery.validate实现Form表单验证
基于Bootstrap jQuery.validate Form表单验证实践项目结构 : github 上源码地址:https://github.com/starzou/front-end-example 1.form 表单代码[html] 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>Bootstrap Form Template</title>
-
jquery表单验证使用插件formValidator
1.首先在项目中添加必备js与css 2.代码中添加引用(必备引用) 复制代码 代码如下: <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <!--jquery必须库--> <script src="formValidator1/formValidator-4.0.1.min.js" type=&quo