对于页面当中的Text进行输入校验，看似简单，涉及到的内容还比较复杂。
为了提高未来的开发效率，花了一些时间写了以下这个较为全面的校验例子：
1.
限制因素：
当输入为任意字符时，一般情况下长度是唯一的限制因素;
当输入为数字型时，一般情况下是数值的大小.
2.
监听动作
包括keypress, paste动作;
3.
其他要求
.对于keypress, 字符允许在任意位置输入;
.对于paste, 字符允许在任意位置paste, 当最终长度将超出时, 从剪切板中截取合适长度的字符进行粘贴;
.不允许出现字符短暂出现后又因为无法通过校验而被删除的现象, 造成不好的用户体验.
4.
遗留问题
.当keypress对于数字型输入时, 当输入的数字不落在最后一个数字后, 且不能够通过校验, 会出现光标位置自动跳移到字符串最后的现象. 因为Text在onpropertychange时被previousValue替换, 而不是在onkeypress时就被阻止.
<html>
<head>
<title>输入文本框校验</title>
<script type="text/javascript">
<!--
var CHAR = 1;
var NUMBER = 2;
// Validation object, This is where to define validation limitation.
var validation = new Object();
validation.type = NUMBER;
validation.maxValue = 200;
window.onload = addListeners;
// Add listeners to elements
function addListeners()
{
var text = document.getElementById('wText');
text.onkeypress = function() {
return checkKeyPress(text, validation);
}
text.onpaste = function() {
return checkPaste(text, validation);
}
text.onpropertychange = function() {
return checkAfterPropertyChanged(text, validation);
}
}
// Listener for key pressed
function checkKeyPress(text, validation)
{
var str = text.value;
if(validation.type == CHAR)
{
// validate character length
if(validation.length)
{
var oSR=document.selection.createRange();
if(str.length<validation.length)
return true;
else if(oSR.text.length>0)
return true;
else
return false;
}
}
else if(validation.type == NUMBER)
{
// validate key input is a digit
var key = window.event ? event.keyCode : event.which;
var keychar = String.fromCharCode(key);
if(!checkDigit(keychar)) return false;
text.previousValue = text.value;
}
}
// Listener for paste action
function checkPaste(text, validation)
{
var str=text.value;
var oSR=document.selection.createRange();
var strData=clipboardData.getData('text');
// save original value to rolllback
text.previousValue = str;
if(validation.type == CHAR)
{
// validate character length
if(validation.length)
{
var iLenPaste=validation.length-str.length+oSR.text.length;
oSR.text=strData.substring(0,iLenPaste);
return false;
}
}
else if(validation.type == NUMBER)
{
// validate value pasted is a number
if(!checkDigit(strData)) return false;
text.previousValue = text.value;
}
}
// Check after keypress or paste
function checkAfterPropertyChanged(text, validation)
{
// only listen for property 'value'
if(event.propertyName != 'value') return;
if(validation.type == NUMBER)
{
if(text.value.strip() == '') return;
var value = parseInt(text.value);
if(isNaN(value) || value > validation.maxValue)
{
text.value = text.previousValue; // reset to previous value
}
}
}
// check whether char inputted is a number
function checkDigit(s)
{
var regx = /^\d+$/;
return regx.test(s);
}
String.prototype.strip = function()
{
return this.replace(/^\s+/, '').replace(/\s+$/, '');
}
// -->
</script>
</head>
<body>
<input type="text" id="wText" />
</body>
分享到：
相关推荐
首先，我们可以创建一个自定义的TextBox类，继承自System.Windows.Forms.TextBox，然后在这个新类中添加校验逻辑。下面是一段示例代码： ```csharp public class ValidatingTextBox : TextBox { public delegate ...
在WPF中，数据绑定是实现TextBox输入校验的基础。通过将TextBox的Text属性与视图模型中的某个属性绑定，我们可以将输入控制与业务逻辑分离，从而更好地管理校验过程。例如，可以使用以下XAML代码将TextBox与名为`...
对于特定场景，比如只允许用户输入数字的情况下，就需要对用户的输入进行严格的验证。 #### 二、代码实现分析 本节将详细分析提供的代码片段，并解释其实现原理。 ##### 1. 函数定义 ```javascript function ...
该函数可以很方便的校验页面上不许为空的项，校验页面输入框Text的合法值，如数字和日期的校验等。如果不许某项为空可以这样设置：申请单位：<input type="text" name="copmany" title="申请单位;nullStr:false;">。...
最后，日期的校验通常涉及确保输入的日期符合指定的格式，并且在有效的时间范围内。C#中的DateTime结构提供了多种方法进行日期操作。例如，以下代码验证一个日期字符串是否符合"yyyy-MM-dd"格式： ```csharp public...
这个函数遍历表单元素，对每个类型为`text`的输入框进行校验。它首先初始化两个变量`resultTag`（记录不包含特殊字符的文本框数量）和`flag`（记录所有文本框的数量）。接着，它使用一个正则表达式（例如`/^[^\|"']*...
银行卡号校验是金融系统中常见的一项功能，它能够确保用户输入的卡号是符合标准格式并且在一定程度上能识别出错误输入或伪造卡号。本篇内容主要介绍了如何使用Luhn算法来进行银行卡号的校验。Luhn算法是由IBM科学家...
本文档介绍了一个简单的验证两次输入密码一致性的校验器实现。 #### 二、技术栈与环境 该项目使用了以下技术： - **Struts 2**：作为MVC框架的基础。 - **Java**：作为后端语言。 - **XML**：用于配置文件。 - **...
### 基于XML配置方式实现对Action的所有方法进行输入校验 #### 一、概述 在本篇文章中，我们将详细介绍如何通过XML配置文件来实现对Struts2框架中的Action类的所有方法进行输入数据的校验。这种方法不仅提高了代码...
通常，PLC编程语言如Ladder Diagram（梯形图）、Structured Text（结构化文本）或Function Block Diagram（功能块图）都可以实现LRC校验。 在PLC中，实现LRC校验的过程与Java类似，但语法和库函数会有所不同。具体...
在NumberText函数中，使用window.event.keyCode可以判断用户输入的按键，如果输入的按键不合理，例如输入非数字键，可以直接屏蔽掉该输入，从而保障输入数值的正确性。 知识点4：设置输入框数值类型 通过设置...
- **校验结果输出**：通过比较输入条码的最后一位与计算出的校验码 \( e \) 是否相同来判断条码的有效性，并给出相应的提示消息。 #### 四、标签解析 - **控件**：指的是程序中使用的文本框控件 `Text1` 和按钮控件...
Struts2作为一款流行的Java Web框架，其在处理用户输入数据和实现多语言支持方面具有强大的功能。在“Struts2数据校验与国际化”这一主题中，我们将深入探讨Struts2如何通过不同的验证机制确保数据的有效性，以及...
- **数据处理和存储**：程序需要管理待校验数据的输入和校验结果的输出，这可能涉及到数据缓冲区和寄存器的使用。 - **错误处理**：当检测到数据校验错误时，程序需要采取相应的措施，如重新发送数据、记录错误日志...
<input type="text" v-model="fields.field1" v-validate="'required|email'" placeholder="请输入邮箱"> $v.fields.field1.$error">邮箱格式不正确 <input type="text" v-model="fields.field2" v-validate="'min:...
2. **校验位计算**：根据预设的校验位算法（如Luhn算法），软件对输入的序列号进行计算，添加校验位。 3. **验证**：生成校验位后，软件可以立即验证新序列号的正确性，确保校验位的计算无误。 4. **输出显示**：...
1. **`getBinary(String text)`** 方法：此方法用于将输入的字符串转换成二进制编码的整型数组。首先，它会将每个字符转换为其ASCII值对应的二进制字符串，如果该字符串长度不足8位，则在其前补0至8位。最终，将所有...
最后，根据总和模10的结果计算出校验位，并将其显示在Text2控件中。 需要注意的是，这段代码没有明确区分EAN-13码和ITF-14码，因为它只是简单地计算了一个13或14位数字的校验位。在实际应用中，可能需要根据编码...