JavaScript

超轻量级php框架startmvc

jquery validate 实现动态增加/删除验证规则操作示例

更新时间:2020-09-19 14:18:02 作者:startmvc
本文实例讲述了jqueryvalidate实现动态增加/删除验证规则操作。分享给大家供大家参考,具体

本文实例讲述了jquery validate 实现动态增加/删除验证规则操作。分享给大家供大家参考,具体如下:

页面加载完成初始化form validate 


$("#user_regForm").validate({
 errorPlacement: function(error, element){
 if(element.attr("id")=="province"||element.attr("id")=="city"||element.attr("id")=="area"){
 var error_td = element.parent().parent('dd').next();
 }else{
 var error_td = element.parent('dd').next();
 }
 error_td.html("");
 error_td.append(error);
 element.addClass("user_regNok");
 },
 error:function(label,element){
 element.addClass("user_regNok");
 },
 success : function(label,element){
 label.addClass('reg_validate_right').text('');
 element.removeClass("user_regNok");
 },
 submitHandler:function(form){
 console.info("submit:"+$(form).serializeArray());
 form.submit(); 
 },
 onkeyup: false,
 rules : {
 username:{
 required:true,
 alipay:true,
 remote : {
 url :'index.php?mod=ajax&act=check_user',
 type:'post',
 data:{
 username : function(){
 return $('#username').val();
 }
 }
 }
 },
 password : {
 required : true,
 rangelength:[6,20]
 },
 password_confirm : {
 required : true,
 equalTo : '#password'
 },
 captcha:{
 required : true,
 maxlength:4,
 remote : {
 url :'index.php?mod=ajax&act=check_captcha',
 type:'post'
 }
 }
 },
 messages : {
 username:{
 alipay:"输入电子邮箱或手机号码",
 remote:"用户名已存在"
 },
 password : {
 required : '您必须提供一个密码',
 rangelength: '密码长度应在6-20个字符之间'
 },
 password_confirm : {
 required : '您必须再次确认您的密码',
 equalTo : '两次输入的密码不一致'
 },
 captcha:{
 required : "请输入验证码",
 maxlength:"输入4位验证码",
 remote:"验证码错误"
 }
 }
 });

后期比如像增加某些表单的验证规则


var add_user_validate=function(){
 console.info("add_user_validate");
 remove_user_validate();
 $("#province").rules("add",{required:true,min:0,messages:{min:"请选择省份"}});
 $("#city").rules("add",{required:true,min:0,messages:{min:"请选择城市"}});
 $("#area").rules("add",{required:true,min:0,messages:{ min:"请选择区域"}});
 $("#sjhztype").rules("add",{required:true,min:0,messages:{ min:"请选择合作类型"}});
 $("#realname").rules("add",{required:true});
 $("#tel").rules("add",{required:true,mobile:0});
 $("#shopname").rules("add",{required:true});
 }

后来又因为什么原因不详以上元素需要验证

可以删除规则


var remove_user_validate=function(){
 console.info("remove_user_validate");
 $("#province").rules("remove");
 $("#city").rules("remove");
 $("#area").rules("remove");
 $("#sjhztype").rules("remove");
 $("#realname").rules("remove");
 $("#tel").rules("remove");
 $("#shopname").rules("remove");
 }

ok!!

jquery validate 动态 增加 删除 验证规则