Question

我有一个表单验证代码，如果有人将其留空或在第一个名称输入文本框中输入一个整数，它应该给出一个红色背景颜色，代码工作但是出于某种原因，每当我点击提交它变红不到一秒就消失了。如何使文本框永久显示为红色。下面是HTML和JavaScript代码，如果有人可以提供帮助，那么

HTML

<html>
<head>
<script src="Scripts/Asgn_3_2.js"></script>
</head>
<body>
<form name="registration">
<div>
    First Name:<input type="text" placeholder="Enter Your First Name" 
size="20" id="fname" /><br/><br/>
    Last Name:<input type="text" placeholder="Enter Your Last Name" 
size="20" id="lname"/><br/><br/>
    Gender: <input type="radio" value="Male" id="mgender" />Male &nbsp&nbsp 
<input type="radio" value="Female" id="fgender" />Female <br/><br/>
    <select>
        <option>AL</option>
        <option>CA</option>
        <option>FL</option>
        <option>IL</option>
        <option>KS</option>
        <option>MN</option>
    </select> <br/><br/><br/><br/>
    <input type="checkbox" value="I Accept the terms"/>I Accept the terms 
<br/><br/>
    <button onclick="submitbutton()">Submit</button>
</div>
</form>

</html>

JAVASCRIPT

function submitbutton(){
if (document.getElementById("fname").value == 0){
document.getElementById("fname").style.backgroundColor="red"; 
}
else if (!isNaN(document.getElementById("fname").value)){
document.getElementById("fname").style.backgroundColor="red";
}
if (document.getElementById("lname").value == 0){
document.getElementById("lname").style.backgroundColor="red";  
}
else if (!isNaN(document.getElementById("lname").value)){
document.getElementById("lname").style.backgroundColor="red";  
}

}

Answer 1

您应该返回false以避免按钮处理任何进一步的操作。

function submitbutton(){
if (document.getElementById("fname").value == 0){
  document.getElementById("fname").style.backgroundColor="red"; 
  return false;
}
else if (!isNaN(document.getElementById("fname").value)){
  document.getElementById("fname").style.backgroundColor="red";
  return false;

Answer 2

使用jquery库来实现这种功能。

$('#register').submit(function(e){
  e.preventDefault();
  if($('#fname').val() == 0 || !isNaN($('#fname').val())){
    $('#fname').css('background-color', 'red');
  }else{
   $('#fname').css('background-color', '');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<script src="Scripts/Asgn_3_2.js"></script>
</head>
<body>
<form name="registration" id="register">
<div>
    First Name:<input type="text" placeholder="Enter Your First Name" 
size="20" id="fname" /><br/><br/>
    Last Name:<input type="text" placeholder="Enter Your Last Name" 
size="20" id="lname"/><br/><br/>
    Gender: <input type="radio" value="Male" id="mgender" />Male &nbsp&nbsp 
<input type="radio" value="Female" id="fgender" />Female <br/><br/>
    <select>
        <option>AL</option>
        <option>CA</option>
        <option>FL</option>
        <option>IL</option>
        <option>KS</option>
        <option>MN</option>
    </select> <br/><br/><br/><br/>
    <input type="checkbox" value="I Accept the terms"/>I Accept the terms 
<br/><br/>
    <input type="submit">
</div>
</form>

</html>

Answer 3

提交验证失败返回false否则返回true。你的代码应该是这样的

＆＃13;

import requests
from bs4 import BeautifulSoup
import json

n_index = 10
base_link = 'http://xxx.xxx./getinfo?range=10&district_id=1&index='
for i in range (1,n_index+1):
    link = base_link+str(i)
    r = requests.get(link)
    pid = r.json()
    print (pid)

＆＃13;

成功验证后，您必须删除文本框颜色。您还需要为其他控件添加验证。

表单验证无法正常工作，输入文本背景颜色会消失

3 个答案: