Question

我有一张表格，我正在桌子上。我希望能够在它们出现之前验证这些值添加到表中。

我希望a "time#cnt#"成为一个整数的数字或者只有.5的十进制。例如，如果用户输入1.2并且他们尝试提交它，他们就会得到一条错误消息。他们可以输入1,1.5，.5,2.5等。

下面是我的表格，对JS来说是新的我不知道我会怎么做。我在这个网站和其他我看到如何验证是否为一个数字。

<cfform method="post" action="time.cfm" >  
 <table >      
    ......
     <td><input type="text" size="3" maxlength="5" name="time#cnt#" id="add_time" value=""></td>        
    .....

     </table>
    <p><input type="submit" class="submit" name="Submit" value=""></p>
</cfform>

Answer 1

如果您不介意坚持modern browsers only，则可以使用HTML5的验证。不需要JavaScript。在这种情况下，您需要输入类型＆＃34; number＆＃34;并将其step属性设置为＆＃34; 0.5＆＃34;

<input type="number" step=".5" />

现在，如果您输入任何小数不是.5的数字，浏览器将显示错误并阻止提交。请注意，较旧的浏览器只会将其视为文本输入并让所有内容通过，但您仍应进行服务器端验证。即使是javascript验证也可以被规避。

jsfiddle：http://jsfiddle.net/wtwpz1u9/1/

Answer 2

以下是一些适用于所有浏览器的代码：

form.onsubmit = function(e) {
    var value = document.getElementById("add_time").value;
    if (!isNumber(value) || (value % 0.5) !== 0) {
        e.preventDefault();
        alert("Bad input");
        return false;
    }   
}

function isNumber(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

<form id="form" method="post" >  
    <input type="text" size="3" maxlength="5" name="time#cnt#" id="add_time" value="" />
    <input type="submit" class="submit" name="Submit" value="Submit" />
</form>

Answer 3

尝试HTML5验证：

<input type="number" step="0.5" min="1" value="1">

如何将表单值限制为具有特定数字的值？

3 个答案: