在DNN中使用jQuery的插件Validate

浪子不回头ぞ 提交于 2020-02-21 13:11:20

在DNN中已经集成了jQuery,但是由于对jQuery不熟悉,对.net用得也有些生疏,所以在使用jQuery插件时做了些无用功,现记下过程,以备忘记。

一:我将validate插件 “/Resources/Shared/scripts/jquery/”目录中,所以在模块的头部应该做如下引用。

<script src="<%=ResolveUrl("~/Resources/Shared/scripts/jquery/jquery.validate.min.js")%>" type="text/javascript"></script>


二:模块设计时用定义<asp:TextBox id=“txtName" .... />,结果在输出时id变成了dnn_ctr381_EditDeviceDeploy_txtName,之前写jQuery时使用的$("#txtName")当然不对了,因为ASP.NET 和DNN 都会重写控件的ID,所以写客户端的JS是不能直接使用ID,而是要用一段代码获取 ClientID. 可以把$("#txtName") 替换为$("<%= txtName.ClientID %>") 。

 

三:validate插件使用控件中定义的name进行验证的,所以控件应该写成

<asp:TextBox id="txtDeviceName" name="txtDeviceName" runat="server" />


同理,name在输出时会变成“dnn$ctr381$EditDeviceDeploy$txtDeviceName ”,所以我们的js代码应写成

 

代码
<script type="text/javascript">
    $().ready(function() {        
        
// validate signup form on keyup and submit
        $("#Form").validate({
        rules: {  
                
<%=(txtDeviceName.ClientID).Replace("_","$"%> : {
                    required: true,
                    email: true
                },             
                email: {
                    required: true,
                    email: true
                }
            },
            messages: {                
                
<%=(txtDeviceName.ClientID).Replace("_","$"%>:"Please enter a valid devicename",
                email: "Please enter a valid email address"               
            }
        });
    });
</script>

另外,记下Validate的一些设置,来源是:http://www.cnblogs.com/caojinqin/archive/2009/02/20/1394911.html

代码
Java代码 复制代码

(document).ready(
function(){    
 
* 设置默认属性 */    
.validator.setDefaults({    
 submitHandler: 
function(form) { form.submit(); }    
);    
/ 中文字两个字节    
Query.validator.addMethod(
"byteRangeLength"function(value, element, param) {    
 
var length = value.length;    
  
for(var i = 0; i < value.length; i++){    
   
if(value.charCodeAt(i) > 127){    
    length
++;    
   }    
  }    
  
return this.optional(element) || ( length >= param[0&& length <= param[1] );    
}, 
"请确保输入的值在3-15个字节之间(一个中文字算2个字节)");    
  
/* 追加自定义验证方法 */    
// 身份证号码验证    
jQuery.validator.addMethod("isIdCardNo"function(value, element) {    
  
return this.optional(element) || isIdCardNo(value);    
}, 
"请正确输入您的身份证号码");    
  
// 字符验证    
jQuery.validator.addMethod("userName"function(value, element) {    
  
return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);    
}, 
"用户名只能包括中文字、英文字母、数字和下划线");    
  
// 手机号码验证    
jQuery.validator.addMethod("isMobile"function(value, element) {    
  
var length = value.length;    
  
return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/.test(value));    
}, 
"请正确填写您的手机号码");    
  
// 电话号码验证    
jQuery.validator.addMethod("isPhone"function(value, element) {    
  
var tel = /^(\d{3,4}-?)?\d{7,9}$/g;    
  
return this.optional(element) || (tel.test(value));    
}, 
"请正确填写您的电话号码");    
  
// 邮政编码验证    
jQuery.validator.addMethod("isZipCode"function(value, element) {    
  
var tel = /^[0-9]{6}$/;    
  
return this.optional(element) || (tel.test(value));    
}, 
"请正确填写您的邮政编码");    
$(regFrom).validate({    
/* 设置验证规则 */    
  rules: {    
   userName: {    
    required: 
true,    
    userName: 
true,    
    byteRangeLength: [
3,15]    
   },    
   password: {    
    required: 
true,    
    minLength: 
5    
   },    
   repassword: {    
    required: 
true,    
    minLength: 
5,    
    equalTo: 
"#password"    
   },    
   question: {    
    required: 
true    
   },    
   answer: {    
    required: 
true    
   },    
   realName: {    
    required: 
true    
   },    
   cardNumber: {    
    isIdCardNo: 
true    
   },    
   mobilePhone: {    
    isMobile: 
true    
   },    
   phone: {    
    isPhone: 
true    
   },    
   email: {    
    required: 
true,    
    email: 
true    
   },    
   zipCode: {    
    isZipCode:
true    
   }    
  },    
/* 设置错误信息 */    
  messages: {    
   userName: {    
    required: 
"请填写用户名",    
    byteRangeLength: 
"用户名必须在3-15个字符之间(一个中文字算2个字符)"    
   },    
   password: {    
    required: 
"请填写密码",    
    minlength: jQuery.format(
"输入{0}.")    
   },    
   repassword: {    
     required: 
"请填写确认密码",    
     equalTo: 
"两次密码输入不相同"    
    },    
    question: {    
     required: 
"请填写您的密码提示问题"    
    },    
    answer: {    
     required: 
"请填写您的密码提示答案"    
    },    
    realName: {    
     required: 
"请填写您的真实姓名"    
    },    
    email: {    
     required: 
"请输入一个Email地址",    
     email: 
"请输入一个有效的Email地址"    
    }    
   },    
 
/* 错误信息的显示位置 */    
   errorPlacement: 
function(error, element) {    
    error.appendTo( element.parent() );    
   },    
 
/* 验证通过时的处理 */    
   success: 
function(label) {    
    
// set   as text for IE    
    label.html(" ").addClass("checked");    
   },    
 
/* 获得焦点时不验证 */    
   focusInvalid: 
false,    
   onkeyup: 
false    
 });    
   
 
// 输入框获得焦点时,样式设置    
 $('input').focus(function(){    
   
if($(this).is(":text"|| $(this).is(":password"))    
    $(
this).addClass('focus');    
   
if ($(this).hasClass('have_tooltip')) {    
    $(
this).parent().parent().removeClass('field_normal').addClass('field_focus');    
   }    
 });    
   
 
// 输入框失去焦点时,样式设置    
 $('input').blur(function() {    
   $(
this).removeClass('focus');    
   
if ($(this).hasClass('have_tooltip')) {    
    $(
this).parent().parent().removeClass('field_focus').addClass('field_normal');    
   }    
 });    
 }); 


 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!