Question

我正在尝试验证html中的文本输入。我只想要字母和空格。最初，验证有效，但现在无效，而且我似乎找不到问题。它仍然提交带有无效字段的表格。请参见下面的代码

index.html

<div class="full-form">
    <form class=form-info action="cv.html" onsubmit="return handlesubmit()" >
    <div class="f-header">
        SIGN UP
    </div>
    
    <div class="bdetails">
        <label for="fname">First Name</label><br>
        <input type="text" name="fname" id="f_name" placeholder="First Name" onfocus="checkFName()" onblur="BlurFName()" required><br>
        <p class="error_message" id="First_em">Name must contain only alphabets(A-Z)</p>
    </div>
    <script type="text/javascript" src="test.js"></script>
    </form>

test.js

function checkData(){
    if(BlurFName()){
   
    }
    return false;
}


function handlesubmit(){
   checkData();
        passvalue();
    

}

/ * 重点检查输入名称是否有效的功能 * /

function checkFName(){
    let name_len=/^[A-Za-z]+$/;
    let fname= document.getElementById("f_name");
    if(!fname.value.match(name_len)){
        document.getElementById("First_em").style.display = "inline";
        return true;
    } 
};

/ * 当输入模糊时检查输入的名称是否有效的功能 * /

function BlurFName(){   
    let name_len=/^[A-Za-z]+$/;
    let fname= document.getElementById("f_name");

    if(fname.value.match(name_len)){
        document.getElementById("First_em").style.display = "none";
        return false;
    }

};

Answer 1

使用handlesubmit函数，您需要返回false或true。

我建议使用

class posts(db.Model):
    _id = db.Column("id",db.Integer, primary_key=True)
    post = db.Column(db.String(500))
    post_date = db.Column(db.DateTime, nullable=False)
    post_location = db.Column(db.String(100))

    def __init__(self, post, post_date, post_location):
        self.post = post
        self.post_date = post_date
        self.post_location = post_location

更易于处理表单提交

Answer 2

您没有从验证方法中返回任何信息。您需要执行以下操作：

function validateName () {
  const inp = document.getElementById("fname");
  const isValid = inp.value.trim().length > 0;
  inp.classList.toggle('error', !isValid);
  return isValid;
}

function validateGuess () {
  const inp = document.getElementById("guess");
  const isValid = +inp.value.trim() > 10;
  inp.classList.toggle('error', !isValid);
  return isValid;
}

function validate () {
  const isNameValid = validateName();
  const isGuessValid = validateGuess();
  return isNameValid && isGuessValid;
}

.error { border-color: red; }

<form onsubmit="return validate()">
  <label for="fname">name</label> <input type="text" name="fname" id="fname" /><br/>
  <label for="guess">guess</label> <input type="number" name="guess" id="guess" />
  <button>Submit</button>
</form>

即使输入无效，表单也将提交

2 个答案: