功能强大的JS虚拟键盘加jquery.validate表单校验

最新推荐文章于 2025-08-17 20:43:43 发布

转载最新推荐文章于 2025-08-17 20:43:43 发布 · 78 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yerikm/p/10155743.html

文章标签：

#javascript #ViewUI

本文探讨了在项目中整合jQuery.validate进行实时键盘输入验证的方法，解决了虚拟键盘环境下按下键盘即触发验证的问题，并分享了调整虚拟键盘样式及功能的技巧。

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

源码下载：https://i.cnblogs.com/Files.aspx

原文地址：http://www.cnblogs.com/nnzfly/archive/2013/01/22/2871547.html

******************************************华丽的分隔符***********************************************

先说jquery.validate验证问题：

　　1. 因为虚拟键盘没有自带键盘事件，而项目中又需要做到按下键盘就验证而不是失焦才验证，所以需要给虚拟键盘加keyup事件，代码如下：

　　　　 $('#softkey').on('click','.kbButton',function(){
　　　　 $("#txt_Search").trigger("keyup");
　　　　 });

　　2. 验证组件的form()方法可以验证整个表单是否可以提交，但是每个input框都会出提示，所以改用验证单个元素是成功还是失败，最后取&&。

　　　　var booleanValue = $( "#myForm" ).validate().element( "#idCardText" );

虚拟键盘问题：（加键盘事件看上面）

下载后直接根据demo融合到项目中即可。注：vk_loader.js位置不要乱动。(如需默认显示英文将CN%20Chinese%20Simpl.%20Pinyin改为US US即可)

遇到的两个小问题：

解决方法：将\css\flat_gray\keyboard.css的#virtualKeyboard{}选择器代码替换

#virtualKeyboard {
        border: 1px solid #b3b3b3;
        background: #f2f3f7;
        /**height: 222px;**/
        height: 196px;
        margin: 0;
        padding-right: 2px;
        position: absolute;
        visibility: visible !important;
        width: 651px;
        z-index: 1;
}

修改后: