Question

我正在使用以下javascript代码检查提交表单。如果我的任何输入框为空白，则脚本将更改相关输入字段的边框颜色。

我也试图检查这些输入字段的格式和字符长度，但似乎遇到了麻烦。

我的变量c是排序代码的输入字段，所以我正在检查变量c是否不超过6个数字，否则将边框颜色更改为如果它为null则更改的颜色。这项工作正常，但我不知道是否有比这更好的方式做到这一点？

我还想检查一下，确保只在这个字段中输入数字？并且想要找到一种方法，当用户键入时，我可以将分隔符添加到输入到sortcode字段中的数字，所以不要只是这样：

我得到了

00-01-45

有人能告诉我如何才能实现这一目标吗？谢谢，

HTML：

<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" name="bank" onsubmit="return ValidateChangeBank()"> 
<input type="text" name="bank_name" id="bank_name" placeholder="Bank Name" class="input_form"  autocomplete="off">
<input type="text" name="account_name" id="account_name" placeholder="Account Name" class="input_form" autocomplete="off">
<input type="text" name="sort_code" id="sort_code" placeholder="Sortcode" class="input_form" autocomplete="off">
<input type="text" name="account_number" id="account_number" placeholder="Account Number" class="input_form" autocomplete="off"><br/><br/>

<input type="submit" name="subimt" id="submit" value="Change" class="buttons" >
</form>

Jquery的

 <script>
function ValidateChangeBank() {
 var a = document.forms["bank"]["bank_name"].value;
 var b = document.forms["bank"]["account_name"].value;
 var c = document.forms["bank"]["sort_code"].value;
 var d = document.forms["bank"]["account_number"].value;

 if(c.length < 6 && c.length > 0) { document.forms["bank"]["sort_code"].style.borderColor = "#963634"; 
 return false;

 }else{

 if (a == null || a == "" || b == null || b == "" || c == null || c == ""|| d == null || d == "" ) {
 if (a == null || a == "") { document.forms["bank"]["bank_name"].style.borderColor = "#963634"; }
 if (b == null || b == "") { document.forms["bank"]["account_name"].style.borderColor = "#963634"; }
 if (c == null || c == "") { document.forms["bank"]["sort_code"].style.borderColor = "#963634"; }
 if (d == null || d == "") { document.forms["bank"]["account_number"].style.borderColor = "#963634"; }




 return false;


 };

}}

Answer 1

将分隔符添加到输入到sortcode字段的数字中当用户输入
时

要添加分隔符，请尝试以下操作：

＆＃13;

var putSeparator = function(tb) {
  if (/^\d{6}$/.test(tb.value.replace(/\D/g, ''))) {
    tb.value = tb.value.replace(/(\d{2})(\d{2})/, '$1-$2-');
    tb.style.borderColor = 'initial';
  } else {
    tb.style.borderColor = 'red';
  }
};

/*

tb.value.replace(/\D/g,'') will replace all non 0-9 values

^\d{6}$/.test(), will check if given text is 0-9 of size 6

tb.value.replace(/(\d{2})(\d{2})/, '$1-$2-'), here (\d{2}) gives pair of digits then those pairs are separated by using  $1-$2-

*/

＆＃13;

<input type="text" name="sort_code" id="sort_code" placeholder="Sortcode" class="input_form" autocomplete="off" onkeyup='putSeparator(this);' />

＆＃13;

Answer 2

尝试使用jquery验证插件进行验证......这非常方便，您可以编写自定义扩展

Answer 3

既然你说你正在使用jQuery，你可以使用这个jQuery代码在提交时添加一个空的输入边框 - note ：putSeparator脚本来自Arvin的回答。

$("div").click(function(){
    $("div").css("background","none");
    $(this).css("background","green"); 
    var index = $(this).index();
    alert(index);
});

javascript检查输入字段不是空白并检查输入字段长度？

3 个答案: