Javascript 我想使输入字段具有唯一值

假设（A）页有5个输入字段

我希望用户填写所有字段，但每个字段的类名必须是唯一的

所以他无法填补空缺

甲级

b类

类别a<此类别重复，因此应显示错误消息

c类

d类

我想我可以在action.php页面中使用if语句来检查提交字段中是否存在重复

但我不希望在我再次重新加载此页面以向他显示错误时丢失所有其他值

html5或类似的东西中有类似的属性吗

---

谢谢

不，这不能单靠HTML5来实现。您必须编写一些JavaScript才能实现这一点。JavaScript代码应该检查所有值，如果其中任何两个值相同，则会阻止表单成功提交

在这种情况下，您可以在用户每次填写文本框时使用javascript验证字段。以下是一个例子：

$('input[type=text]').on('change',function(){
    var arr = [];
    $siblings = $(this).siblings();
    $.each($siblings, function (i, key) {
       arr.push($(key).val()); 
    });
    if ($.inArray($(this).val(), arr) !== -1)
    {
        alert("duplicate has been found");
    }
});

jsidle:

var frm=document.querySelector（'form.classesName'）；
var inputs=frm.querySelectorAll（'input[type=text]'）；
frm.addEventListener（'submit'，函数（e）{
e、 预防默认值（）；
var classArr=[]；
对于（变量i=0；i

---

谢谢，这是否可以在不重新加载页面的情况下在javaScript中发生？是的，这是javaScript非常有帮助的一个方面，它提供了非常好的答案，只需稍作调整，但可以立即执行。您还可以将此处理程序移动到表单提交事件中，因为此时他们希望进行验证，如果存在重复，则停止提交。目前它不会停止表单提交。非常感谢您的回答，但唯一缺少的是，即使有重复，它也会提交，谢谢

$('input[type=text]').on('change',function(){
    var arr = [];
    $siblings = $(this).siblings();
    $.each($siblings, function (i, key) {
       arr.push($(key).val()); 
    });
    if ($.inArray($(this).val(), arr) !== -1)
    {
        alert("duplicate has been found");
    }
});

var frm = document.querySelector('form.classesName');
var inputs = frm.querySelectorAll('input[type=text]');

frm.addEventListener('submit', function(e) {
    e.preventDefault();
    var classArr = [];

    for(var i = 0; i < inputs.length; i++) {
        if(classArr.indexOf(inputs[i].value) != -1) {
            inputs[i].style.backgroundColor = "red";
            return false;
        }
        else
            classArr.push(inputs[i].value);
    }
    frm.submit();
});