[英]Validate input value before it is shown to user
我有一个html <input>
和一些模式(例如-?\\d*\\.?\\d*
浮点值)。
我应该防止键入不匹配的值。
我以另一种方式做到了
jQuery.fn.numeric = function (pattern)
{
var jqElement = $(this), prevValue;
jqElement.keydown(function()
{
prevValue = jqElement.val();
})
jqElement.keyup(function(e)
{
if (!pattern.test(jqElement.val()))
{
jqElement.val(prevValue);
e.preventDefault();
}
prevValue = ""
})
};
但是在这种情况下,会向用户显示值,然后将其更正为正确的值。
在显示给用户之前,是否有办法验证价值?
我可以使用html5
pattern
属性
$("#validateMe").on('keydown', function() {
var charBeingTyped = String.fromCharCode(e.charCode || e.which); // get character being typed
var cursorPosition = $(this)[0].selectionStart; // get cursor position
// insert char being typed in our copy of the value of the input at the position of the cursor.
var inValue = $(this).value().substring(0, cursorPosition) + charBeingTyped + $(this).value().substring(cursorPosition, $(this).value().length);
if(inValue.match(/-?\d*\.?\d*/)) return true;
else return false;
});
如何使用此POJS,我使用的是跨浏览器的addEvent
函数而不是jquery,并且未使用任何正则表达式,但是我相信它可以实现您所寻找的功能。 按+
或-
更改值的符号。
HTML
<input id="test" type="text" />
使用Javascript
/*jslint maxerr: 50, indent: 4, browser: true */
(function () {
"use strict";
function addEvent(elem, event, fn) {
if (typeof elem === "string") {
elem = document.getElementById(elem);
}
function listenHandler(e) {
var ret = fn.apply(null, arguments);
if (ret === false) {
e.stopPropagation();
e.preventDefault();
}
return ret;
}
function attachHandler() {
window.event.target = window.event.srcElement;
var ret = fn.call(elem, window.event);
if (ret === false) {
window.event.returnValue = false;
window.event.cancelBubble = true;
}
return ret;
}
if (elem.addEventListener) {
elem.addEventListener(event, listenHandler, false);
} else {
elem.attachEvent("on" + event, attachHandler);
}
}
function verify(e) {
var target = e.target, // shouldn't be needed: || e.srcElement;
value = target.value,
char = String.fromCharCode(e.keyCode || e.charCode);
if (value.charAt(0) === "-") {
if (char === "+") {
e.target.value = value.slice(1);
}
} else if (char === "-") {
e.target.value = char + value;
return false;
}
value += char;
return parseFloat(value) === +value;
}
addEvent("test", "keypress", verify);
}());
我想我使用了正确的值keyCode || charCode
keyCode || charCode
但您可能要搜索和检查。 正确的总结在这里
您可以使用此代码找出按下了哪个字符。 验证该字符,如果验证,则将其附加到输入字段。
试试这个代码:
jQuery.fn.numeric = function (pattern) { $(this).keypress(function(e) { var sChar = String.fromCharCode(!e.charCode ? e.which : event.charCode); e.preventDefault(); var sPrev = $(this).val(); if(!pattern.test(sChar)){ return false; } else { sPrev = sPrev + sChar; } $(this).val(sPrev); }); }; $("#validateId").numeric(/^-?\\d*\\.?\\d*$/);
更新:我的示例在键入时验证了每个字符。 如果您宁愿检查输入字段的整个值,我建议在另一个Event上验证该值,例如Input blur()。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.