如何验证输入栏用JavaScript

如果我有一个输入域和用于某个正则表达式模式属性，是否有可访问输入DOM元素，并且如果在其当前值符合验证一个JavaScript/JQuery的功能与模式？如何验证输入栏用JavaScript

2017-08-01 omega

您将需要使用HTML5 Validity Framework（检查节“使用JavaScript验证表单”），它提供了一个validity对象为已确认为它设置每个字段。这个validity对象公开了一组“有效性约束”（HTML5本身提供的每种验证类型）。

在你的情况，你要检查validity.patternMismatch的元素，看它是否是无效的。但是，只有一种类型的验证应用于元素validity.valid就足够了。

下面，我们有一个表单字段是必需的和已建立的一种模式。在这种情况下，知道该字段无效可能不足以达到您的目的，因此代码不仅会告诉您该元素是否无效，而且会显示您可以检查个别约束以了解其原因。

尽量不要输入任何数据，并点击提交按钮。这会告诉你这个元素是无效的，但是如果你看一下约束报告，你会在那种情况下看到valueMissing = true。然后尝试输入几个字符，您仍然会看到它显示为无效，但在此情况下将显示patternMismatch = true。

var field = document.getElementById("ss"); 
 
var btn = document.getElementById("btnValidity"); 
 

 
btn.addEventListener("click", function(evt){ 
 

 
    console.clear(); 
 

 
    // You can test for simple validity with the valid property 
 
    console.log("Is field valid? " + ss.validity.valid); 
 
    
 
    // And, you can get more specific by checking all the validity constraints 
 
    // Here, we're just looping the entire set for demo purposes 
 
    for(var constraint in ss.validity){ 
 
    if(ss.validity[constraint]){ 
 
     console.log(constraint + " = " + ss.validity[constraint]); 
 
    } 
 
    } 
 
    
 
});

/* Valid and invalid elements can show their state in real time with CSS pseudo-classes */ 
 
input[type=text]:active, input[type=text]:focus { outline:none; } 
 
input[type=text]:valid { box-shadow:0 0 3px green; } 
 
input[type=text]:invalid { box-shadow:0 0 3px red; }

SS#: <input type="text" required pattern="^\d{3}-\d{2}-\d{4}$" id="ss" placeholder="xxx-xx-xxxx"> 
 
<button id="btnValidity">Check validity</button>

来源

2017-08-01 19:41:47

HTMLInputElement.checkValidity()，supported by IE 10 and later，将检查所有约束的一次。

console.log(document.getElementById('a').checkValidity()) 
 
console.log(document.getElementById('b').checkValidity())

<input id="a" pattern="a+" value="aaaa" /> 
 
<input id="b" pattern="a+" value="aaba" />

来源

2017-08-01 19:42:05 Ryan

$(function() { 
 
    var $input = $('#my-input'); 
 
     
 
    $input.on('change', function() { 
 
     var pattern = $input.attr('data-my-pattern-attr'); 
 
     var regex = new RegExp(pattern, "g"); 
 

 
     if ($input.val().match(regex)) { 
 
      console.log('matches'); 
 
     } else { 
 
      console.log('no match'); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input type="text" id="my-input" data-my-pattern-attr="[a-z]+" />

来源

2017-08-01 19:49:04 hyubs

问题不标记与jQuery。 –

@ScottMarcus OP在问题中指定了“javascript/jquery”。 – hyubs

啊，没有看到。标题和问题仅用JavaScript标记。 –

如何验证输入栏用JavaScript

回答

相关问题