在DNN中使用jQuery的插件Validate-优快云博客

本文详细介绍了在DNN平台中使用jQuery Validate插件的方法，包括解决控件ID变化、使用ClientID获取元素、自定义验证规则及错误信息显示等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在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 ' );
   }
});
});

转载于:https://www.cnblogs.com/GDLMO/archive/2010/01/16/1649752.html