温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

根据jquery.validate.js写的一个通用的form表单校验插件

发布时间:2020-06-01 11:56:27 来源:网络 阅读:1386 作者:panguixiang 栏目:web开发

就jquery.validate这个当前比较流行的form表单校验框架,自己学着对当前官网项目需求写了个注册的插件。

但这里我并不想说,自己的这个插件具体是如何实现的,我只是想回顾一下validate本身的一些性质
(1)jquery的extend方法
     这个方法很重要,它在实际js框架开发中可以为我们做出比较大的贡献,它的用法如下:
     validationData = jQuery.extend(validationData, newValidationData);
     这个意思就是合并validationData和newValidationData,如果newValidationData里拥有了validationData公共的部分,则会被newValidationData替换掉
     如果newValidationData里面有的而validationData没有则会合并到新的validationData里,这样我们在实际传参中就可以做到不固定,不限量的传参了。
下面为了更好的说明一些问题,我这里还是把我的插件贴出来,但是目的不是告诉你我写了一个多么强大牛叉的表单注册校验插件,而是想告诉大家一些validate
和jquery的用法(主要是看里面的注释)
/**
* 注册表单验证 插件
* formId 表单id
* @param formId
*/
/**
* error ajax

*/

jQuery.validator.addMethod("zznum", function(value, element) {

   return this.optional(element) || (/^[1-9]*[1-9][0-9]*$/.test(value));

 }, "只能输入正整数");

jQuery.validator.addMethod("fdnum2", function(value, element) {

   return this.optional(element) ||

     (/^(0|[1-9]\d*)$|^(0|[1-9]\d*)\.(\d{1,2})$/.test(value));

 }, "只能输入2位正浮点数");

jQuery.validator.addMethod("znum", function(value, element) {

   return this.optional(element) || (/^([1-9]\d{0,}|0)$/.test(value));

 }, "只能输入大于等于0的整数");

var defaultAjaxErrorMethod = function(XMLHttpRequest, textStatus, errorThrown) {
if(XMLHttpRequest.status != 406) {
alert(XMLHttpRequest.status);
} else {
       alert(jQuery.parseJSON(XMLHttpRequest.responseText).msg);
}
getValidateServlets();
};
/**
* 默认提交后ajax 200状态回调 success ajax
*/
var defaultAjaxCalbackMethod = function(data) {
$("#registerDivId").css("display", "none");
$("#registerSuccessDivId").css("display", "block");
$("#regName").text("用户名是:" + data.userName);
};
/**
* 默认 提交前错误回调
*/
var defaultValiErrorMethod = function(error,element){
$("#errorShowId").empty();
error.appendTo($("#errorShowId"));
var msg = $("#errorShowId").text();
var ele = $(element);
var s = ele.val();
if(msg.length!=0) {
if(ele.attr("type") != "checkbox") {
 ele.next().css("display","block");
         ele.css("display","none");
                ele.next().val(msg);
ele.next().bind("focus",fuc2=function(){
              ele.css("display","block");
          ele.next().css("display","none");
      ele.val(s);
      ele.next().unbind("focus",fuc2);
  ele.next().val("");
  ele.focus();
         });
}  else {
              alert(msg);
           }
}
};
/**
* 默认提交前 单个元素验证通过回调函数
*/
var defaultValiSucceMethod = function(label) {
};
/**
* 定义一些插件中需要用到的默认常量,这些东西都可以被覆盖,更可以添加新的进来(直接在引用页面里加就可以了)
*/
var validationData = {
regFormId : "#registgerFormId",//默认注册表单ID
ajaxUrl : "/register/quick",
userNameRemote : "/register/checkname", // 异步请求校验重复性路径
passwordId : "#passwordId",// 密码输入框Id 检测两次输入密码是否一致
userName : "input[name='username']", // 选择通行证注册与选择邮箱注册时切换输入框内容
autchImageId : "p_w_picpathdid",
authImageUrl:"/register/captcha-p_w_picpath?",
submitObj:".submitclass",//定义提交按钮为图片或其他非input按钮时候用到的
ajaxErrorMethod : defaultAjaxErrorMethod,
ajaxCalbackMethod : defaultAjaxCalbackMethod,  
valiErrorMethod : defaultValiErrorMethod,
valiSucceMethod: defaultValiSucceMethod,
usernameRequiredMsg: "没有填写用户名",
usernameRegexusernameMsg: "只能输入字符串和数字",
usernameMinlengthMsg:"用户名不能小于{0}个字符",  
usernameRemoteMsg:"用户名已经被注册",
passwordRequiredMsg:"没有填写密码",
passwordMinlengthMsg:"密码最少{0}个字符",
password_confirmationRequiredMsg:"没有确认密码",
password_confirmationEqualToMsg:"两次输入密码不一致嘛",
captchaEqualToMsg:"填写验证码",
captchaMaxlengthMsg:"验证码最多{0}个字符",
licenseRequiredMsg:"是否同意服务条款",
rightEmailMsg:"请输入正确格式邮箱",
emailRequiredMsg:"请输入邮箱地址",
notEqualNameAndPaswd: "用户名和密码不能相同!",
userNameMinLength:6,
passMinLength:6,
captMaxLength:4
};
/**
* 引用页面需要调用的方法
* registgerFormId 为注册表单ID
* defaultErrorMethod  处理错误的方法名称
* defaultCalbackMethod 处理 回调的方法名称
* null 为一些需要用到的常量,这里 写法为{a:'value',b:'value'}
*/
var validatorRegisterForm = function(newValidationData) {
$("body").after("<span id='errorShowId' style='display:none;'></span>");
/**
* 初始化常量,若newValidationData不为空,则会合并validationData
*/
validationData = jQuery.extend(true,validationData, newValidationData);
/**
* 定义默认的ajax请求参数
*/
var ajaxOptions = {
url : validationData.ajaxUrl,
type : "post",
dataType : "json",
success : function(data,status,XMLHttpRequest) { // 注册请求回调处理方法
validationData.ajaxCalbackMethod(data,status,XMLHttpRequest);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
validationData.ajaxErrorMethod(XMLHttpRequest, textStatus, errorThrown);
          }
};
/**
* 更改validator默认的form提交方式为异步ajax并执行提交操作
*/
$.validator.setDefaults({
submitHandler : function(form) {
var param = $(validationData.regFormId).serialize();
ajaxOptions = jQuery.extend(ajaxOptions, {
data : param
});
$.ajax(ajaxOptions);
}
});
/**
* 注意opts的定义必须要放在下面这句之前,不然的话,外面传递进来的自定义消息都没用了
*/
$(validationData.regFormId).validate({
onkeyup : false,
rules : {
username : {              
required : true,
notChina : true,
minlength : validationData.userNameMinLength,
remote:validationData.userNameRemote
},
password : {
required : true,
minlength : validationData.passMinLength,
               notEqualTo:validationData.userName
},
password_confirmation : {
required : true,
equalTo : validationData.passwordId
},
captcha : {
required : true,
maxlength : validationData.CaptMaxLength
},
license : {
required : true
}
},
messages : {
username : {
required : validationData.usernameRequiredMsg,
notChina : validationData.usernameRegexusernameMsg,
minlength : jQuery.format(validationData.usernameMinlengthMsg),
remote: validationData.usernameRemoteMsg
},
password : {
required : validationData.passwordRequiredMsg,
minlength : jQuery.format(validationData.passwordMinlengthMsg)
},
password_confirmation : {
required : validationData.password_confirmationRequiredMsg,
equalTo : validationData.password_confirmationEqualToMsg
},
captcha : {
required : validationData.captchaEqualToMsg,
maxlength : jQuery.format(validationData.captchaMaxlengthMsg)
},
license : {
required : validationData.licenseRequiredMsg
}
},  
errorPlacement: validationData.valiErrorMethod,
success: validationData.valiSucceMethod
   });
/**
* 图片做submit提交
*/
$(validationData.submitObj).click(function() {
$(validationData.regFormId).submit();
});
};
/**
* 默认的选择普通注册还是邮箱注册
* 这里规定registerType=1 为普通注册,为2为邮箱注册 可以被替换或重写
* **/
var selectRegisterType = function(registerType) {
  /*
    * 选择注册方式(通行证注册,邮箱注册)
    */
$(validationData.userName).css("display", "block");
$(validationData.userName).next().css("display", "none");
$(validationData.userName).val("");
$(validationData.userName).next().val("");
if (registerType == 1) { // 通行证注册
$(validationData.userName).rules("add", {notChina: true,messages:{notChina:validationData.usernameRegexusernameMsg}});
$(validationData.userName).rules("remove","email");
$(validationData.userName).next().val(validationData.usernameRequiredMsg);
} else { // 邮箱注册
$(validationData.userName).rules("add", {email: true,messages:{email:validationData.rightEmailMsg}});//"请输入正确格式邮箱"
$(validationData.userName).rules("remove","notChina");
   $(validationData.userName).next().val(validationData.emailRequiredMsg); //请输入邮箱地址
}
/**
* 因为每个校验规则都是有顺序,所以这里必须在上面添加完成email或regexusername规则后,再重新添加一次异步验证重复性规则
* 不然会先去验证重复性
*/
$(validationData.userName).rules("remove","remote");
$(validationData.userName).rules("add", {remote: validationData.userNameRemote,
messages:{remote:validationData.usernameRemoteMsg}});
$(validationData.userName).next().css("display", "block");
$(validationData.userName).css("display", "none");
$(validationData.userName).next().bind("focus", function() {
$(this).css("display", "none");
$(this).prev().css("display", "block");
$(this).prev().focus();
   });
};
/**
* 自定义一些正则表达式校验规则 这个是登录名通行证注册时,过滤中文的
*/
jQuery.validator.addMethod("notChina", function(value, element){
var notChinaReg = /^([a-zA-Z0-9]+)$/;
return this.optional(element) || (notChinaReg.test(value));}, validationData.usernameRegexusernameMsg);
jQuery.validator.addMethod("notEqualTo", function(value, element, param) {
 return value != $(param).val();
}, $.validator.format(validationData.notEqualNameAndPaswd));
/*
* 更换验证码
*/
var getValidateServlets = function() {
document.getElementById(validationData.autchImageId). validationData.authImageUrl< /div>
+ Math.random();
};
var changCurso = function() {
document.getElementById(validationData.autchImageId).style.cursor = "pointer";
};
那么页面端的调用就是这样(当然需要导入jquery,jquery.validate包)
$(document).ready(function(){
/*
*表单校验
* registgerFormId 为注册表单ID
* methodShowError1 处理错误的方法名称
* calback1 处理 回调的方法名称
* null 为一些需要用到的常量,这里 写法为{a:'value',b:'value'} ,如这里a与插件中的默认常量相同则会覆盖插件中的
                * 比如说,这里我插件里定义的默认表单Id为registgerFormId,但是如果我的页面里的表单Id不是这个而是formId,那么我就可以把null变为{regFormId:formId}
*/
validatorRegisterForm(methodShowError1,calback1,null);
});
(2)还有一点儿需要提出来说明的是:jquery.validate的rules规则都是按顺序来的,这个不能理解好,在实际的add,remove规则时候就会遇到一些自己很头痛的事情
向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI