碉堡猫 通过本文主要向大家介绍了jQuery扩展,xml,表单验证等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
本文实例讲述了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;